Hero made by @ybouane.

@crazygl/hero-app-screenshot-fan-stack

Your product screenshots pop up from below and arrange in a soft fan — every few seconds the lead card drifts away and the next slides forward in a smooth, looping reveal.

Demo

App Screenshot Fan Stack

Install

npm install @crazygl/hero-app-screenshot-fan-stack

Usage

import HeroAppScreenshotFanStack from '@crazygl/hero-app-screenshot-fan-stack';

export default function Page() {
  return (
    <HeroAppScreenshotFanStack
      heading={'Every screen,\non rotation.'}
      screenshot1="/shots/dashboard.avif"
      screenshot2="/shots/mobile.avif"
      cardCount={6}
      fanAmount={0.74}
    />
  );
}

Customise

• Screenshots — screenshot1…screenshot7; each card derives its aspect ratio from the loaded image, so portraits and dashboards mix naturally.
• Cards — cardCount (3–7), fanAmount (tight stack → wide arc), cardScale, cardCornerRadius.
• Loop — cycleInterval (seconds between throws), transitionDuration (ease time of each throw).
• Motion — pointerParallax (cursor tilt), ambientFloat (idle bob).
• Lighting — keyColor (warm), fillColor (cool), screenBrightness (emissive boost), shadowStrength.
• Background — bgTop / bgBottom pastel radial gradient, or transparentBackground.
• Layout — contentAlign, padding, groupOffsetX/Y to position the fan.

Best for

• SaaS and dashboard products showing off many screens at once.
• Template galleries and design-tool marketing pages.
• Mobile-app landings where "look at all our screens" is the headline.

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.