3D Tilt Card That Follows Your Cursor in React (R3F)

The 3D card that leans toward your cursor on polished portfolios and landing pages looks like it needs a physics engine and a wall of pointer-event math. In React it does not. With React Three Fiber, the React renderer for Three.js, and its helper pack drei, the whole interaction is a single component, and the card is about ninety lines of TypeScript. Source code: https://github.com/GoCelesteAI/tilt-card-r3f In this build we make a floating profile card: a rounded slab with a header band, an avatar, two lines of text, and a small 3D icon hovering below. It is lit, casts a soft shadow, tilts toward the pointer, and springs back to center when you let go. No event listeners, no tilt math. What You'll Build (scaffolded with the CLI, in TypeScript): - A React + TypeScript project with three, react-three-fiber, and drei installed. - A Canvas that builds the renderer, scene, and camera for you in one tag. - A card built from drei RoundedBox panels wrapped in a group. - A small icon spun every frame with the useFrame hook. - Float for a gentle idle drift, and PresentationControls for the spring-damped tilt. - Lights, a ground plane, and a soft shadow. Timestamps: 0:00 - Intro - the card that follows your cursor 0:26 - See it tilt (drag and release) 0:46 - The plan - four beats 1:08 - Scaffold React + TypeScript 1:23 - Install fiber and drei 2:01 - The file structure 2:12 - index.html 2:32 - main.tsx - the imports 2:54 - The Card component 3:06 - The icon spin with useFrame 3:18 - Build the panels 4:16 - The Canvas and lights 4:42 - PresentationControls and Float 5:29 - Run it 5:36 - Payoff 5:56 - Recap Key Takeaways: 1. PresentationControls is the entire interaction. One component from drei turns pointer movement into a spring-damped 3D tilt, with no event handlers and no math, just polar and azimuth limits and a spring config. 2. drei gives you production-ready primitives. RoundedBox and Float mean rounded corners and idle motion for free, so you build the look instead of the geometry. 3. useFrame is the animation loop. Its callback runs every frame and its delta argument is the seconds since the last frame, so spinning by delta keeps the motion smooth and frame-rate independent. 4. The Canvas component is the whole engine. That one tag builds the WebGL renderer, the scene, and the camera, so you only describe the scene graph as JSX. 5. Real shadows need three things: the shadows prop on the Canvas, castShadow on the light and the card, and receiveShadow on the ground. Miss one and nothing appears. 📺 Full source on GitHub: https://github.com/GoCelesteAI/tilt-card-r3f This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #reactthreefiber #r3f #threejs #react #typescript #webgl #3d #webdev #frontend #drei --- Generated by Claude AI · part of the Build It in the Browser series