Hero made by @ybouane.

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

Demo

Multi-Screen Orbital Carousel

Install

npm install @crazygl/hero-orbital-carousel

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.

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.