"use client";

import * as React from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";

import { cn } from "@/lib/utils";

type TiltCardProps = React.HTMLAttributes<HTMLDivElement> & {
  title: string;
  description: string;
  eyebrow?: string;
  icon?: React.ReactNode;
  maxTilt?: number;
};

export function TiltCard({
  title,
  description,
  eyebrow,
  icon,
  maxTilt = 12,
  className,
  ...props
}: TiltCardProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  const rotateX = useMotionValue(0);
  const rotateY = useMotionValue(0);

  const springConfig = { stiffness: 200, damping: 18 };
  const springX = useSpring(rotateX, springConfig);
  const springY = useSpring(rotateY, springConfig);

  const handleMouseMove = React.useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const percentX = (event.clientX - rect.left) / rect.width;
      const percentY = (event.clientY - rect.top) / rect.height;

      rotateY.set((percentX - 0.5) * (maxTilt * 2));
      rotateX.set((0.5 - percentY) * (maxTilt * 2));
    },
    [maxTilt, rotateX, rotateY]
  );

  const handleMouseLeave = React.useCallback(() => {
    rotateX.set(0);
    rotateY.set(0);
  }, [rotateX, rotateY]);

  return (
    <div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className={cn("[perspective:1200px]", className)}
      {...props}
    >
      <motion.div
        style={{ rotateX: springX, rotateY: springY }}
        className="relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-lg transition-shadow hover:shadow-xl [transform-style:preserve-3d]"
      >
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-16 top-6 h-32 w-32 rounded-full bg-primary/10 blur-3xl" />
          <div className="absolute bottom-0 right-0 h-28 w-28 rounded-full bg-secondary/10 blur-3xl" />
        </div>
        <div className="relative space-y-3" style={{ transform: "translateZ(40px)" }}>
          {eyebrow ? (
            <span className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
              {eyebrow}
            </span>
          ) : null}
          <div className="flex items-center gap-3">
            {icon ? (
              <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-background/60 text-foreground">
                {icon}
              </div>
            ) : null}
            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          </div>
          <p className="text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>
      </motion.div>
    </div>
  );
}
Tilt Card

Tilt Card

Dependencies

Files

Installation
