3D Flip Card

Cards

About

A 3D flip card with spring mouse-tilt, pointer-tracked glare, an unclipped floating shadow, and keyboard toggling (Enter/Space). Use for skills, stats, and reveal-on-click cards.

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

Code

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

Usage.tsx

import FlipCard from '@/components/ui/flip-card'

const FRONT = (
  <div className="relative p-6 bg-card rounded-xl border border-border overflow-hidden">
    <div className="absolute top-0 left-0 right-0 h-1 bg-primary" />
    <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground mb-1">Cloud Platform</p>
    <h3 className="font-semibold text-foreground mb-4 text-lg">Infrastructure</h3>
    <div className="flex flex-wrap gap-2">
      {['AWS', 'Docker', 'Terraform', 'Kubernetes', 'VPC'].map((s) => (
        <span key={s} className="px-2.5 py-1 bg-muted text-muted-foreground rounded-md text-xs font-mono">
          {s}
        </span>
      ))}
    </div>
  </div>
)

const BACK = (
  <div className="relative p-6 rounded-xl border border-border overflow-hidden h-full flex flex-col justify-between">
    <div
      className="absolute inset-0 opacity-[0.04] pointer-events-none"
      style={{
        backgroundImage:
          'linear-gradient(var(--color-primary) 1px, transparent 1px), linear-gradient(90deg, var(--color-primary) 1px, transparent 1px)',
        backgroundSize: '20px 20px',
      }}
    />
    <div className="relative z-10">
      <p className="text-xs font-mono uppercase tracking-widest text-primary mb-3">Details</p>
      <p className="text-sm text-muted-foreground leading-relaxed">
        Scalable, secure infrastructure across multi-AZ deployments with automated CI/CD. Tip: set{' '}
        <code className="font-mono text-foreground">accentColor</code> to any token to theme the shadow.
      </p>
    </div>
  </div>
)

export default function FlipCardDemo() {
  return (
    <div className="w-full max-w-sm mx-auto p-6 bg-background">
      <FlipCard accentColor="var(--color-primary)">
        {FRONT}
      </FlipCard>
    </div>
  )
}