Components
Product Bounce Card
The ProductBounceCard is a sleek, animated display card designed to showcase products with a lively and modern 3D bounce effect. Using Framer Motion, it smoothly animates the product image with gentle vertical movement and subtle Y-axis rotation, creating a floating illusion that grabs attention. A soft shadow beneath the image adds depth and realism, making the product appear as if it’s hovering above the surface. Perfect for e-commerce landing pages, featured items, or hero sections, the ProductBounceCard brings your product visuals to life with engaging motion and clean design.
"use client";
import * as React from "react";
import { ProductBounceCard } from "@/components/ui/product-bounce-card";
export default function ProductBounceDemo() {
return (
<div className="flex min-h-screen items-center justify-center">
<ProductBounceCard
imageUrl="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_shirt_product.png"
alt="Ruixen Shirt"
/>
</div>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.