Tilt Card

"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 };