Tilt Card
betaA card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.
- Display
- 1 file
- No extra npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add tilt-cardNo npm packages are needed beyond what Dowel already requires.
import { TiltCard } from "@/components/ui/tilt-card";Default
Gallery
Parallax Layers
As Link
Without Glare
Subtle
<TiltCard>
| Prop | Type | Default |
|---|---|---|
disabledKeeps the card flat, as if the pointer were elsewhere. | boolean | false |
glareA soft highlight that follows the pointer across the surface. | boolean | true |
maxTiltThe largest tilt, in degrees, reached with the pointer at an edge. 0 keeps the card flat. | number | 10 |
perspectiveDistance, in pixels, of the viewer from the card. Smaller is more dramatic. | number | 800 |
scaleHow much the card grows while tilting. 1 keeps its size. | number | 1.02 |
Plus every attribute of <div>.
<TiltCardLayer>
| Prop | Type | Default |
|---|---|---|
depthHow far, in pixels, the layer drifts toward the pointer at full tilt — on top of the card's own lean. Larger reads as nearer the viewer; a negative depth sinks the layer behind the surface. | number | 12 |
Plus every attribute of <div>.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes