View Transition Hybrid CSS + JS

:root {
  --bg: #0a0f18;
  --panel: #121b2d;
  --line: #2a3852;
  --text: #edf4ff;
  --muted: #bfd0e8;
  --accent: #90e7ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background: radial-gradient(circle at 12% 8%, rgba(95, 145, 255, 0.22), transparent 42%),
    radial-gradient(circle at 86% 84%, rgba(178, 89, 255, 0.2), transparent 42%), var(--bg);
}

.topbar {
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.support {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}
.support.ok {
  color: #aff0cc;
}
.support.warn {
  color: #ffd6ad;
}

main {
  width: min(1120px, 94%);
  margin: 0 auto 2rem;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

h1,
h2,
p {
  margin: 0;
}
.muted {
  color: var(--muted);
}

.grid-wrap {
  display: grid;
  gap: 0.6rem;
}

.grid {
  margin-top: 0.8rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tile {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.8rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  display: grid;
  gap: 0.55rem;
  cursor: pointer;
}

.tile-media {
  min-height: 130px;
  border-radius: 12px;
}

.tile p {
  color: var(--muted);
  font-size: 0.9rem;
}

.detail-wrap {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}

.hero-media {
  min-height: 300px;
  border-radius: 14px;
}

.detail-head {
  display: grid;
  gap: 0.45rem;
}

.actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.btn {
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 0.42rem 0.75rem;
  cursor: pointer;
}

.btn.primary {
  border: 0;
  color: #051b28;
  background: linear-gradient(130deg, #85e5ff, #8db6ff);
  font-weight: 700;
}

.list {
  color: var(--muted);
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

const entries = [
  {
    id: "h1",
    title: "Launch Track",
    summary: "Hybrid timeline for launch campaign transitions.",
    color: "linear-gradient(130deg,#5cc9ff,#2d54ff)",
    bullets: [
      "Shared thumbnail becomes hero media.",
      "JS panel fade/slide runs after state swap.",
      "Fallback preserves content without animated dependency.",
    ],
  },
  {
    id: "h2",
    title: "Studio Spotlight",
    summary: "Portfolio highlight opening richer case information.",
    color: "linear-gradient(130deg,#ff8eea,#923eff)",
    bullets: [
      "Card identity retained through view-transition-name.",
      "UI controls animate with WAAPI after render.",
      "Close action reverses panel choreography first.",
    ],
  },
  {
    id: "h3",
    title: "Ops Layer",
    summary: "Dashboard module detail with progressive enhancement.",
    color: "linear-gradient(130deg,#ffe19b,#d88937)",
    bullets: [
      "Transition wraps only state mutation.",
      "JS animation coordinates secondary detail elements.",
      "Reduced motion path disables timeline effects.",
    ],
  },
];

const reduced = window.MotionPreference.prefersReducedMotion();
const app = document.getElementById("app");
const support = document.getElementById("support");
const state = { activeId: null };

function canAnimateViewTransition() {
  return document.startViewTransition && !reduced;
}

function transition(update) {
  if (canAnimateViewTransition()) {
    return document.startViewTransition(update);
  }
  update();
  return null;
}

function activeItem() {
  return entries.find((entry) => entry.id === state.activeId);
}

function animateDetailIn() {
  if (reduced) return;
  const panel = document.querySelector(".detail-wrap");
  if (!panel || !panel.animate) return;
  panel.animate(
    [
      { opacity: 0, transform: "translateY(14px) scale(0.99)" },
      { opacity: 1, transform: "translateY(0px) scale(1)" },
    ],
    { duration: 260, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)" }
  );
}

function renderGrid() {
  const t = document.getElementById("gridTemplate");
  app.replaceChildren(t.content.cloneNode(true));
  const grid = document.getElementById("tileGrid");

  entries.forEach((entry) => {
    const tile = document.createElement("article");
    tile.className = "tile";
    tile.style.viewTransitionName = `hybrid-tile-${entry.id}`;
    tile.innerHTML = `
      <div class="tile-media" style="background:${entry.color};view-transition-name:hybrid-media-${entry.id}"></div>
      <h2>${entry.title}</h2>
      <p>${entry.summary}</p>
    `;
    tile.addEventListener("click", () => openDetail(entry.id));
    grid.appendChild(tile);
  });
}

function renderDetail() {
  const item = activeItem();
  const t = document.getElementById("detailTemplate");
  app.replaceChildren(t.content.cloneNode(true));
  const root = document.getElementById("detailRoot");

  root.innerHTML = `
    <div class="hero-media" style="background:${item.color};view-transition-name:hybrid-media-${item.id}"></div>
    <div class="detail-head">
      <p class="eyebrow">Hybrid Coordination</p>
      <h1>${item.title}</h1>
      <p class="muted">${item.summary}</p>
    </div>
    <div class="actions">
      <button class="btn" id="backBtn">Back to Grid</button>
      <button class="btn primary">Apply Pattern</button>
    </div>
    <ul class="list">
      ${item.bullets.map((line) => `<li>${line}</li>`).join("")}
    </ul>
  `;

  document.getElementById("backBtn").addEventListener("click", closeDetail);
}

function openDetail(id) {
  state.activeId = id;
  const vt = transition(renderDetail);
  if (vt && vt.finished) vt.finished.then(animateDetailIn);
  else animateDetailIn();
}

function closeDetail() {
  const panel = document.querySelector(".detail-wrap");

  const closeNow = () => {
    state.activeId = null;
    transition(renderGrid);
  };

  if (reduced || !panel || !panel.animate) {
    closeNow();
    return;
  }

  panel
    .animate(
      [
        { opacity: 1, transform: "translateY(0px) scale(1)" },
        { opacity: 0, transform: "translateY(12px) scale(0.99)" },
      ],
      { duration: 180, easing: "ease-out" }
    )
    .finished.then(closeNow);
}

function renderSupport() {
  if (canAnimateViewTransition()) {
    support.textContent = "Hybrid mode active: View Transition + JS choreography.";
    support.classList.add("ok");
  } else {
    support.textContent = "Fallback mode: transitions are instant, panel behavior remains usable.";
    support.classList.add("warn");
  }
}

renderSupport();
renderGrid();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo 20 - Hybrid Transition Coordination</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="topbar">
      <a href="../">Back to demos</a>
      <p id="support" class="support"></p>
    </header>

    <main id="app"></main>

    <template id="gridTemplate">
      <section class="grid-wrap">
        <p class="eyebrow">Demo 20</p>
        <h1>Hybrid Transition: CSS + JS</h1>
        <p class="muted">Shared-element swap plus JavaScript timeline for detail panel choreography.</p>
        <div id="tileGrid" class="grid"></div>
      </section>
    </template>

    <template id="detailTemplate">
      <section class="detail-wrap" id="detailRoot"></section>
    </template>

    <script src="script.js"></script>
      </body>
</html>