Page Transition
Forty transitions between pages, routes and steps — cube, carousel, circle and more — with light variants for machines without a GPU. Free, MIT · 3D and motion › Motion for any component
Changes between pages — routes, the steps of a flow, the panels of a tab bar — with one of forty presets. The page before stays mounted (inert, hidden from assistive technology) while it leaves, the new one enters over or under it, then the old one unmounts. A change during a change takes over from where the pages are drawn, so fast clicks never jump. Focus inside the old page moves to the new one. Web Animations on transform and opacity (clip-path and filter for the presets that say so), at the theme's tempo; no layout runs while the pages move, and a page that stays put is not animated at all. Nothing plays in a hidden tab or off screen. On machines without GPU compositing each preset plays its one-layer CPU variant. Reduced motion: a short dissolve.
Installation
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';Props
| 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. |
Related components
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
- Parallax Layers — Depth layers that shift with scroll and cursor
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
Previous: Presence · Next: Scene Backdrop · All 3D and motion