Page Transition
Сорок переходов между страницами, маршрутами и шагами — куб, карусель, круг и другие — с лёгкими вариантами для машин без GPU. Бесплатно, MIT · 3D и моушн › Моушн для любых компонентов
Установка
npx valyro-cli@latest add page-transitionnpx shadcn@latest add https://valyro.xyz/r/page-transition.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { PageTransition } from 'valyro-ui';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
pageKey * | Key | Identity of the page shown: a route path, a step id. When it changes, the page before leaves and the new one enters. | |
preset | PageTransitionPreset | 'fade' | How the pages change. |
direction | 'forward' | 'back' | 'forward' | forward — deeper in (a link, the next step); back — the way back. Sideways presets mirror, stacked ones pop. |
duration | number | Length of a change, ms. Default: the preset's own, at the theme's tempo (--ui-duration). | |
origin | { x: number; y: number } | Where circle grows from, in viewport px — usually the click: { x: event.clientX, y: event.clientY }. Default: the middle of what is visible. | |
tier | PageTransitionTierSetting | 'auto' | gpu — the full preset; cpu — its one-layer variant for machines that composite on the processor (virtual machines, remote desktops, servers, software WebGL); auto — cpu on such machines and on devices with two cores or 2 GB of memory or less, gpu elsewhere. |
onTransitionComplete | () => void | Called when a change has finished and the old page is gone. |
Похожие компоненты
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
Назад: Presence · Далее: Scene Backdrop · Весь раздел «3D и моушн»