Stacking Panels
Panels stick on scroll and pile into a stack. Pro · 3D and motion › Scroll scenes
Panels that pin one after another as the page scrolls and pile up into a stack: each new panel slides over the previous one, which shrinks, tips back and dims under it. Pinning is native position: sticky; the depth of every panel follows the scroll position as a custom property — scroll-driven animations where the browser has them, else computed once per frame — so the stack keeps in step with the scroll and nothing re-renders. Every child is one panel. With reduced motion the panels still pin, but stay flat.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add stacking-panelsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { StackingPanels } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
offset | number | 24 | Distance from the top of the scroll area at which the first panel pins, px. |
peek | number | 16 | How much lower each next panel pins, so the edges of the ones underneath peek out, px. |
gap | number | 32 | Space between the panels before they stack, px. |
shrink | number | 0.05 | How much a panel shrinks for each panel lying on it: 0.05 is 5%. |
dim | number | 0.16 | How much a panel darkens for each panel lying on it, 0–1. |
tilt | number | 3 | How far a panel tips back for each panel lying on it, degrees. |
Related components
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- 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
- Parallax Layers — Depth layers that shift with scroll and cursor
- 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 Cylinder · Next: Helix Rail · All 3D and motion