Tilt Card

Wraps any content with a 3D perspective tilt that follows the cursor. Uses CSS transforms — no library.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Tilt CardWraps any content with a 3D perspective tilt that follows the cursor. Uses CSS transforms — no library.

"use client";
import { useRef } from "react";
import type { MouseEvent } from "react";

type TiltCardProps = {
  children: React.ReactNode;
  intensity?: number;
};

export function TiltCard({ children, intensity = 8 }: TiltCardProps) {
  const ref = useRef<HTMLDivElement>(null);

  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
    el.style.transform = `perspective(600px) rotateY(${x * intensity}deg) rotateX(${-y * intensity}deg) scale3d(1.02,1.02,1.02)`;
  }

  function handleMouseLeave() {
    if (ref.current) {
      ref.current.style.transform =
        "perspective(600px) rotateY(0deg) rotateX(0deg) scale3d(1,1,1)";
    }
  }

  return (
    <div
      ref={ref}
      style={{ transition: "transform 0.08s ease", transformStyle: "preserve-3d" }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </div>
  );
}

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Content to wrap
intensity	number	8	Tilt rotation in degrees