Tilt Card

Cards 122

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="evade"
        scale={1.08}
        tiltLimit={20}
        className="w-[360px] rounded-[2rem] border bg-card p-8 shadow-2xl"
      >
        <div className="relative z-20">
          <p className="text-sm text-muted-foreground">Effect</p>
          <h3 className="mt-2 text-4xl font-semibold tracking-tight">Evade</h3>
          <p className="mt-4 text-sm leading-6 text-muted-foreground">
            The card tilts away from the pointer while keeping a soft spotlight under
            the cursor.
          </p>
          <div className="mt-10 h-24 rounded-3xl bg-muted" />
        </div>
      </TiltCard>
    </div>
  );
}


export default { Demo };