Tilt Card

Component 1

About

3D pointer tilt with optional cursor-following glare and configurable max angle, scale and perspective. Respects reduced-motion.

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';

export default function TiltCardDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col items-center gap-4">
      <TiltCard glare className="w-64">
        <div className="flex flex-col gap-6 p-5">
          <div className="flex items-center justify-between">
            <span className="text-xs text-muted-foreground uppercase">Virtual</span>
            <span className="size-6 rounded-full bg-foreground/10" />
          </div>
          <div className="text-lg tracking-[0.12em] text-foreground tabular-nums">•••• 8021</div>
          <div className="flex items-end justify-between">
            <span className="text-sm font-medium text-foreground">M. Shehadeh</span>
            <span className="text-xs text-muted-foreground tabular-nums">09 / 28</span>
          </div>
        </div>
      </TiltCard>
      <p className="text-xs text-muted-foreground uppercase">Point at the card to tilt</p>
    </div>
  );
}