View Transition Toggle

A grid ↔ list layout switch that morphs each card into its new position and size instead of cutting instantly — the native View Transitions API (document.startViewTransition() + a per-card view-transition-name), zero animation library. Real, current support as of this run (sourced via MDN and caniuse): same-document view transitions are now Baseline (newly available) — Chrome/Edge since Chrome 111, Safari since Safari 18, and Firefox since Firefox 144 (shipped ~October 2025). That's a meaningfully wider, more current baseline than most entries in this catalog. Honest scope note: this is the same-document flavor only (one page, a DOM update inside startViewTransition) — the separate cross-document/MPA flavor (@view-transition at-rule, navigating between two full pages) is real but narrower today (Chrome 126+, Safari 18.2+, still not shipped in Firefox), and isn't what this component uses or claims. Feature-detects with `if (document.startViewTransition)` so unsupported browsers just re-layout instantly with no error and no broken state, and honors prefers-reduced-motion by disabling the morph animation outright rather than just making it faster. (Vanilla example: live iframe preview + HTML/CSS/JS tabs — click the toggle button.)

<div class="vtt-wrap">
  <button class="vtt-toggle" id="vtt-toggle" type="button">Switch to list view</button>
  <div class="vtt-grid" id="vtt-grid">
    <div class="vtt-item" id="vtt-item-1">01</div>
    <div class="vtt-item" id="vtt-item-2">02</div>
    <div class="vtt-item" id="vtt-item-3">03</div>
    <div class="vtt-item" id="vtt-item-4">04</div>
  </div>
</div>