Words that begin as soft, spread blots of ink, wide-set and out of focus, and dry into crisp, tightly set type one after another.
The import and the props worth knowing about, in one place.
import { Text11 } from "@/components/beste/component/text11";
<Text11 as="h2" text="Slow, on purpose." className="font-serif text-6xl" />
<Text11
as="h1"
text="Come as you are."
trigger="mount"
stagger={0.15} // seconds between words
duration={2} // seconds each word takes to dry
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The text; each word begins as a soft, spread blot of ink and dries into crisp type |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
trigger | "view" | "mount" | — | |
delay | number | — | |
stagger | number | — | |
duration | number | — | |
className | string | — |