Lines of text that fold open like paper with a per-line rotateX and perspective when they scroll into view, then pleat into an accordion on hover and unfold again when you leave.
Field notes / No. 12
npx shadcn@latest add https://hyperblur.dev/r/text-fold.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-fold.tsx.
import { TextFold } from "@/components/hyperblur/text-fold"
<TextFold className="text-4xl font-semibold" lines={["Fold the page.", "Keep the crease."]} />| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | ["Fold the page.", "Keep the crease.", "Read between lines."] | One entry per line. Lines never wrap. |
| fold | number | 52 | Fold angle in degrees used for the hover pleats. |
| stagger | number | 140 | Delay between lines when they open, in milliseconds. |
| duration | number | 1000 | Opening time of one line in milliseconds. |
| lineHeight | number | 1.15 | Line height in em. |
| shade | boolean | true | Darken folded lines for a paper shadow. |
| replayEvery | number | 0 | Replay the opening every N milliseconds (minimum 2000). 0 disables the loop. |