Parallax
betaContent that moves at its own rate as the page scrolls — lagging for depth, leading for emphasis — without touching the scroll itself.
- Effects & motion
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add parallaxNo npm packages are needed beyond what Dowel already requires.
import { Parallax } from "@/components/ui/parallax";<Parallax>
| Prop | Type | Default |
|---|---|---|
axisDirection of travel. Default "vertical". | "vertical" | "horizontal" | "vertical" |
layerClassNameClass for the inner, moving box. | string | — |
maxFurthest it moves from its place, in pixels. Default 200. | number | 200 |
speedHow much it lags (positive) or leads (negative) the scroll, as a share of the distance scrolled. 0.2 is gentle; 1 stays fixed to the screen. Default 0.2. | number | 0.2 |
Plus every attribute of <div>.
Decorative movement only: the content keeps its place in the document, its order and its focus, and the page scrolls exactly as it would without it. It writes only a transform, once a frame, and only while near the screen. Under reduced motion it does not move at all. Keep `max` modest so moved content never covers something the reader needs.
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