Scroll Reveal
betaContent that eases into place as it scrolls into view — fading, rising, sliding, scaling or sharpening — with children arriving in turn.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add scroll-revealnpm packages installed: class-variance-authority.
import { ScrollReveal } from "@/components/ui/scroll-reveal";Default
Effects
<ScrollReveal>
| Prop | Type | Default |
|---|---|---|
delayWait before revealing, in milliseconds. Default 0. | number | 0 |
distanceDistance travelled, in pixels, for the moving effects. Default 24. | number | 24 |
durationLength of the reveal, in milliseconds. Default 600. | number | 600 |
effect | "fade" | "up" | "down" | "start" | "end" | "scale" | "blur" | "up" |
onceReveal once and stay; otherwise hide again when scrolled away. Default true. | boolean | true |
onRevealCalled the first time it reveals. | () => void | — |
staggerExtra delay per direct child, in milliseconds, so they arrive in order. Default 0. | number | 0 |
staggered | boolean | — |
thresholdShare of the content that must be visible before it reveals, 0–1. Default 0.15. | number | 0.15 |
Plus every attribute of <div>.
Content is never hidden unless it is certain to be revealed: the server renders it visible, so it reads without JavaScript; only content below the fold is hidden on mount, never what is already on screen; and without an IntersectionObserver or under reduced motion nothing is hidden at all. Hidden content stays in the accessibility tree and the tab order, so a keyboard or screen reader user reaches it as usual — and focusing it scrolls it into view, which reveals it. Scrolling is never taken over.
8/8
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 — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes