Anatomy

The outer section sets a CSS perspective of 1200px on the viewport, giving the 3D scene its depth. Inside sits a centered container, and inside that a single motion.div (the card) with transformStyle:'preserve-3d', this is where rotateX and rotateY are applied. The card contains three visual layers stacked via z-index: a glass background panel (border + background-alt fill), a blurred accent glow radial gradient at the top, and the actual content (optional badge, h1 with an italic accent word, description, and a pill CTA button). All colors reference CSS custom property tokens so the card adapts to any theme preset.

How it works

The technique relies on three Framer Motion hooks chained together. useMotionValue holds mouseX and mouseY as normalized floats in the range [-0.5, 0.5], derived from the cursor's position relative to the card's bounding box. useTransform converts each value to degrees: mouseY maps to rotateX (front tilts up when cursor is near the top) and mouseX maps to rotateY (left edge lifts when cursor moves right). Both derived values then pass through useSpring with stiffness 200 and damping 30, adding inertia so the card settles rather than snapping. On mouseleave, both motion values reset to 0, and the spring smoothly returns the card to its resting flat position.

How to build it in React

1. Set the perspective on the parent

   CSS perspective must live on a parent element, not on the element that rotates. Add perspective:'1200px' as an inline style to the outer section. A value between 800px and 1500px gives a convincing depth without over-distorting the card at maximum tilt.

   <section style={{ perspective: "1200px" }}>
     <motion.div style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}>
       {/* card content */}
     </motion.div>
   </section>

2. Track the pointer as normalized coordinates

   On each mousemove event, read getBoundingClientRect from the card ref, then divide the cursor offset by the card width and height. Subtracting 0.5 centers the range at zero, so the card sits flat when the cursor is in the middle and tilts at the edges.

   function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
     const rect = cardRef.current?.getBoundingClientRect();
     if (!rect) return;
     const x = (e.clientX - rect.left) / rect.width - 0.5;
     const y = (e.clientY - rect.top) / rect.height - 0.5;
     mouseX.set(x);
     mouseY.set(y);
   }

3. Map coordinates to spring-damped rotation

   Pass mouseX and mouseY through useTransform to scale them to a degree range, then wrap each result in useSpring. The stiffness controls how quickly the card chases the pointer; damping controls how much it overshoots before settling. A stiffness of 200 with damping 30 feels responsive without being jittery.

   const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [8, -8]), {
     stiffness: 200,
     damping: 30,
   });
   const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-8, 8]), {
     stiffness: 200,
     damping: 30,
   });

4. Reset on mouse leave

   Set both mouseX and mouseY back to 0 in the onMouseLeave handler. Because the derived rotateX/rotateY values are wrapped in springs, the card eases back to flat automatically, no manual animation call needed.

   function handleMouseLeave() {
     mouseX.set(0);
     mouseY.set(0);
   }

When to use it

Reach for this component when you need a hero that communicates craft and interactivity within the first three seconds, SaaS product launches, agency portfolios, and design tool landing pages are the natural fit. The single-card layout keeps focus tight, so it works best when the value proposition fits in one headline and one short paragraph. Skip it on e-commerce product pages where the hero competes with a product image, on forms-first pages like sign-up flows, and on any page where the primary audience is mobile-only users: the tilt never fires without a mouse, so you would be shipping complexity for no effect.

Used by

• Stripe, Uses subtle 3D card tilt on product feature cards to give depth to its marketing site.
• Linear, Applies perspective-tilted UI mockups in hero sections to make product screenshots feel three-dimensional.
• Vercel, Employs 3D depth and spring-based hover responses on feature showcase cards throughout its homepage.
• Framer, Showcases 3D tilt interactions directly in its own marketing as a live demo of what the tool enables.

FAQ