CrazyGLCollection Carousel
Product cards float in a curved 3D carousel. The center card is large and sharp; cards rotating toward the sides shrink, dim and blur into depth. Auto-rotates slowly, drag to spin with momentum, click a side card to bring it to center.
Usage
import CollectionCarousel from '@crazygl/hero-collection-carousel';
export default function Hero() {
return (
<CollectionCarousel
productCount={6}
product1Image="/shop/linen.jpg"
product1Title="Coastal Linen"
product1Price="$128"
depthFalloff={0.6}
accentColor="#e8b06a"
/>
);
}Customise
- Content — overlay heading/subheading, two-columns, or custom node.
- Products — up to 8 slots, each with
image,title,price, and anonCardNClicklink/handler;showLabelstoggles the composited title/price. - Carousel —
curveRadius,cardSpacing,cardCornerRadius,depthFalloff,autoRotateSpeed,reflectionStrength. - Interaction —
dragSensitivity,momentumDecay. - Style —
accentColor,bgTop,bgBottom.
Best for
- Fashion, apparel, and homeware ecommerce collections.
- "Shop the edit" / curated lookbooks on product landing pages.
- Premium product-category showcases that benefit from a tactile turntable.
One command, zero config.
npm install @crazygl/hero-collection-carouselImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import CollectionCarousel from '@crazygl/hero-collection-carousel';
export default function Landing() {
return (
<CollectionCarousel />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import CollectionCarousel from '@crazygl/hero-collection-carousel';
export default function Page() {
return (
<section>
<CollectionCarousel
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
