Spatial UI Layout Archetypes & Responsive Docking

Architecting glassmorphic UI overlay containers, safe viewport boundaries, and responsive desktop-to-mobile docking adaptations.
Published: 7/10/2026

Spatial layout archetypes define how 2D interface controls coexist with the 3D WebGL viewport without obstructing the product model or disrupting user interaction.

Aircada provides 5 standard layout archetypes: FLOATINGDRAWER (floating glassmorphic panel docked right/left), SIDEBARDOCK (full-height dedicated sidebar), BOTTOMSHEET (mobile-optimized bottom drawer), FULLSCREENOVERLAY (modal configuration stages), and MINIMAL_HUD (transparent floating controls along viewport edges).

On desktop, FLOATINGDRAWER and SIDEBARDOCK allow full interactive orbit while tweaking swatches. On mobile viewports, the layout automatically transitions to BOTTOM_SHEET with collapsible drag handles.

  • FLOATING_DRAWER: Best for desktop luxury showcases (watches, jewelry, footwear) preserving 75%+ visible 3D canvas.
  • SIDEBAR_DOCK: Best for complex technical configurators (furniture, automotive, machinery) with 10+ parameter groups.
  • BOTTOM_SHEET: Mobile standard preventing UI controls from covering the product hero during finger dragging.
  • Safe Viewport Area: Maintain a minimum 32px margin around floating UI cards to allow comfortable orbit touch gestures.