Heavy type whose letters drop in one by one, then spring away from the cursor with a slight lean and stretch before settling back. Push, reach, lean, stretch and springiness are props. Resting positions are measured once, so a move reads a single box, not one per letter.
The import and the props worth knowing about, in one place.
import { Text20 } from "@/components/beste/component/text20";
<Text20
as="h1" // "h1" | "h2" | "h3" | "p" | "span"
text="Loud type, strict grid."
className="text-8xl font-semibold tracking-[-0.06em]"
/>
<Text20
text="Keep your distance."
force={0.8} // how far letters are pushed, 0 to 1
reach={320} // radius around the cursor, in pixels
tilt={0.3} // lean, 0 to 1
stretch={0.7} // upward stretch, 0 to 1
bounce={0.8} // lively wobble on the way back
entrance={false} // skip the drop-in
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The text to set; each letter becomes its own spring |
as | "h1" | "h2" | "h3" | "p" | "span" | — | Element the text renders as |
force | number | — | How far letters are pushed from the cursor, 0 to 1 |
reach | number | — | Radius around the cursor that moves letters, in pixels |
tilt | number | — | How much a pushed letter leans away, 0 to 1 |
stretch | number | — | How much a pushed letter stretches upward, 0 to 1 |
bounce | number | — | Springiness of the return, 0 (settled) to 1 (lively wobble) |
entrance | boolean | — | Letters drop in one by one on mount |
delay | number | — | Seconds before the first letter drops in |
stagger | number | — | Seconds between letters as they drop in |
className | string | — |