3D UI surfaces need a way to render live, interactive content at runtime—not pre-baked textures. Without a dedicated mounting point, either you rasterize React into a static canvas at build time (killing liveness and interactivity), or you hand-manage DOM overlays against WebGL meshes (managing projections, depth sorting, and event targeting manually). <Monitor> closes that gap by treating the DOM as a first-class inhabitant of the 3D scene.

<Monitor> is a React component that anchors a perspectively-transformed DOM overlay to a Babylon mesh. It accepts world-space position, width, height, and optional rotationY; each frame it projects the mesh's four corners to screen space and applies a matrix3d CSS transform so the children appear pinned to that 3D surface. The overlay renders real React—full interactivity, event handling, CSS styling—with automatic depth-sorting against other overlays and frustum culling when the mesh is off-screen or edge-on. Props include bezel and bezelThickness to frame the content, background for the content area behind React children, and pixelWidth / pixelHeight to control the design-time coordinate space.

Import from @particle-academy/fancy-3d-babylon/react and nest <Monitor> inside a <Stage>. Pass position, width, and height in world units; place any React content inside—real components, forms, text, anything. <Stage> owns the Babylon engine and render loop; each <Monitor> subscribes to frame callbacks via useStage() to update its transform. Children receive no agent affordances by default (stable handles, bridges, etc.) but can opt in at the child level (e.g. wrap children in react-fancy controlled components with id props and onChange handlers).