Multi-Screen Orbital Carousel

A ring of product screenshots orbits slowly around the hero in 3D space. The front card faces the camera and pops larger; the others recede into a depth-fogged background. Drag to spin, then let the ring glide back to its idle rotation.

React

WebGL

Image

Interactive

Font

#three

#3d

#screenshot

#carousel

#orbit

#ring

#showcase

#saas

#marketplace

#portfolio

Usage

import OrbitalCarousel from '@crazygl/hero-orbital-carousel';

export default function Page() {
  return (
    <OrbitalCarousel
      heading="One product, many faces."
      screenshot1="/screens/home.png"
      screenshot2="/screens/inbox.png"
      screenshot3="/screens/calendar.png"
      cardCount={6}
    />
  );
}

Provide up to six screenshots (screenshot1–screenshot6); the ring uses the first cardCount. Each card derives its own aspect ratio from the loaded image.

Customise

Carousel — cardCount (3–10), carouselSpeed, radius, cardWidth, cardCornerRadius, focusBoost, focusOpacityFalloff, groupOffsetX/Y.
Interaction — dragSensitivity, momentumDecay (how long the ring glides after a flick).
Lighting — keyColor, fillColor, screenBrightness (emissive boost; front card gets +30%).
Background — bgTop, bgBottom (CSS gradient behind the ring).

Best for

SaaS apps with many features and productivity tools cycling between modes.
Marketplaces showing app collections and mobile-app landing pages.
Portfolio sites presenting multiple project screens.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-orbital-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 MultiScreenOrbitalCarousel from '@crazygl/hero-orbital-carousel';

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

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 MultiScreenOrbitalCarousel from '@crazygl/hero-orbital-carousel';

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