Tilt Card

Cards 100

About

Interactive 3D tilt card with perspective hover effect and spotlight.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tilt Card to your project and fits it to your theme.

Code

How Tilt Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TiltCard } from "@/components/ui/tilt-card";

function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <TiltCard
        effect="gravitate"
        tiltLimit={18}
        className="w-[360px] rounded-[2rem] border bg-gradient-to-br from-slate-900 via-slate-800 to-slate-950 p-8 text-white shadow-2xl"
      >
        <div className="relative z-20">
          <p className="text-sm text-white/60">Effect</p>
          <h3 className="mt-2 text-4xl font-semibold tracking-tight">Gravitate</h3>
          <div className="mt-20 grid grid-cols-3 gap-3">
            <div className="h-20 rounded-2xl bg-white/10" />
            <div className="h-20 rounded-2xl bg-white/15" />
            <div className="h-20 rounded-2xl bg-white/10" />
          </div>
        </div>
      </TiltCard>
    </div>
  );
}


export default { Demo };