Helix Rail

Карточки на спирали, которая вращается от прокрутки. Pro · 3D и моушн › Сцены на прокрутке

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add helix-rail

npm install valyro-ui-pro

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

Пропсы

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.

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

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

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