Hero made by @ybouane.

@crazygl/hero-command-center

Your product UI floats as a giant screen at the centre of a dark 3D command room, smaller procedural panels orbit around it, and volumetric spotlights sweep through floor fog while a slow camera dolly breathes life into the scene.

Demo

Command Center Stage

Install

npm install @crazygl/hero-command-center

Usage

import CommandCenter from '@crazygl/hero-command-center';

export default function Hero() {
  return (
    <CommandCenter
      screenshot="https://example.com/dashboard.avif"
      panel1Image="https://example.com/phone-a.avif"
      spotColor="#a8c0ff"
      fogDensity={0.7}
    />
  );
}

Customise

• Screenshot — screenshot (the giant central screen) plus screenshotX/Y, screenshotScale, screenshotTilt, screenEmissive.
• Panels — up to six orbiting image panels (panel1Image…panel6Image); blank ones are hidden. panelSpread controls orbit distance.
• Lighting — spotIntensity, spotSweepSpeed, spotColor for the volumetric beams.
• Atmosphere — fogDensity, fogColor, bloomStrength.
• Camera — dollyAmplitude, dollyPeriod, parallaxStrength.
• Background — bgColor, transparentBackground.

Best for

• Security, observability, and devops monitoring dashboards.
• Business-intelligence and analytics platforms.
• Enterprise "war-room" / control-room product pitches where the UI is the situation board.

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.