SPOTLIGHT
Move the cursor across this surface.
INTERACTION_007CSS + JS
Mouse Spotlight Card
A soft radial light follows the cursor across the surface.
Cards / LightView
Back to library
INTERACTION_008
3D Tilt Card.
The card rotates on X and Y within a strict 6 degree envelope, with a light sheen following the same vector. Reserved for featured content.
- CATEGORY
- Cards
- COMPLEXITY
- Intermediate
- TECH
- CSS + JS
- PLATFORM
- Desktop
- PERFORMANCE
- Medium
LIVE PLAYGROUND
TILT / 6°
JavaScript / JS
const MAX = 6;
card.addEventListener("pointermove", (e) => {
const r = card.getBoundingClientRect();
const px = (e.clientX - r.left) / r.width - 0.5;
const py = (e.clientY - r.top) / r.height - 0.5;
card.style.transform =
`perspective(900px) rotateY(${px * MAX * 2}deg) rotateX(${-py * MAX * 2}deg)`;
});
card.addEventListener("pointerleave", () => {
card.style.transform = "perspective(900px) rotateX(0) rotateY(0)";
});IF YOU LIKE THIS, STEAL THESE TOO.
GLASS / SURFACE
Blur 24px · edge light
CARD_01