Word Reveal
A paragraph that reveals word-by-word as it scrolls through the viewport — ink rising to full strength, scrubbed directly to scroll position.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/word-reveal.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/word-reveal.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The paragraph to reveal. Wrap a word in asterisks (*word*) for the accent style. |
| as | "p" | "h1" | "h2" | "h3" | "h4" | "p" | Element type used for the wrapper. |
| fromOpacity | number | 0.13 | Opacity of words before they're revealed. |
| offset | [string, string] | ["start 0.8", "start 0.3"] | Viewport offset pair passed to useScroll — where the reveal starts and ends. |
| overlap | number | 3 | How many words overlap in the reveal window — higher is a softer wave. |
| accentClassName | string | — | Class applied to *accented* words. Defaults to serif italic. |
| className | string | — | Additional CSS classes for the wrapper. |