Hero made by @ybouane.

@crazygl/hero-collection-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.

Demo

Collection Carousel

Install

npm install @crazygl/hero-collection-carousel

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 an onCardNClick link/handler; showLabels toggles 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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.