Components
Bounce Cards
A dynamic card layout component with bouncing animations featuring staggered entrance effects and customizable card positioning. Built with GSAP for smooth animations, it supports both light and dark themes.
Features: • GSAP-powered animations • Staggered entrance effects • Customizable positioning • Responsive design • Theme-aware styling • Lazy image loading • Configurable timing • Elastic animations
import { BounceCards } from "@/components/ui/bounce-cards"
const images = [
"https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=500&auto=format",
"https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format",
"https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format",
"https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format",
"https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format"
]
const transformStyles = [
"rotate(5deg) translate(-150px)",
"rotate(0deg) translate(-70px)",
"rotate(-5deg)",
"rotate(5deg) translate(70px)",
"rotate(-5deg) translate(150px)"
]
export function BounceCardsDemo() {
return (
<div className="space-y-8">
<BounceCards
images={images}
containerWidth={500}
containerHeight={500}
animationDelay={1}
animationStagger={0.08}
easeType="elastic.out(1, 0.5)"
transformStyles={transformStyles}
className="mx-auto"
/>
</div>
)
}