npm - wizz-method - Versions diffs - 1.0.3 → 1.2.0 - Mend

wizz-method 1.0.3 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (630) hide show

package/src/skills-lib/huashu-design/demos/w3-fallback-advisor.html ADDED Viewed

@@ -0,0 +1,704 @@
+<!doctype html>
+<html lang="zh-Hans">
+<head>
+<meta charset="utf-8" />
+<title>w3 · Fallback Advisor（中文版）</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #000000;
+    --ink: #FFFFFF;
+    --ink-80: rgba(255,255,255,0.82);
+    --ink-60: rgba(255,255,255,0.58);
+    --muted: rgba(255,255,255,0.40);
+    --dim: rgba(255,255,255,0.18);
+    --hairline: rgba(255,255,255,0.12);
+    --accent: #D97757;
+    --accent-deep: #B85D3D;
+    --cd-bg: #F5F4F0;
+    --cd-ink: #1A1918;
+    --serif-cn: "Noto Serif SC", "Songti SC", serif;
+    --serif-en: "Source Serif 4", Georgia, serif;
+    --sans: "Inter", -apple-system, "PingFang SC", system-ui, sans-serif;
+    --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+  }
+  html, body {
+    margin: 0; padding: 0;
+    background: #000;
+    overflow: hidden;
+    font-family: var(--sans);
+    color: var(--ink);
+    -webkit-font-smoothing: antialiased;
+  }
+  * { box-sizing: border-box; }
+  .stage {
+    position: fixed;
+    top: 50%; left: 50%;
+    width: 1920px; height: 1080px;
+    transform-origin: center center;
+    background: var(--bg);
+    overflow: hidden;
+  }
+  /* ============ Watermark ============ */
+  .watermark-tl {
+    position: absolute;
+    top: 40px; left: 56px;
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.2em;
+    color: rgba(255,255,255,0.16);
+    z-index: 200;
+    pointer-events: none;
+    text-transform: uppercase;
+  }
+  .watermark-br {
+    position: absolute;
+    bottom: 32px; right: 40px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.24em;
+    color: rgba(255,255,255,0.14);
+    z-index: 200;
+    pointer-events: none;
+    text-transform: uppercase;
+  }
+  /* ============ Top Title ============ */
+  .top-title {
+    position: absolute;
+    top: 88px; left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--serif-cn);
+    font-weight: 300;
+    font-size: 42px;
+    letter-spacing: 0.02em;
+    color: var(--ink-80);
+    text-align: center;
+    opacity: 0;
+    will-change: opacity, transform;
+    z-index: 120;
+  }
+  .top-title .accent { color: var(--accent); font-weight: 400; }
+  .sub-caption {
+    position: absolute;
+    top: 148px; left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--sans);
+    font-weight: 300;
+    font-size: 15px;
+    letter-spacing: 0.32em;
+    color: var(--muted);
+    text-transform: uppercase;
+    opacity: 0;
+    will-change: opacity;
+    z-index: 120;
+  }
+  /* ============ Philosophy Wall (4 rows × 5 cols) ============ */
+  .wall-viewport {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1480px;
+    height: 760px;
+    perspective: 2400px;
+    perspective-origin: 50% 50%;
+    will-change: transform, opacity, filter;
+  }
+  .wall-grid {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    gap: 18px;
+    transform: rotateX(10deg) rotateY(-6deg);
+    transform-style: preserve-3d;
+    will-change: transform, opacity;
+  }
+  .cell {
+    position: relative;
+    background: #0f0f0f;
+    border: 1px solid var(--hairline);
+    border-radius: 8px;
+    overflow: hidden;
+    opacity: 0;
+    will-change: opacity, transform, filter;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 14px 16px;
+  }
+  /* abstract glyph per cell — geometric, no imagery */
+  .cell .glyph {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+  .cell .name {
+    position: relative;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    z-index: 2;
+    align-self: flex-end;
+  }
+  .cell .num {
+    position: relative;
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--dim);
+    letter-spacing: 0.1em;
+    z-index: 2;
+  }
+  /* Selected cells — lit up */
+  .cell.selected {
+    border-color: var(--accent);
+    background: #1a0f0a;
+  }
+  .cell.selected .name { color: var(--accent); }
+  /* ============ Scan light ============ */
+  .scan-light {
+    position: absolute;
+    left: -5%;
+    right: -5%;
+    top: -15%;
+    height: 200px;
+    background: linear-gradient(
+      180deg,
+      rgba(217, 119, 87, 0) 0%,
+      rgba(217, 119, 87, 0.18) 40%,
+      rgba(255, 220, 200, 0.45) 50%,
+      rgba(217, 119, 87, 0.18) 60%,
+      rgba(217, 119, 87, 0) 100%
+    );
+    filter: blur(8px);
+    z-index: 80;
+    opacity: 0;
+    will-change: opacity, transform;
+    pointer-events: none;
+  }
+  /* ============ Foreground 3 cards ============ */
+  .fg-row {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    gap: 56px;
+    opacity: 0;
+    will-change: opacity;
+    z-index: 100;
+  }
+  .fg-card {
+    width: 440px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    opacity: 0;
+    transform: translateZ(-800px) scale(0.4);
+    will-change: opacity, transform;
+  }
+  .fg-card .card-body {
+    background: #0f0f0f;
+    border: 1px solid var(--accent);
+    border-radius: 12px;
+    padding: 32px 30px;
+    box-shadow:
+      0 30px 80px -20px rgba(217,119,87,0.25),
+      0 10px 30px -10px rgba(0,0,0,0.6);
+  }
+  .fg-card .label {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    color: var(--accent);
+    text-transform: uppercase;
+    margin-bottom: 14px;
+  }
+  .fg-card .title-cn {
+    font-family: var(--serif-cn);
+    font-size: 36px;
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    line-height: 1.15;
+    color: var(--ink);
+    margin-bottom: 10px;
+  }
+  .fg-card .title-en {
+    font-family: var(--serif-en);
+    font-style: italic;
+    font-weight: 300;
+    font-size: 17px;
+    letter-spacing: 0.01em;
+    color: var(--ink-60);
+    margin-bottom: 22px;
+  }
+  .fg-card .feature {
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 0.02em;
+    color: var(--muted);
+    line-height: 1.6;
+    padding-top: 18px;
+    border-top: 1px solid var(--hairline);
+  }
+  .fg-card .thumb-wrap {
+    margin-top: 14px;
+    height: 0;
+    overflow: hidden;
+    border-radius: 10px;
+    background: #0a0a0a;
+    border: 1px solid var(--hairline);
+    opacity: 0;
+    will-change: opacity, height;
+  }
+  .fg-card .thumb-wrap img {
+    width: 100%;
+    display: block;
+  }
+  /* ============ Brand Reveal (米色盖层) ============ */
+  .brand-panel {
+    position: absolute;
+    inset: 0;
+    background: var(--cd-bg);
+    opacity: 0;
+    transform: translateY(100%);
+    will-change: opacity, transform;
+    z-index: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .brand-mark {
+    font-family: var(--serif-en);
+    font-style: italic;
+    font-weight: 300;
+    font-size: 112px;
+    letter-spacing: -0.02em;
+    color: var(--cd-ink);
+    opacity: 0;
+    transform: scale(0.92);
+    will-change: opacity, transform;
+    line-height: 1;
+  }
+  .brand-mark .accent { color: var(--accent); font-style: italic; }
+  .brand-mark .dot { color: var(--accent); font-style: normal; padding: 0 6px; }
+  .brand-underline {
+    margin-top: 34px;
+    height: 2px;
+    width: 0;
+    background: var(--accent);
+    will-change: width;
+  }
+  .brand-tag {
+    margin-top: 22px;
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.32em;
+    color: rgba(26,25,24,0.54);
+    text-transform: uppercase;
+    opacity: 0;
+    will-change: opacity;
+  }
+</style>
+</head>
+<body>
+<div class="stage" id="stage">
+  <!-- 水印 -->
+  <div class="watermark-tl">HUASHU · DESIGN</div>
+  <div class="watermark-br">V2 · 2026 · w3</div>
+  <!-- 顶部标题 -->
+  <div class="top-title" id="topTitle">
+    不知道要什么？<span class="accent">先给你 3 个方向</span>
+  </div>
+  <div class="sub-caption" id="subCaption">20 Philosophies · 3 Directions</div>
+  <!-- 扫描光 -->
+  <div class="scan-light" id="scanLight"></div>
+  <!-- 4×5 哲学墙 -->
+  <div class="wall-viewport" id="wallViewport">
+    <div class="wall-grid" id="wallGrid">
+      <!-- 20 cells injected by JS -->
+    </div>
+  </div>
+  <!-- 前景 3 张方向卡 -->
+  <div class="fg-row" id="fgRow">
+    <!-- card 1: Kenya Hara · 东方极简 -->
+    <div class="fg-card" id="card1">
+      <div class="card-body">
+        <div class="label">方向 01 · 东方空间</div>
+        <div class="title-cn">原研哉式留白</div>
+        <div class="title-en">Kenya Hara</div>
+        <div class="feature">赤土橙 · 大量留白 · 宣纸质感</div>
+      </div>
+      <div class="thumb-wrap" id="thumb1">
+        <img src="demo-takram.png" alt="demo takram" />
+      </div>
+    </div>
+    <!-- card 2: Pentagram · 信息建筑 -->
+    <div class="fg-card" id="card2">
+      <div class="card-body">
+        <div class="label">方向 02 · 信息建筑</div>
+        <div class="title-cn">Pentagram 秩序</div>
+        <div class="title-en">Pentagram</div>
+        <div class="feature">强网格 · 高对比 · 理性版式</div>
+      </div>
+      <div class="thumb-wrap" id="thumb2">
+        <img src="demo-pentagram.png" alt="demo pentagram" />
+      </div>
+    </div>
+    <!-- card 3: David Carson · 实验先锋 -->
+    <div class="fg-card" id="card3">
+      <div class="card-body">
+        <div class="label">方向 03 · 实验先锋</div>
+        <div class="title-cn">David Carson 式</div>
+        <div class="title-en">Experimental Edge</div>
+        <div class="feature">破格排印 · 粗野几何 · 视觉冲击</div>
+      </div>
+      <div class="thumb-wrap" id="thumb3">
+        <img src="demo-build.png" alt="demo build" />
+      </div>
+    </div>
+  </div>
+  <!-- Brand Reveal -->
+  <div class="brand-panel" id="brandPanel">
+    <div class="brand-mark" id="brandMark">huashu<span class="dot">·</span><span class="accent">design</span></div>
+    <div class="brand-underline" id="brandUnderline"></div>
+    <div class="brand-tag" id="brandTag">HTML as Designer's Medium</div>
+  </div>
+</div>
+<script>
+(function(){
+  // ============ Stage auto-scale ============
+  function scaleStage(){
+    const stage = document.getElementById('stage');
+    const sx = window.innerWidth / 1920;
+    const sy = window.innerHeight / 1080;
+    const s = Math.min(sx, sy);
+    stage.style.transform = `translate(-50%, -50%) scale(${s})`;
+  }
+  window.addEventListener('resize', scaleStage);
+  scaleStage();
+  // ============ 20 Philosophies ============
+  // 4 rows × 5 cols = 20. Selected: idx 0 (Pentagram), idx 9 (Kenya Hara), idx 12 (David Carson)
+  const PHILOSOPHIES = [
+    // row 1 — 信息建筑派
+    { name: 'Pentagram',    glyph: 'grid' },
+    { name: 'M. Vignelli',  glyph: 'bars' },
+    { name: 'Apple HIG',    glyph: 'radius' },
+    { name: 'Spin',         glyph: 'slash' },
+    { name: 'Build',        glyph: 'type' },
+    // row 2 — 运动诗学派
+    { name: 'Field.io',     glyph: 'wave' },
+    { name: 'Active Theory',glyph: 'orbit' },
+    { name: 'Hi-Res!',      glyph: 'dots' },
+    { name: 'Locomotive',   glyph: 'arrow' },
+    { name: 'Takram',       glyph: 'circle' },
+    // row 3 — 极简/东方
+    { name: 'Kenya Hara',   glyph: 'ma' },
+    { name: 'D. Rams',      glyph: 'square' },
+    { name: 'J. Ive',       glyph: 'arc' },
+    { name: 'J. Morrison',  glyph: 'minimal' },
+    { name: 'S. Ogata',     glyph: 'line' },
+    // row 4 — 实验 & 海报
+    { name: 'D. Carson',    glyph: 'collage' },
+    { name: 'S. Sagmeister',glyph: 'stamp' },
+    { name: 'P. Scher',     glyph: 'poster' },
+    { name: 'M. Glaser',    glyph: 'heart' },
+    { name: 'K. Sato',      glyph: 'logo' },
+  ];
+  // selected indices — 3 differentiated directions
+  const SELECTED = [10, 0, 15]; // Kenya Hara, Pentagram, David Carson
+  function makeGlyph(kind){
+    // Simple geometric SVG glyphs — one per cell, no real logos
+    const svgs = {
+      grid: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1" fill="none">
+        <rect x="6" y="8" width="28" height="18"/><rect x="38" y="8" width="28" height="18"/><rect x="70" y="8" width="24" height="44"/>
+        <rect x="6" y="30" width="60" height="22"/></g></svg>`,
+      bars: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g fill="rgba(255,255,255,0.22)">
+        <rect x="10" y="40" width="8" height="16"/><rect x="22" y="28" width="8" height="28"/><rect x="34" y="16" width="8" height="40"/>
+        <rect x="46" y="24" width="8" height="32"/><rect x="58" y="10" width="8" height="46"/><rect x="70" y="34" width="8" height="22"/>
+        <rect x="82" y="22" width="8" height="34"/></g></svg>`,
+      radius: `<svg viewBox="0 0 100 60" width="72%" height="58%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none">
+        <rect x="14" y="10" width="72" height="40" rx="20" ry="20"/></g></svg>`,
+      slash: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.4" fill="none" stroke-linecap="square">
+        <path d="M 14 50 L 52 10"/><path d="M 36 50 L 74 10"/><path d="M 58 50 L 86 22"/></g></svg>`,
+      type: `<svg viewBox="0 0 100 60" width="78%" height="62%"><text x="50" y="42" text-anchor="middle" font-family="Source Serif 4, serif" font-size="40" font-style="italic" fill="rgba(255,255,255,0.22)">Aa</text></svg>`,
+      wave: `<svg viewBox="0 0 100 60" width="82%" height="62%"><path d="M 6 30 Q 20 8, 34 30 T 62 30 T 90 30" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/></svg>`,
+      orbit: `<svg viewBox="0 0 100 60" width="74%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.1" fill="none"><ellipse cx="50" cy="30" rx="36" ry="14"/><ellipse cx="50" cy="30" rx="14" ry="22"/><circle cx="50" cy="30" r="2" fill="rgba(255,255,255,0.32)"/></g></svg>`,
+      dots: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g fill="rgba(255,255,255,0.22)"><circle cx="14" cy="18" r="2"/><circle cx="30" cy="18" r="2"/><circle cx="46" cy="18" r="2"/><circle cx="62" cy="18" r="2"/><circle cx="78" cy="18" r="2"/><circle cx="14" cy="30" r="2"/><circle cx="30" cy="30" r="2"/><circle cx="46" cy="30" r="3"/><circle cx="62" cy="30" r="2"/><circle cx="78" cy="30" r="2"/><circle cx="14" cy="42" r="2"/><circle cx="30" cy="42" r="2"/><circle cx="46" cy="42" r="2"/><circle cx="62" cy="42" r="2"/><circle cx="78" cy="42" r="2"/></g></svg>`,
+      arrow: `<svg viewBox="0 0 100 60" width="78%" height="52%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none" stroke-linecap="square"><path d="M 14 30 L 80 30"/><path d="M 68 18 L 82 30 L 68 42"/></g></svg>`,
+      circle: `<svg viewBox="0 0 100 60" width="62%" height="62%"><circle cx="50" cy="30" r="22" stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"/></svg>`,
+      ma: `<svg viewBox="0 0 100 60" width="72%" height="62%"><g fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"><rect x="18" y="14" width="64" height="32"/></g><circle cx="50" cy="30" r="1.4" fill="rgba(255,255,255,0.32)"/></svg>`,
+      square: `<svg viewBox="0 0 100 60" width="62%" height="62%"><rect x="30" y="10" width="40" height="40" stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"/></svg>`,
+      arc: `<svg viewBox="0 0 100 60" width="78%" height="62%"><path d="M 14 46 Q 50 6, 86 46" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/></svg>`,
+      minimal: `<svg viewBox="0 0 100 60" width="78%" height="32%"><line x1="18" y1="30" x2="82" y2="30" stroke="rgba(255,255,255,0.22)" stroke-width="1.2"/></svg>`,
+      line: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="0.9" fill="none"><line x1="14" y1="16" x2="86" y2="16"/><line x1="14" y1="30" x2="86" y2="30"/><line x1="14" y1="44" x2="60" y2="44"/></g></svg>`,
+      collage: `<svg viewBox="0 0 100 60" width="82%" height="62%"><g fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="1"><rect x="8" y="8" width="24" height="18" transform="rotate(-8 20 17)"/><rect x="36" y="18" width="28" height="20" transform="rotate(5 50 28)"/><rect x="60" y="6" width="32" height="24" transform="rotate(-4 76 18)"/></g><text x="50" y="56" text-anchor="middle" font-family="Source Serif 4, serif" font-size="14" font-style="italic" fill="rgba(255,255,255,0.3)">RAY</text></svg>`,
+      stamp: `<svg viewBox="0 0 100 60" width="70%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"><circle cx="50" cy="30" r="22"/><text x="50" y="35" text-anchor="middle" font-family="Source Serif 4" font-size="16" font-weight="500" fill="rgba(255,255,255,0.3)">S</text></g></svg>`,
+      poster: `<svg viewBox="0 0 100 60" width="82%" height="62%"><g fill="rgba(255,255,255,0.22)"><rect x="8" y="8" width="22" height="44"/><rect x="34" y="8" width="22" height="44"/><rect x="60" y="8" width="22" height="44"/></g></svg>`,
+      heart: `<svg viewBox="0 0 100 60" width="58%" height="58%"><path d="M 50 48 C 30 32, 18 20, 30 14 C 40 10, 50 22, 50 22 C 50 22, 60 10, 70 14 C 82 20, 70 32, 50 48 Z" fill="rgba(217,119,87,0.28)"/></svg>`,
+      logo: `<svg viewBox="0 0 100 60" width="60%" height="60%"><circle cx="50" cy="30" r="20" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/><circle cx="50" cy="30" r="6" fill="rgba(255,255,255,0.22)"/></svg>`,
+    };
+    return svgs[kind] || svgs.minimal;
+  }
+  // Build the wall
+  const wallGrid = document.getElementById('wallGrid');
+  PHILOSOPHIES.forEach((p, idx) => {
+    const cell = document.createElement('div');
+    cell.className = 'cell';
+    cell.dataset.idx = idx;
+    const row = Math.floor(idx / 5);
+    const col = idx % 5;
+    // precompute distance from grid center (2, 1.5)
+    const dr = row - 1.5;
+    const dc = col - 2;
+    const dist = Math.sqrt(dr * dr + dc * dc);
+    cell.dataset.dist = dist.toFixed(3);
+    cell.innerHTML = `
+      <div class="glyph">${makeGlyph(p.glyph)}</div>
+      <div class="num">${String(idx + 1).padStart(2, '0')}</div>
+      <div class="name">${p.name}</div>
+    `;
+    wallGrid.appendChild(cell);
+  });
+  const cells = Array.from(wallGrid.querySelectorAll('.cell'));
+  const maxDist = Math.max(...cells.map(c => parseFloat(c.dataset.dist)));
+  // ============ Timeline ============
+  const T_TOTAL = 12.0; // seconds (flow type w)
+  const fps = 25;
+  const frameDur = 1 / fps;
+  // Easing
+  const expoOut = t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+  const expoIn  = t => t === 0 ? 0 : Math.pow(2, 10 * (t - 1));
+  const cubicInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;
+  const cubicOut = t => 1 - Math.pow(1 - t, 3);
+  const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+  const clamp01 = v => clamp(v, 0, 1);
+  const lerp = (a, b, t) => a + (b - a) * t;
+  // Element refs
+  const topTitle = document.getElementById('topTitle');
+  const subCap = document.getElementById('subCaption');
+  const wallViewport = document.getElementById('wallViewport');
+  const wallGridEl = wallGrid;
+  const scanLight = document.getElementById('scanLight');
+  const fgRow = document.getElementById('fgRow');
+  const card1 = document.getElementById('card1');
+  const card2 = document.getElementById('card2');
+  const card3 = document.getElementById('card3');
+  const thumb1 = document.getElementById('thumb1');
+  const thumb2 = document.getElementById('thumb2');
+  const thumb3 = document.getElementById('thumb3');
+  const brandPanel = document.getElementById('brandPanel');
+  const brandMark = document.getElementById('brandMark');
+  const brandUnderline = document.getElementById('brandUnderline');
+  const brandTag = document.getElementById('brandTag');
+  function tick(t){
+    // Clamp
+    t = Math.max(0, Math.min(T_TOTAL, t));
+    // ========== Phase 1: 0 - 2.5s — Ripple in 20 cells ==========
+    const rippleStart = 0.15;
+    const rippleSpan  = 1.8;
+    cells.forEach(cell => {
+      const d = parseFloat(cell.dataset.dist);
+      // delay scaled by distance-from-center (hero v10 formula)
+      const delay = (d / maxDist) * 0.85;
+      const cellT = clamp01((t - rippleStart - delay * 0.55) / 0.7);
+      const eased = expoOut(cellT);
+      const idx = parseInt(cell.dataset.idx, 10);
+      const isSel = SELECTED.includes(idx);
+      cell.style.opacity = (eased * (isSel ? 1.0 : 0.85)).toFixed(3);
+      const ty = lerp(30, 0, eased);
+      const scale = lerp(0.88, 1, eased);
+      cell.style.transform = `translateY(${ty}px) scale(${scale})`;
+    });
+    // ========== Phase 2: 2.5 - 4.0s — scan light sweeps down ==========
+    const scanStart = 2.6;
+    const scanEnd = 4.0;
+    const scanT = clamp01((t - scanStart) / (scanEnd - scanStart));
+    if (scanT > 0 && scanT < 1) {
+      scanLight.style.opacity = Math.min(1, Math.sin(scanT * Math.PI) * 1.3).toFixed(3);
+      // travel from top to bottom across the wall (-150 to 860px within wallViewport-ish)
+      const py = lerp(-180, 820, cubicInOut(scanT));
+      scanLight.style.transform = `translateY(${py}px)`;
+    } else {
+      scanLight.style.opacity = 0;
+    }
+    // ========== Phase 3: 4.0 - 4.8s — 3 cells light up, others dim ==========
+    const lightStart = 4.0;
+    const lightEnd = 4.8;
+    const lightT = clamp01((t - lightStart) / (lightEnd - lightStart));
+    const lightE = expoOut(lightT);
+    cells.forEach(cell => {
+      const idx = parseInt(cell.dataset.idx, 10);
+      const isSel = SELECTED.includes(idx);
+      if (isSel) {
+        cell.classList.toggle('selected', lightT > 0.05);
+      } else {
+        // dim non-selected from 0.85 → 0.08
+        const base = 0.85;
+        const dimmedOpacity = lerp(base, 0.08, lightE);
+        // only override after ripple is done
+        if (t >= lightStart) {
+          cell.style.opacity = dimmedOpacity.toFixed(3);
+        }
+      }
+    });
+    // ========== Phase 4: 4.8 - 6.5s — 3 cells break out to foreground ==========
+    // We don't literally move the wall cells; we fade in fg-cards "bursting from the wall"
+    const breakStart = 4.8;
+    const breakEnd = 6.5;
+    const breakT = clamp01((t - breakStart) / (breakEnd - breakStart));
+    const breakE = expoOut(breakT);
+    if (t >= breakStart - 0.1) {
+      fgRow.style.opacity = 1;
+    } else {
+      fgRow.style.opacity = 0;
+    }
+    [card1, card2, card3].forEach((card, i) => {
+      const stagger = i * 0.18; // pop × 3 staggered
+      const cT = clamp01((t - breakStart - stagger) / 0.85);
+      const cE = expoOut(cT);
+      card.style.opacity = cE.toFixed(3);
+      // Z-rush: from translateZ(-800) to 0, scale 0.4 → 1
+      const tz = lerp(-800, 0, cE);
+      const sc = lerp(0.45, 1, cE);
+      const ty = lerp(40, 0, cE);
+      card.style.transform = `translateZ(${tz}px) scale(${sc}) translateY(${ty}px)`;
+    });
+    // Dim the wall (behind) when cards come forward
+    if (t >= breakStart) {
+      const dimT = clamp01((t - breakStart) / 0.9);
+      const dimE = expoOut(dimT);
+      wallViewport.style.opacity = lerp(1, 0.25, dimE).toFixed(3);
+      wallViewport.style.filter = `blur(${lerp(0, 6, dimE).toFixed(1)}px)`;
+    } else {
+      wallViewport.style.opacity = 1;
+      wallViewport.style.filter = 'blur(0px)';
+    }
+    // ========== Phase 5: 6.5 - 9.5s — thumbnails grow below each card ==========
+    const thumbStart = 6.6;
+    const thumbs = [thumb1, thumb2, thumb3];
+    thumbs.forEach((thumb, i) => {
+      const stagger = i * 0.32;
+      const ttT = clamp01((t - thumbStart - stagger) / 1.0);
+      const ttE = cubicOut(ttT);
+      thumb.style.opacity = ttE.toFixed(3);
+      // height from 0 to 250px
+      const h = lerp(0, 250, ttE);
+      thumb.style.height = `${h}px`;
+    });
+    // ========== Top title fade in 7.2 - 8.0 ==========
+    const titleStart = 7.2;
+    const titleT = clamp01((t - titleStart) / 0.9);
+    const titleE = cubicOut(titleT);
+    topTitle.style.opacity = titleE.toFixed(3);
+    topTitle.style.transform = `translateX(-50%) translateY(${lerp(-14, 0, titleE)}px)`;
+    subCap.style.opacity = (titleE * 0.95).toFixed(3);
+    // ========== Phase 6: 9.8 - 12.0s — Brand Reveal ==========
+    const brandStart = 9.8;
+    const panelT = clamp01((t - brandStart) / 0.7);
+    const panelE = expoOut(panelT);
+    brandPanel.style.opacity = panelE.toFixed(3);
+    brandPanel.style.transform = `translateY(${lerp(100, 0, panelE)}%)`;
+    const markStart = 10.3;
+    const markT = clamp01((t - markStart) / 0.6);
+    const markE = expoOut(markT);
+    brandMark.style.opacity = markE.toFixed(3);
+    brandMark.style.transform = `scale(${lerp(0.92, 1, markE)})`;
+    const ulStart = 10.7;
+    const ulT = clamp01((t - ulStart) / 0.55);
+    brandUnderline.style.width = `${lerp(0, 280, expoOut(ulT))}px`;
+    const tagStart = 11.1;
+    const tagT = clamp01((t - tagStart) / 0.5);
+    brandTag.style.opacity = cubicOut(tagT).toFixed(3);
+  }
+  // ============ Animation loop ============
+  window.__ready = false;
+  window.__duration = T_TOTAL;
+  let startTime = null;
+  let paused = false;
+  const recording = window.__recording === true;
+  function loop(now){
+    if (paused) return;
+    if (startTime === null) startTime = now;
+    const t = (now - startTime) / 1000;
+    tick(t);
+    if (t < T_TOTAL) {
+      requestAnimationFrame(loop);
+    } else if (!recording) {
+      startTime = now;
+      requestAnimationFrame(loop);
+    }
+  }
+  // First-frame sync BEFORE requesting next frame
+  tick(0);
+  window.__ready = true;
+  requestAnimationFrame(loop);
+  // Pause raf loop — tests & recorder call this before seeking
+  window.__pause = function(){ paused = true; };
+  window.__resume = function(){
+    if (!paused) return;
+    paused = false;
+    startTime = null;
+    requestAnimationFrame(loop);
+  };
+  // Expose for video recorder (scripts/render-video.js uses __setTime)
+  window.__setTime = function(t){ paused = true; tick(t); };
+})();
+</script>
+</body>
+</html>