A minimalist React typography library for high-end digital interfaces.

Custom Motion Configuration

For advanced use cases, you can pass a motionConfig object to define your own CSS keyframe animations, staggered delays, and splitting behavior (per word or character).

Your heading text

keyframe preset

keyframes body

duration (s)

delay (s)

easing

split

staggerDelay (s)

generated code

tsx

<Typography
  variant="H2"
  font="Bricolage Grotesque"
  motionConfig={{
    keyframes: `from { opacity: 0; transform: translateY(24px) skewX(6deg); }
to   { opacity: 1; transform: none; }`,
    duration:     "0.8s",
    easing:       "cubic-bezier(0.16, 1, 0.3, 1)",
    delay:        "0s",
    split:        "words",
    staggerDelay: 0.07,
  }}
>
  Your heading text
</Typography>

Prop Reference

proptypedefaultdescription

propvariant

typeTypographyVariant

default"Body"

desc

Semantic variant — sets tag, font size, weight, and line-height.

propfont

typestring

default—

desc

Google Font name e.g. "Bricolage Grotesque". Auto-injects the <link> tag.

propcolor

typestring

default—

desc

Any CSS color value applied to the text element.

propalign

type"left" | "center" | "right" | "justify"

default—

desc

Text alignment.

propas

typeElementType

default—

desc

Override the rendered HTML tag while keeping variant styles.

proptruncate

typeboolean

defaultfalse

desc

Single-line overflow with ellipsis.

propmaxLines

typenumber

default—

desc

Multi-line line-clamp — clips to N lines with ellipsis.

propanimation

typeHeroAnimation

default—

desc

Built-in entrance animation. Display and H1 only. 43+ presets.

propmotionConfig

typeMotionConfig

default—

desc

Custom CSS keyframe animation with optional word/char splitting. Any variant.

propmotionRef

type(el: HTMLElement | null) => void

default—

desc

Direct DOM ref callback — fires after mount. Use with GSAP, Framer, or Web Animations API.

propitalic

typeboolean

defaultfalse

desc

When true, <em> inside Display / H1 renders in Instrument Serif italic.

propaccentColor

typestring

default"#c8b89a"

desc

Color for <em> italic accent text. Only applies when italic={true}.

propclassName

typestring

default—

desc

Additional CSS class names.

propstyle

typeCSSProperties

default—

desc

Inline styles merged with component defaults.

TypographyProvider

Wrap your app (or a section of it) with TypographyProvider to set defaults once. Any prop passed directly to <Typography> still wins — the provider is just the fallback.

tsx

import { TypographyProvider, Typography } from "inkvelle";

export default function App() {
  return (
    <TypographyProvider
      theme={{
        font:        "Bricolage Grotesque",
        accentColor: "#6366f1",
        italic:      true,
        animation:   "rise",
        color:       "#1a1a1a",
      }}
    >
      {/* Inherits all theme values */}
      <Typography variant="Display">
        Build with <em>intention</em>
      </Typography>

      {/* Overrides just the animation */}
      <Typography variant="H1" animation="clip">
        Another hero heading
      </Typography>

      {/* italic=false wins over theme's italic=true */}
      <Typography variant="Display" italic={false}>
        No serif accent here
      </Typography>
    </TypographyProvider>
  );
}