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.
The import and the props worth knowing about, in one place.
import { Text12 } from "@/components/beste/component/text12";
<Text12 as="h1" text="Altair" className="font-serif text-9xl" />
<Text12
text="breathe"
amplitude={0.12} // wave height in em
period={6} // seconds per swell
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text12 } from "@/components/beste/component/text12";
<Text12
text="Altair"
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 | — | A short word or wordmark; its letters rise and fall on a slow, continuous wave |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
amplitude | number | — | Height of the wave in em (default 0.08) |
period | number | — | Seconds for one full swell (default 4) |
className | string | — |
A sentence whose one word takes turns: each candidate blurs up into place as the last blurs out, on a timer that stops when reduced motion is preferred.
Text typed out one character at a time behind a thin caret that keeps a slow pulse once the line is finished. The element keeps the whole string as its accessible name.
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.
A line of text set around a circle that turns slowly, with room in the middle for an initial, an icon or a short word. A seal for corners, footers and hero edges.