React Business Card

An interactive 3D business card made with React. Tilt with your mouse, or on mobile, with your device.

react.jscss3dinteractive

About this sketch

An interactive business card built entirely with React and CSS 3D transforms — no Three.js, no WebGL. The card responds to mouse position on desktop and device orientation on mobile, giving it a physical tilt that follows your movement.

The 3D effect is achieved with perspective and rotateX/rotateY transforms applied in response to normalized cursor coordinates. A subtle specular highlight layer shifts independently of the card rotation, simulating the way light catches a glossy surface differently than the matte geometry beneath it.

Technical notes

  • CSS perspective on the wrapper establishes the vanishing point; the card itself uses transform-style: preserve-3d so front and back are genuinely layered in 3D space
  • Device orientation on mobile is read via the DeviceOrientationEvent API, with a permission prompt on iOS 13+
  • Spring physics smooth out the rotation so rapid mouse movements don't feel mechanical — the card lags slightly behind the cursor in a way that feels weighted
  • Flip animation on click uses a rotateY(180deg) transition; the back face is hidden with backface-visibility: hidden until the card turns past 90°