#347
Tilt card
A stat card that leans up to 10 degrees toward the pointer in 3D and settles flat on leave, driven by a Spring.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Tilt card" pattern (@codeatlasdev/ui demo #347, motion/micro) in my app.
Call get_demo({ ids: ["#347"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Feature cards, pricing tiers or stat tiles on desktop where hover should add depth.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `loop={2800}`
- `const MAX = 10;` degrees of rotation at the card edge
- `new Spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.6 })` drives `rotateX` and `rotateY`
- `transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0))` inside `perspective: 700px`
- `@media (pointer: coarse)` sets `transform: none`: no tilt on touch
- Under reduced motion `--rx` and `--ry` stay at 0
Exact motion (do not approximate):
- transform: rotateX, rotateY: spring, spring, spring stiffness: 0.1, damping: 0.6
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `loop={2800}`
- `const MAX = 10;` degrees of rotation at the card edge
- `new Spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.6 })` drives `rotateX` and `rotateY`
- `transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0))` inside `perspective: 700px`
- `@media (pointer: coarse)` sets `transform: none`: no tilt on touch
- Under reduced motion `--rx` and `--ry` stay at 0
Related
Loading source.