Product Bounce Card

Installation

Usage

import { ProductBounceCard } from "@/components/ruixen/product-bounce-card";
 
export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <ProductBounceCard
        imageUrl="https://example.com/product-image.png"
        alt="Premium Product"
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`imageUrl`	`string`	-	Product image URL
`alt`	`string`	"Product image"	Alt text for accessibility

Features

Continuous Animation: Smooth bouncing and rotating motion
3D Rotation: Y-axis rotation for depth effect
Realistic Shadow: Ground shadow that follows the product
Smooth Physics: Natural easing for realistic movement
Responsive Design: Maintains proportions across screen sizes
Lightweight: Minimal props for easy integration

Animation Details

Bounce Movement

Vertical Range: 0px to -20px (20px bounce height)
Y-Rotation: 0° → 10° → -10° → 0° (subtle rotation)
Duration: 1.7 seconds per cycle
Easing: ease-in-out for natural movement
Loop: Infinite repetition

3D Effects

Transform Style: preserve-3d for realistic 3D rendering
Rotation Axis: Y-axis rotation for side-to-side tilt
Bounce Physics: Simulates gravity and bounce

Shadow Element

Position: Absolute positioned at bottom
Size: 160px width, 24px height
Style: Blurred black shadow with 20% opacity
Shape: Rounded full for realistic ground shadow

Customization

Animation Speed

// Faster animation (1.2 seconds)
transition={{
  duration: 1.2,
  repeat: Infinity,
  ease: "easeInOut",
}}
 
// Slower animation (2.5 seconds)
transition={{
  duration: 2.5,
  repeat: Infinity,
  ease: "easeInOut",
}}

Bounce Height

// Higher bounce (30px)
animate={{
  y: [0, -30, 0],
  rotateY: [0, 10, -10, 0],
}}
 
// Lower bounce (10px)
animate={{
  y: [0, -10, 0],
  rotateY: [0, 10, -10, 0],
}}

Rotation Amount

// More rotation
animate={{
  y: [0, -20, 0],
  rotateY: [0, 20, -20, 0], // Increased rotation
}}
 
// Less rotation
animate={{
  y: [0, -20, 0],
  rotateY: [0, 5, -5, 0], // Subtle rotation
}}

Custom Shadow

// Larger shadow
<div className="absolute bottom-0 h-8 w-48 rounded-full bg-black/20 blur-md" />
 
// Smaller shadow
<div className="absolute bottom-0 h-4 w-32 rounded-full bg-black/20 blur-md" />
 
// Colored shadow
<div className="absolute bottom-0 h-6 w-40 rounded-full bg-blue-500/20 blur-md" />

Product Showcase Examples

Electronics

<ProductBounceCard imageUrl="/smartphone.png" alt="Latest Smartphone" />

Fashion

<ProductBounceCard imageUrl="/sneakers.png" alt="Designer Sneakers" />

Accessories

<ProductBounceCard imageUrl="/watch.png" alt="Luxury Watch" />

Food & Beverage

<ProductBounceCard imageUrl="/coffee-cup.png" alt="Premium Coffee" />

Integration Examples

Product Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  {products.map((product) => (
    <ProductBounceCard
      key={product.id}
      imageUrl={product.image}
      alt={product.name}
    />
  ))}
</div>

Hero Section

<section className="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
  <div className="text-center">
    <h1 className="text-4xl font-bold mb-8">Featured Product</h1>
    <ProductBounceCard imageUrl="/hero-product.png" alt="Featured Product" />
  </div>
</section>

Loading State

{
  isLoading ? (
    <div className="flex items-center justify-center h-64">
      <ProductBounceCard imageUrl="/loading-placeholder.png" alt="Loading..." />
    </div>
  ) : (
    <ProductDetails />
  );
}

Use Cases

E-commerce: Product showcases and featured items
Landing Pages: Hero product displays
Marketing: Attention-grabbing product presentations
Portfolios: Creative work showcases
Loading States: Engaging loading animations
Interactive Demos: Product interaction previews

Performance Considerations

Hardware Acceleration: Uses transform properties for smooth animation
Efficient Rendering: Framer Motion optimizations
Image Optimization: Use next/image for automatic optimization
Memory Usage: Lightweight animation with minimal DOM elements

Accessibility

Alt Text: Always provide descriptive alt text
Motion Preferences: Consider prefers-reduced-motion for users sensitive to animation
Screen Readers: Animation doesn't interfere with screen reader navigation
Focus Management: Non-interactive, doesn't affect keyboard navigation

Browser Support

Modern Browsers: Full support in Chrome, Firefox, Safari, Edge
3D Transforms: Requires browsers with CSS 3D transform support
Framer Motion: Requires JavaScript enabled
Fallback: Consider static image fallback for older browsers