Every AI-generated output — an ad, a proposal, a report — is the tip of an iceberg. Beneath it: data sources, prompt architectures, demographic targeting, compliance checks, campaign strategy. Today, all of that is invisible. The ZUI makes it navigable.
Click each layer below. Watch how the toolbars, center content, and available actions transform — same spatial layout, completely different function. This is the core UX innovation.
Every layer shares the same spatial layout — top toolbar, left tools, center content, bottom actions. But the function of each slot changes completely based on zoom depth. This is the Slot-Based API + Command Pattern in action.
Six engineering domains, each with specific requirements. This is the build specification for the ZUI environment.
WebGL (PixiJS) for the macro environment — grid, nodes, edges. DOM overlay via foreignObject for the Editing Layer — real HTML editing with native browser controls. Must maintain 60fps during pan/zoom.
Three strict states bound to zoom thresholds. Transitions trigger toolbar slot swaps, data fetching, and rendering fidelity changes. No hybrid states — the UI is always deterministically in one layer.
Empty toolbar slots filled dynamically based on layer state. Buttons are agnostic shells — they receive Command objects from the active layer. Same button positions, completely different functions.
Pinch-to-zoom with correct affine math. Single-finger pan. 100dvh sizing to handle mobile toolbar appearance/disappearance. Minimap for spatial orientation on small screens.
Node-based directed acyclic graph showing data lineage. Traceable connections from CRM/CMS inputs to final output features. Confidence indicators, counterfactual overlays, progressive disclosure.
Quadtree/R-tree for viewport-bound data loading. Only fetch and render what's visible. Aggressive memoization. Decouple viewport transforms from React render cycles.
Walking through a single use case to show exactly how the ZUI works when a user wants to understand and edit an AI-generated advertisement.
Full interactive HTML preview of "Summer BBQ Sale" banner. User clicks headline to edit text, picks the CTA button color, swaps the logo via URL input, adjusts typography. Downloads the final HTML with one click.
Toolbar: Text · Color Picker · Download HTML · Logo Link · Undo/Redo
Node graph showing: CRM segment (families, 25-45, suburban) → color preference model → this specific green. CMS product feed → "charcoal grill" hero image → background removal → brand-styled composite. Prompt chain: "Generate summer BBQ ad targeting suburban families" with weight adjustments.
Toolbar: Add CRM Source · Refresh CMS · Adjust Prompt Weights · Filter Demographics
National summer campaign pipeline. This ad is one of 47 regional variants. Compliance: checked against advertising standards. Market intel: competitor pricing data shows BBQ equipment demand peaks week 22-26. Supply chain: warehouse stock levels by region.
Toolbar: Export Pipeline · View Audit Log · Analytics Overlay · Trigger Campaign
The spatial canvas must be preserved on mobile — no collapsing to a vertical list. Instead: adapted touch gestures, simplified toolbars, and orientation helpers.
Pinch-to-zoom with focal point tracking. Single-finger pan. Pull-to-refresh and native zoom disabled.
Dynamic viewport units prevent Safari/Chrome toolbar from clipping the interface.
Always-visible minimap. Spatial breadcrumbs show zoom depth. Edge indicators for off-screen nodes.
On mobile, toolbars collapse to a bottom sheet with swipe-up reveal. Context-aware, same Command pattern.