Tilt
Tilt, lift, glare and magnetic pull under the cursor for any card. Pro · 3D and motion › Motion for any component
Gives any card depth under the pointer: it tilts towards a mouse or pen, lifts a little, optionally catches a highlight and leans towards the pointer, then settles back on the theme's spring. Only the element's transform and translate change, written per frame by a shared loop that sleeps while nothing moves; links and buttons inside keep working, focus rings stay put. Off on touch screens and with reduced motion.
Installation
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';Props
| 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. |
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
- 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
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
Previous: Stagger · Next: Layout Group · All 3D and motion