Product Carousel

A centred showcase carousel for transparent product PNGs — the active product sits front and large while the previous and next peek in from the sides, dimmed and scaled. Swipe, drag, arrows or dots; products swing into frame with captions that animate in.

React

Image

Interactive

Font

#carousel

#product

#slider

#png

#transparent

#coverflow

#swipe

#showcase

Usage

import ProductCarousel from '@crazygl/hero-product-carousel';

export default function Page() {
  return (
    <ProductCarousel
      slideCount={4}
      slide1Image="https://crazygl.com/samples/product-vase.png"
      slide1Heading="Helix Vase"
      autoplay
    />
  );
}

Customise

Slides — slideCount (1–6) plus per-slide slideNImage / slideNEyebrow / slideNHeading / slideNSubtext.
Layout — spacing (side spread), sideScale, sideOpacity, sideBlur, pointerParallax, tiltSides, floor shadow.
Motion — duration, easing (expo / smooth / back / ease), textTransition (fade / rise / clip / blur), autoplay, interval.
Style — bgTop / bgBottom backdrop, textColor, accentColor, showArrows / showDots / showCounter, headingFont / bodyFont.

Best for

E-commerce product launches and DTC landing pages.
Furniture, gadget, and lifestyle catalogues with clean PNG cut-outs.
Portfolio or collection showcases that need swipe/drag navigation.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-product-carousel

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

import ProductCarousel from '@crazygl/hero-product-carousel';

export default function Landing() {
  return (
    <ProductCarousel />
  );
}

03 · Use it in a page

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.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import ProductCarousel from '@crazygl/hero-product-carousel';

export default function Page() {
  return (
    <section>
      <ProductCarousel
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}