Scroll Reveal Text
betaA paragraph whose words brighten from dim to full as it scrolls through the viewport.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add scroll-reveal-textnpm packages installed: class-variance-authority.
import { ScrollRevealText } from "@/components/ui/scroll-reveal-text";<ScrollRevealText>
| Prop | Type | Default |
|---|---|---|
children (required)The paragraph. Split into words on whitespace. | string | — |
asThe element to render. | ScrollRevealTextElement | "p" |
dimOpacityOpacity of a word before it is revealed, from 0 to 1. | number | 0.1 |
ref | Ref<HTMLElement> | — |
size | "sm" | "md" | "lg" | "xl" | "md" |
Plus every attribute of <p> except ref, children.
The words are aria-hidden and the paragraph is read once from an sr-only copy. Driven by CSS scroll-driven animation where supported, with a frame-throttled scroll fallback; without either, and under reduced motion, every word is fully legible. Dimmed words are below contrast by design until revealed, so keep essential content out of it.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes