WebGL 3D scenes need a declarative React host that manages the Babylon engine, camera, lights, and render loop. Without it, you're building up imperative engine calls by hand, losing composability and fighting React lifecycle. <Stage> solves this by bundling engine setup and frame-tick subscription into a context, so child components can mount interactive overlays, build painted widgets, and respond to each frame without touching the engine directly.

<Stage> is a controlled React component that owns a Babylon.js engine, scene, arc-rotate camera, and hemispheric + directional lights — all configurable via props. It exposes a StageContext (accessed via useStage()) that yields the engine, scene, canvas, and an onFrame(cb) subscription method for running imperative logic each render tick. Child components like <Monitor> use this context to render interactive React overlays positioned and projected onto 3D meshes; the overlay is live HTML, not a canvas texture.

Import Stage and Monitor from @particle-academy/fancy-3d-babylon, wrap your scene in <Stage cameraRadius={...} cameraTarget={[...]}>, and drop <Monitor position={[...]} width={...} height={...}> children inside to mount React content onto 3D-projected planes. Use useStage() inside custom child components to hook into the scene, subscribe to frame ticks with onFrame(...), or call onReady on <Stage> to set up custom meshes or cameras before rendering.