Lab / 03 · Hero 09

UI Dimension

A real interface pulled apart in 3D space — surface, grid, components, content, interaction.

Motion
Five DOM layers compose one product screen. The camera lifts them into an isometric exploded stack with an anatomy label on every layer, sweeps round to a deep side view, then lets them fall back into a single flat interface. Every transform is a CSS matrix computed in JS, so the same matrices drive hit-testing for hover.
Demo brand
FRAME, fictional

Interaction

  • Pointer orbits the camera around the stack
  • The layer under the cursor lifts out of the stack and lights its edge
  • Movement makes layers trail each other like a loose spring
  • Click knocks the stack; scroll spreads the layers further apart
  • CSS 3D (preserve-3d) with real DOM UI
  • DOMMatrix projection for hover
  • State blending between camera rigs
  • Per-layer lag from velocity
  • Contact shadow in layer space
Watch the 10s filmAll heroes