Paper Fold Heading React component
A heading folded like a concertina of paper. It opens as it comes into view, and folds back up while the pointer is over it.
About the Paper Fold Heading component
Paper Fold Heading treats a headline like a strip of folded paper. It starts as a tight concertina and opens out as it comes into view, with each strip catching the light a little differently.
Point at it and it folds back up, then opens again when you leave. An invisible copy holds its height, so the page around it never moves.
When to use it
Use it for editorial, print and stationery brands, or as a feature title on a long page.
It suits one or two lines at a large size. Thin strips of small text get hard to read.
Installation
Add the Paper Fold Heading component to your project with the shadcn CLI. It lands in components/paper-fold-heading.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/paper-fold-headingProps
<PaperFoldHeading /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| text | string | "Unfolds like paper" |
| as | "h1" | "h2" | "h3" | "p" | "h2" |
| folds Strips the heading is folded into. | number | 4 |
| angle Fold angle when closed, in degrees. | number | 68 |
| foldOnHover Fold it up while the pointer is over it. | boolean | true |
- textstringDefault: "Unfolds like paper"
- as"h1" | "h2" | "h3" | "p"Default: "h2"
- folds
Strips the heading is folded into.
numberDefault: 4 - angle
Fold angle when closed, in degrees.
numberDefault: 68 - foldOnHover
Fold it up while the pointer is over it.
booleanDefault: true
Paper Fold Heading FAQ
- How many folds should I use?
- Three to six. folds sets the number of strips.
- Can I stop it folding on hover?
- Yes, with foldOnHover={false}.
- Does the layout move?
- No. The heading keeps its full height while it folds.
- What about reduced motion?
- It stays open and flat.
