Hero made by @ybouane.

@crazygl/hero-stage-screen

A keynote-stage hero: your product screenshot lives on a massive floating screen, lit by sweeping volumetric spotlights through a low-lying carpet of theatre fog.

Demo

Stage Screen

Install

npm install @crazygl/hero-stage-screen

Usage

import StageScreen from '@crazygl/hero-stage-screen';

export default function Hero() {
  return (
    <StageScreen
      screenshot="https://example.com/dashboard.avif"
      heading="Take the stage."
      subheading="Built for moments that matter."
      spotCount={1}
      spotIntensity={2.1}
    />
  );
}

Customise

• Content — heading / subheading, two-column, or custom node content.
• Screenshot — the screenshot image on the screen, with screenshotX / screenshotY world offsets.
• Stage — screenScale, screenEmissive (glow), screenGlowColor, bezelColor, bezelWidth.
• Lighting — spotIntensity, spotSweepSpeed, spotCount (1–4), spotlightColor.
• Atmosphere — smokeParticles, fogDensity (floor haze), fogColor, floorColor, backgroundColor, floorReflectivity.
• Interaction — pointerRotation (camera/scene reactivity to the cursor).

Best for

• Product launches and product-reveal landing pages where the screenshot is the main event.
• Enterprise SaaS and developer-tool homepages that want a cinematic keynote feel.
• Startup landing pages needing a premium, theatre-lit hero around a single screenshot.

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.