Tilt
Наклон, подъём, блик и притяжение под курсором для любой карточки. Pro · 3D и моушн › Моушн для любых компонентов
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add tiltnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Tilt } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
asChild | boolean | false | Tilts the only child (a Card, an ArticleCard, a product tile) instead of wrapping it in a div. |
glare | boolean | false | A soft highlight that follows the pointer over the surface (drawn with ::after). |
magnetic | number | 0 | Also pulls the element towards the pointer, 0–1 (0 — no pull). |
max | number | Tilt at the element's edge, degrees. Default: the theme's --ui-motion-tilt. | |
scale | number | Scale while the pointer is over the element. Default: the theme's --ui-motion-lift. | |
perspective | number | Perspective of the tilt, px: smaller is more dramatic. Default: the theme's --ui-motion-perspective. | |
axis | 'both' | 'x' | 'y' | Which way it tilts: towards the pointer on both axes, or only around one. | |
spring | SpringName | The spring that chases the pointer. Default: the theme's --ui-motion-spring. | |
disabled | boolean | Off: the element stays flat. |
Похожие компоненты
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
Назад: Stagger · Далее: Layout Group · Весь раздел «3D и моушн»