fancy-3d

3D UI frameworks typically force a choice: immersive engines like Babylon and three.js excel at spatial experiences but abandon DOM productivity, while web frameworks are terse to author but hostile to 3D. Teams end up rebuilding scene descriptions, state bindings, and rendering bridges for every new project. fancy-3d fills this gap by treating React components and 3D scenes as peers — the same Scene JSON can render as DOM/CSS-3D or into any WebGL engine's canvas.

<Canvas> is an engine-pluggable 2D/3D pan/zoom surface that defaults to DOM/CSS-3D rendering (no WebGL dependency) and accepts swappable engine adapters (babylonEngine or threeEngine from optional sibling packages). The core exports JSON-friendly Scene types with rich widget kinds (KPI, chart, kanban, table, timeline, code, form, image, text, and 3D-native screen displays), a WidgetAdapter interface for engine-specific rendering, and layout utilities. For stateful components, <Canvas.Node> and <Canvas.Edge> provide stable DOM identifiers so agents can read and mutate the 2D graph structure via stable handles. The DOM adapter bridges Scene to react-fancy components with full interactivity; WebGL engines mount live React trees onto 3D surfaces via texture rendering or 6-DOF DOM projection.

Install @particle-academy/fancy-3d, then import <Canvas> and Scene types. For DOM-only (no WebGL), use the default: <Canvas engine="dom" showGrid><Canvas.Node id="kpi" x={40} y={40}><Card>...</Card></Canvas.Node></Canvas>. To add a WebGL engine, install @particle-academy/fancy-3d-babylon and @babylonjs/core (or their three.js equivalents), then pass engine={babylonEngine} from @particle-academy/fancy-3d-babylon/engine. Render a Scene JSON via the DOM adapter with import { domAdapter } from "@particle-academy/fancy-3d/dom" and call domAdapter.render(node.widget, { nodeId, selected }).