Helix Rail
Cards on a helix that spins with scroll. Pro · 3D and motion › Scroll scenes
Items on a helix that winds past the viewer as the page scrolls: the front item faces you, the next ones wait below and around the bend, the previous ones climb away above. One eased custom property drives every item's transform in CSS — from a scroll-driven animation where the browser has them, else written once per frame; nothing re-renders, and native scrolling stays untouched. Keyboard focus on an item scrolls the page until it is in front. Every child is one item. With reduced motion the items are a plain list.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add helix-railnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { HelixRail } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
mode | 'pass' | 'pin' | 'pin' | pin — the scene sticks mid-viewport and the helix turns item by item while the page scrolls on (the root grows by pace px per item); pass — it turns while the block crosses the viewport. |
step | number | 32 | Angle between neighbouring items around the axis, degrees. |
rise | number | 84 | How much lower each next item sits on the helix, px. |
radius | number | Distance from the axis to an item, px. Default: just enough for neighbouring items not to cut into each other. | |
itemWidth | number | 240 | Width of an item, px. |
height | number | 520 | Height of the scene, px. |
pace | number | 200 | pin: scroll distance per item, px. |
range | [number, number] | [0.15, 0.85] | pass: the part of the crossing (0 — entering at the bottom, 1 — leaving at the top) over which the helix turns from the first item to the last. |
smoothing | number | 0.14 | How long the helix takes to catch up with the scroll position, seconds; 0 follows it exactly. |
perspective | number | 1300 | Perspective of the scene, px: smaller is more dramatic. |
onActiveChange | (index: number) => void | Called when another item comes to the front. |
Related components
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- 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: Stacking Panels · Next: Scroll Scene · All 3D and motion