Loading…
Live component · try it
Premiumcard · hover · dark
3D Tilt Card
A card that tilts toward the pointer in 3D, with its image and text sitting at different depths so they shift against each other, and a soft glare that slides across the surface opposite the tilt. Leaving eases everything back to flat.
Placeholder photos by Jan Kronies on Unsplash. Replace them with your own before launch.
The mechanic
`rx = (0.5 − y) × 16°`, `ry = (x − 0.5) × 16°` from the pointer's normalised position; written as `--rx/--ry` and applied with `perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))`. Image at `translateZ(30px)`, title at `translateZ(50px)`. The glare's centre is at `(x, y)` with an accent-tinted white at 35 % fading to nothing by 55 %. Entering removes the transition, leaving restores a 0.5 s ease-out so the return is smooth.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
