Word Prism
Слово на гранях призмы: поворачивается к следующему. Pro · 3D и моушн › 3D-объекты и витрины
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add word-prismnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { WordPrism } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
words * | string[] | The words on the faces of the prism, in the order they come up. | |
index | number | Index of the word facing the viewer (controlled). | |
defaultIndex | number | 0 | Index of the word facing the viewer at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when the prism turns to another word — by itself every interval ms, or from outside. | |
interval | number | 2400 | Turns to the next word every so many ms; 0 stops it (the word then changes only with index). Pauses on hover. |
paused | boolean | false | Holds the current word, e.g. from a pause button of the page (moving text must be pausable, WCAG 2.2.2). |
axis | 'x' | 'y' | 'x' | x — the prism rolls upwards, like a split-flap; y — it spins sideways. |
duration | number | 700 | Length of one turn, ms. |
accent | boolean | true | Paints the words with the theme's accent colour. |
Похожие компоненты
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
- Flip Card — Карточка с двумя сторонами, переворачивается в 3D
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
Назад: Flip Card · Далее: Button 3D · Весь раздел «3D и моушн»