Parallax Layers
Depth layers that shift with scroll and cursor. Pro · 3D and motion › Scroll scenes
A scene of stacked layers that move at different speeds as it scrolls past and as the pointer moves over it, so flat pictures, cards and text gain depth — a hero with mountains and a headline, product shots floating over a backdrop. Layers share one grid cell; the scene's scroll progress and the pointer (eased on a spring) are three custom properties, and every layer's translate follows in CSS, so nothing re-renders. Where the browser runs scroll-driven animations it drives the scroll progress itself (a view timeline, no script while scrolling); elsewhere a listener writes it once per frame, and stops off screen and in a hidden tab. Content layers (depth 0) stay interactive. Reduced motion: still.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add parallax-layersnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ParallaxLayers } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
scroll | boolean | true | Layers shift with the scroll while the scene crosses the viewport. |
pointer | boolean | true | Layers shift towards a mouse or pen over the scene. |
strength | number | 40 | How far a layer of depth 1 travels at the extremes, px. |
height | number | string | Height of the scene, px or any CSS length. Default: the tallest layer. |
Related components
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
Previous: Scroll Scene · Next: Orbit Showcase · All 3D and motion