Tilt Card

3D tilt with glare and parallax. Pro · Effects › Cursor and press feedback

A card that tilts in 3D towards the pointer, with a sheen gliding across its surface, a shadow that deepens as it lifts, and optional parallax layers (TiltCardLayer) that float above it in real depth. The pose chases the pointer on the theme's spring in the kit's shared frame loop — only while something moves — and is written straight to the moving parts as transforms and opacity; nothing re-renders and no style is inherited down the card. On leave it settles back on the same spring. Inactive on touch screens; with reduced motion only the sheen follows the pointer.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add tilt-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TiltCard } from 'valyro-ui-pro';

Props

Prop	Type	Default
`max`	`number`	`10`	Maximum tilt, degrees.
`scale`	`number`	`1.02`	Scale while the pointer is over the card.
`glare`	`boolean`	`true`	A specular sheen that follows the pointer.
`shadow`	`boolean`	`true`	A soft shadow under the card that deepens as it lifts and slides away from the pointer.
`radius`	`number \| string`		Corner radius of the card, so the glare follows its shape. Default: the card radius.
`disabled`	`boolean`	`false`	Turns off the tilt, glare tracking and layer parallax; the card stays flat.

Related components

Cursor Glow — Glow and tilt that follow the cursor
Magnetic — Magnetic pull toward the cursor
Ripple — Material-style press ripple
Confetti — Confetti: a component and fireConfetti()
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states
Floating Tab Bar — Floating glass tab bar
Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail

Previous: Magnetic · Next: Ripple · All Effects