A short word whose letters begin scattered and slightly turned, then drift home on a soft spring one after another, like type settling onto a page.
The import and the props worth knowing about, in one place.
import { Text14 } from "@/components/beste/component/text14";
<Text14 as="h1" text="settle" className="font-serif text-9xl" />
<Text14
text="Altair"
spread={1.4} // how far the letters start from home, in em
stagger={0.08}
trigger="mount"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text14 } from "@/components/beste/component/text14";
<Text14
text="settle"
as="h2"
className="px-6 font-serif text-5xl font-normal leading-none tracking-[-0.03em] text-foreground md:text-6xl"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | Short text; its letters start scattered and drift home one by one |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
trigger | "view" | "mount" | — | |
delay | number | — | |
stagger | number | — | |
spread | number | — | How far the letters start from home, in em (default 0.9) |
className | string | — |
A sentence that corrects itself: a line is drawn through the old word from left to right, and the better word settles in beside it out of a soft blur.
Large serif letters filled with a photograph that drifts slowly inside them as the page scrolls, the picture showing through the type.
Short text whose characters arrive one by one out of a light blur, for eyebrows, labels and single words. The element keeps the whole string as its accessible name.
A word whose letters rise and fall on one slow, continuous swell, each a beat behind the last, like a line of type resting on water. Stays still when reduced motion is preferred.