Mission Control Grid Exposé

This is a Mission Control Grid Exposé. It scales overlapping full-screen views into a unified spatial grid. Its function is to provide absolute structural context, replacing linear tab switching with a macro-level physical interface.

Specs

• Weight: ~4 KB. Zero external dependencies.
• Performance: High. Spatial interpolation is handled natively by the browser’s rendering engine. [!] Simultaneous scaling of multiple heavy DOM nodes may cause frame drops on low-end devices.
• Theming / Customization: The macro layout is controlled by a single root variable (--grid-size: 20).
• Responsiveness: Fluid. Relies on viewport units (vw, vh) and CSS Grid proportional scaling.
• Web APIs: View Transitions API, Popover API.
• Graceful Degradation: [!] Without startViewTransition support, the layout jumps instantly. Without Popover API support, the overlay menu logic fails entirely, locking the interface.

Anatomy

• HTML: Semantic structure built on native HTML5 attributes. A hidden <nav> uses the popover attribute, triggered by a <button popovertarget="nav">. Individual <section> elements act as discrete viewports.
• CSS: A strict CSS Grid coordinate system. Each section is assigned explicit --x, --y, and --span variables. When the [data-exposed=true] attribute is active, these variables dictate precise grid placement.
• JS: The orchestrator. It dynamically assigns unique view-transition-name properties to sections to avoid collisions. It intercepts the popover’s beforetoggle event and wraps the state mutation within the View Transition callback.

Logic

The architectural strength of this snippet lies in its reliance on native browser state management rather than manual tracking.

POPOVER.addEventListener('beforetoggle', LAUNCH)

const LAUNCH = (event) => {
  // Determine target state from the native Popover event
  exposed = event ? (event.newState === 'open') : false;
  
  // Hand control to the rendering engine
  document.startViewTransition(() => {
    document.body.dataset.exposed = exposed;
  })
}

The script does not calculate pixels or track coordinates. It listens to the native Popover lifecycle and simply toggles a single data-exposed attribute on the body. The browser takes a snapshot. CSS instantly shifts the coordinates via Grid areas. The View Transitions API automatically draws the complex spatial path between the two snapshots.

Feel

Tactile and omniscient. Pressing the button pulls the camera back, exposing the entire architecture of the site at once. Selecting a section zooms the camera forward. It replaces instant page loads with physical spatial movement, making the digital environment feel like a tangible, structured object.