Browse components
Fold Text
Lines or letters swing open like creased paper in 3D, with a soft shadow lifting as each piece unfolds.
Installation
npx shadcn@latest add @glint-ui/fold-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/fold-text.json
Usage
import { FoldText } from "@/components/ui/fold-text";
<FoldText lines={["Unfold", "the next", "big idea"]} trigger="hover" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | ["Unfold","the next","big idea"] | One entry per line. |
| splitBy | "letters" | "lines" | "letters" | Unfold each letter or whole lines. |
| trigger | "view" | "hover" | "loop" | "view" | Unfold once on view, refold and unfold on hover, or keep looping. |
| hinge | "top" | "bottom" | "top" | Edge the paper hinges on. |
| stagger | number | 45 | Delay between pieces, in ms. |
| duration | number | 1000 | Duration of each piece, in ms. |
| className | string | — | Extra classes for the root element. |