A card that tilts in 3D with glare and hue shift following the cursor.
A card that tilts toward the cursor in 3D, with a glare highlight and holographic hue shift layered on top. The cursor position is normalized to a 0-1 range, then mapped to rotation angles via useTransform and smoothed with springs.
Normalize the cursor position to a 0-1 range across the element's dimensions with (e.clientX - rect.left) / rect.width. This makes the effect scale-independent. Then use useTransform to map that 0-1 value to rotation angles, wrapped in a spring for weight.
A perspective: 800px container and transformStyle: preserve-3d on the card are what make the tilt visible in 3D. The text layer sits on a translateZ(40px) plane, so it lifts off the card surface as it tilts.
The inversion, py maps to rotateX and px to rotateY, is intentional. Moving the cursor up tilts the top of the card toward you, which is the natural physical response.
Loading...
Two effects layered on top of the tilt, both derived from the same normalized motion values. The glare is a radial-gradient positioned at the cursor's coordinates, composited with mix-blend-overlay. The hue shift is a hue-rotate that varies from negative to positive across the card width, creating the holographic foil look.
useMotionTemplate is the correct way to inject motion values into CSS strings. Plain template literals resolve the motion value once and never update; useMotionTemplate recomputes the string on every frame.
Loading...
Tilt range, glare intensity, hue shift amount, and spring physics are all tunable.
Loading...