A real 3D product display, kiosk, or virtual screen needs a physical container that looks like a monitor or tablet—bezel, depth, a recessed face—instead of a flat plane. Building this with raw three.js geometry, material layering, and per-face texturing from scratch is tedious. The Monitor abstraction encapsulates the bezel-plus-screen pattern so content authors (human or agent) can plop a screen onto a scene without wrestling with mesh positioning, depth offsets, or face management.

Monitor is a React component exported from @particle-academy/fancy-3d-three/react that mounts live, interactive React children onto a 3D mesh with perspective projection. Props include position (world-space center), width and height (world units), bezel (frame color), bezelThickness, background (screen backing color), rotationY (Y-axis rotation in radians), and optional pixelWidth/pixelHeight for design-time canvas size. Internally it builds a three.js bezel mesh and a projection-target plane, then each frame applies a perspective-corrected matrix3d CSS transform to an absolutely positioned overlay, culling when the screen faces away or sits behind the camera. Children render as ordinary React—fully interactive, event-aware, no rasterization.

Wrap your content in <Stage> (which owns the renderer and camera), then nest <Monitor position={[0, 1, 0]} width={2} height={1.5}><Card>...</Card></Monitor> — the overlay automatically projects onto the 3D mesh and responds to camera movement. For imperative mesh creation, use the createMonitor() factory from @particle-academy/fancy-3d-three to build the geometry and materials, passing a scene to auto-attach.