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.
The import and the props worth knowing about, in one place.
import { Text19 } from "@/components/beste/component/text19";
<Text19
as="h2"
before="Not"
struck="fixed."
replacement="heard."
struckClassName="text-muted-foreground"
className="font-serif text-6xl"
/>
<Text19 before="Slow" struck="change." replacement="change, on purpose." trigger="mount" delay={0.6} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text19 } from "@/components/beste/component/text19";
<Text19
before="Not"
struck="fixed."
replacement="heard."
as="h2"
className="px-6 text-center font-serif text-2xl font-normal leading-[1.1] tracking-[-0.02em] text-foreground md:text-3xl"
struckClassName="text-muted-foreground"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
before | string | — | Printed before the corrected word |
struck* | string | — | The word that gets struck through |
replacement* | string | — | The word that takes its place |
after | string | — | Printed after the corrected word |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
trigger | "view" | "mount" | — | |
delay | number | — | |
className | string | — | |
struckClassName | string | — | Classes for the struck word, e.g. a muted colour |
An inline phrase whose hairline underline draws itself in from the left when it scrolls into view. Drop it inside a heading or a sentence to mark the words that matter.
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.
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.
An inline phrase that gets a soft highlight swept in behind it from the left when it scrolls into view, like a marker drawn across the words, without the text moving.