ImmersiveCard3D

The ImmersiveCard3D component is an interactive, animated card with realistic 3D transformations that respond to mouse movement. It features atmospheric smoke effects on hover, dynamic rotation modes (limited tilt or full 360° rotation), and layered depth elements. The card includes customizable gradients, particle animations, and content organization, making it perfect for highlighting premium content, products, or experiences in an engaging, visually striking way.

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

import { Index } from "@/components/ui/immersive-card3d"

function DemoCard3D() {
  return (
    <Index>
      <div className="w-64 h-40 bg-blue-600 text-white rounded-xl flex items-center justify-center">
      </div>
    </Index>
  )
}

export { DemoCard3D }