Components
creative "Interactive Product Card" component. It's designed with a clean, modern aesthetic. When you hover over the card, the product image tilts with a 3D effect, a glowing spotlight follows your cursor, and the "Add to Cart" button animates into view.
Loading preview...
import InteractiveProductCard from "@/components/ui/interactive-product-card";
export default function DemoOne() {
const productData = {
imageUrl: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=400&auto=format&fit=crop",
altText: "A futuristic red and black sneaker",
title: "Aura-X Pro",
category: "Next-Gen Kinetic Footwear",
rating: 5,
reviewCount: 128,
price: 249.99,
};
return (
<main className="bg-[#111827] w-full min-h-screen flex flex-col items-center justify-center p-4 sm:p-8">
<div className="text-center text-white mb-12">
<h1 className="text-4xl font-bold">Interactive Product Card</h1>
<p className="text-lg text-slate-400">Hover over the card to see the effect.</p>
</div>
<InteractiveProductCard product={productData} />
</main>
);
}