Orbit Showcase

3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура. Pro · 3D и моушн › 3D-объекты и витрины

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add orbit-showcase

npm install valyro-ui-pro

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

Пропсы

Prop	Type	Default
`children`	`ReactNode`		The items on the ring, one per child: product cards, images — anything of the same width.
`index`	`number`		Index of the item facing the viewer (controlled).
`defaultIndex`	`number`	`0`	Index of the item facing the viewer at first (uncontrolled).
`onIndexChange`	`(index: number) => void`		Called when another item is brought to the front: by a drag, the arrows, the keyboard or a click.
`itemWidth`	`number`	`260`	Width of an item, px. On a narrow screen items shrink to fit (never below 160 px).
`gap`	`number`	`28`	Space between neighbouring items around the ring, px.
`tilt`	`number`	`6`	How far the ring tips towards the viewer, degrees: the far side rises above the front.
`perspective`	`number`	`1400`	Perspective of the scene, px: smaller is more dramatic.
`autoplay`	`number`	`0`	Turns to the next item every so many ms (0 — never). Pauses on hover, focus, drag and off screen.
`paused`	`boolean`	`false`	Holds the autoplay, e.g. from a pause button of the page (moving content must be pausable, WCAG 2.2.2).
`controls`	`boolean`	`true`	Shows the previous / next buttons.
`labels`	`Partial<OrbitShowcaseLabels>`		Text for assistive technology and the buttons.

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

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

Назад: Parallax Layers · Далее: Coverflow Carousel · Весь раздел «3D и моушн»