Parallax Grid
Gallery columns drifting at different rates for depth.
- 0.8 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/parallax-grid.jsonAdds components/velora/parallax-grid.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
children*Each child becomes one tile; columns drift at different speeds | React.ReactNode[] | — |
depthMaximum vertical drift in px | number | 90 |
className | string | — |
Accessibility
- Reduced motion
- A CSS override pins every tile in its grid cell, so the columns do not drift.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Plain divs, one wrapper per child, with no list or grid semantics beyond what the children provide.