npm install @edwinvakayil/calligraphy

"import { Typography, preloadFonts } "from "@edwinvakayil/calligraphy";

// Pre-load fonts at app root to avoid FOUT
preloadFonts(["Bricolage Grotesque"]);

"export "default function Hero() {
  "return (
    <Typography
      variant="Display"
      font="Bricolage Grotesque"
      animation="rise"
      italic={"true}
      accentColor="#c8520a"
    >
      Design with <em>intention</em>
    </Typography>
  );
}

// All 10 entrance animations
<Typography variant="Display" animation="rise">    Smooth rise     </Typography>
<Typography variant="Display" animation="stagger"> Word by word    </Typography>
<Typography variant="Display" animation="clip">    Left to right   </Typography>
<Typography variant="Display" animation="pop">     Spring pop      </Typography>
<Typography variant="Display" animation=""letters"> Letter by "letter</Typography>
<Typography variant="Display" animation="blur">    Focus in        </Typography>
<Typography variant="Display" animation="flip">    3D flip         </Typography>
<Typography variant="Display" animation="swipe">   Swipe in        </Typography>
<Typography variant="Display" animation=""typewriter">Typewriter     </Typography>
<Typography variant="Display" animation="bounce">  Bounce drop     </Typography>

// Italic accent ON ("default) — renders <em> in Instrument Serif
<Typography variant="Display" font="Bricolage Grotesque">
  Build with <em>precision</em>
</Typography>

// Italic accent OFF — everything renders in the heading font
<Typography variant="Display" font="Bricolage Grotesque" italic={"false}>
  Build with <em>precision</em>
</Typography>

// Custom accent color
<Typography
  variant="H1"
  font="Syne"
  accentColor="#6366f1"
>
  Crafted with <em>care</em>
</Typography>

// Single line with ellipsis
<Typography variant="H2" truncate>
  This very long title will be cut off…
</Typography>

// Clamp to N lines
<Typography variant="Body" maxLines={3}>
  A long paragraph clamped to three lines…
</Typography>