Hero made by @ybouane.

@crazygl/hero-floating-movie-scene

Your product demo presented like a launch trailer: a floating screen drifts on a dark 3D stage while volumetric spotlights sweep across it, dust hangs in the beams, and a soft reflection pools on the floor. Slow cinematic camera drift; scroll pushes the camera in.

Demo

Floating Movie Scene

Install

npm install @crazygl/hero-floating-movie-scene

Usage

import FloatingMovieScene from '@crazygl/hero-floating-movie-scene';

export default function Hero() {
  return (
    <FloatingMovieScene
      heading={'Roll the\nlaunch tape.'}
      screenMedia="https://crazygl.com/samples/screenshot-video-editor-dark.avif"
      spotCount={3}
    />
  );
}

Customise

• Screen — screenMedia (image or video; aspect auto-derived), screenScale, screenX / screenY, screenTilt, screenEmissive.
• Stage Lights — spotCount (1–5), spotColor / spotColor2 (two-tone wash), spotIntensity, spotWidth, sweepSpeed.
• Atmosphere — particleDensity (drifting dust), floorReflection, accentColor (glow + floor pool).
• Camera — cameraDrift, parallaxStrength, revealDuration.
• Stage Tone — bgTone, floorTone. Typography — headingFontFamily.

Best for

• Product launches and AI / video SaaS where the demo is the pitch.
• Creative agencies wanting a premiere instead of a thumbnail.
• Landing pages that want a cinematic 3D stage around a screenshot or product video.

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.