Primitive · CLI
Word Reveal Scroll
Progress-driven word opacity — scroll scrub, no blur. One pull line.
Preview
npx shadcn@latest add @atroui/word-reveal-scroll
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/word-reveal-scrollSource lands in your repo. Installation · Registry
Usage
Careful delight — one earned pull line (landing close or essay quote), not every paragraph. Opacity only. Pass
preview in docs canvases. For sticky stages, pass targetRef to the tall section. Prefer Line Reveal for time-based enter.tsx
import { WordRevealScroll } from "@/components/ui/word-reveal-scroll"
<WordRevealScroll>
Your next ship starts right now
</WordRevealScroll>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| restingOpacity | number | 0.15 | Opacity before a word’s scroll slice is reached. |
| wordWindow | number | 0.2 | Progress fraction each word fades across. |
| offset | UseScrollOptions['offset'] | ["start 0.85", "start 0.25"] | useScroll offset for in-flow pull lines. |
| targetRef | RefObject<HTMLElement | null> | — | External scroll target (sticky / tall section). |
| as | "p" | "h1" | "h2" | "h3" | "h4" | "span" | "div" | "blockquote" | "p" | Rendered element. |
| preview | boolean | false | Scrub 0→1 on mount (docs canvases). |
Word Reveal Scroll