The fog lifts a little later each morning.
Text hidden behind fog that clears across it from left to right along one soft edge, so the words emerge in reading order without moving at all.
The import and the props worth knowing about, in one place.
import { Text13 } from "@/components/beste/component/text13";
<Text13 as="h2" text="The fog lifts a little later each morning." className="font-serif text-5xl" />
<Text13
as="p"
text="Come as you are, stay as long as it takes."
softness={50} // width of the soft edge, percent
duration={3}
trigger="mount"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The text; a soft edge of fog clears across it from left to right |
as | "h1" | "h2" | "h3" | "p" | "blockquote" | — | |
trigger | "view" | "mount" | — | |
delay | number | — | |
duration | number | — | |
softness | number | — | Width of the soft edge, in percent of the element (default 35) |
className | string | — |