Tilt Card

Cards 878

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 className="w-[340px] rounded-3xl border bg-card p-7 shadow-2xl">
        <div className="relative z-20">
          <div className="mb-16 flex items-center justify-between">
            <span className="rounded-full bg-foreground px-3 py-1 text-xs font-medium text-background">
              Interactive
            </span>
            <span className="text-sm text-muted-foreground">3D hover</span>
          </div>
          <h3 className="text-3xl font-semibold tracking-tight">Tilt Card</h3>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">
            Move the cursor across the card to bend perspective and reveal the
            spotlight.
          </p>
        </div>
      </TiltCard>
    </div>
  );
}


export default { Demo };