Scroll Cylinder

Строки заголовка на вращающемся цилиндре — поворот от прокрутки. Pro · 3D и моушн › Сцены на прокрутке

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add scroll-cylinder

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ScrollCylinder } from 'valyro-ui-pro';

Пропсы

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.

Похожие компоненты

Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
Helix Rail — Карточки на спирали, которая вращается от прокрутки
Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
Presence — Появление и уход: элемент живёт, пока проигрывается выход
Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура

Назад: Scene Backdrop · Далее: Stacking Panels · Весь раздел «3D и моушн»