Shape Morph
Форма перетекает в другую: круг, капля, звезда, цветок — на пружине. Pro · 3D и моушн › 3D-кнопки, формы и текст
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add shape-morphnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ShapeMorph } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
shapes | MorphShapeName[] | ['blob', 'circle', 'flower', 'star'] | The outlines it morphs between, in order. |
index | number | Index of the shape shown (controlled). | |
defaultIndex | number | 0 | Index of the shape shown at first (uncontrolled). |
onIndexChange | (index: number) => void | Called when the shape changes: autoplay, a click with cycleOnClick, or index. | |
interval | number | 0 | Turns to the next shape every so many ms (0 — never). Pauses on hover, focus, off screen and with paused. |
paused | boolean | false | Holds the autoplay (moving content must be pausable, WCAG 2.2.2). |
spring | SpringName | The spring of the morph. bouncy wobbles like jelly. Default: the theme's --ui-motion-spring. | |
duration | number | Length of a morph, ms. Default: the spring's own settle time at the theme's tempo. | |
fill | 'gradient' | string | 'gradient' | Fill: gradient uses two of the theme's chart colours, or any CSS colour. |
size | number | 220 | Size of the shape, px. |
children | ReactNode | Content in the middle of the shape: an icon, a number, a short word. |
Похожие компоненты
- Button 3D — Объёмная кнопка-клавиша: утапливается при нажатии и отпружинивает
- Switch 3D — Переключатель-кубик: перекатывается между «выкл» и светящимся «вкл»
- Path Text — Текст по кругу, дуге или волне: вращается со временем или прокруткой
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
Назад: Switch 3D · Далее: Path Text · Весь раздел «3D и моушн»