Scroll Cylinder
Headline lines on a rotating cylinder, driven by scroll. Pro · 3D and motion › Scroll scenes
A headline whose lines sit on the surface of a drum that turns as the page scrolls: the front line faces the viewer, its neighbours lean away into perspective and fade. Built on CSS 3D transforms driven by one eased custom property — a scroll-driven animation where the browser has them, else the scroll position read once per frame — so nothing re-renders and native scrolling is never hijacked. Works in the page or any scroll container. Server output shows the first line in front; with reduced motion the lines are a plain, flat stack.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add scroll-cylindernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ScrollCylinder } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
lines * | ReactNode[] | The lines, top to bottom. They stay real text: search engines and screen readers get all of them, in order, from a visually hidden copy — the turning drum, whose side lines fade out, is hidden from assistive technology. | |
mode | 'pass' | 'pin' | 'pass' | pass — the drum turns while the block crosses the viewport; pin — the block sticks in the middle of the viewport and turns line by line while the page scrolls on (the root grows by pace px per line). |
step | number | 20 | Angle between neighbouring lines on the drum, degrees: smaller is a wider, flatter drum. |
rows | number | 5 | How many lines the window shows around the front one. |
perspective | number | 900 | Perspective of the scene, px: smaller is more dramatic. |
pace | number | 160 | pin: scroll distance per line, px. |
range | [number, number] | [0.2, 0.8] | pass: the part of the crossing over which the drum turns from the first line to the last, where 0 is the block entering at the bottom and 1 is the block leaving at the top. |
smoothing | number | 0.12 | How long the drum takes to catch up with the scroll position, seconds; 0 follows it exactly. |
accent | boolean | true | Tints the line that faces the viewer with the theme's accent colour. |
onActiveChange | (index: number) => void | Called when another line comes to face the viewer. |
Related components
- 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
- 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: Scene Backdrop · Next: Stacking Panels · All 3D and motion