Scroll
Parallax
Layers that travel at different speeds as you scroll, for real depth.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Parallax } from '@vizzele/react';
<Parallax speed={0.6} className="far-layer" />
<Parallax speed={0.2}>Mid layer</Parallax>
<Parallax speed={-0.25}>Closer than the page</Parallax>Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 0.3 | 0 = page speed, positive = farther, negative = closer. |
axis | 'x' | 'y' | 'y' | Direction. |
zoom | boolean | false | Scale up with depth. |
container | HTMLElement | Window | window | Scroll root. |
Accessibility
- Only animates while on screen. Off with reduced motion — the layout stays intact.