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/hero-animation-v10-en.html ADDED Viewed

@@ -0,0 +1,1498 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Huashu Design · Here's to the Agents (v10)</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;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&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;          /* terracotta — 致敬 Anthropic 血统 */
+    --accent-deep: #B85D3D;
+    /* Claude Design palette — Act 0 专用 */
+    --cd-bg: #F5F4F0;
+    --cd-panel: #FFFFFF;
+    --cd-ink: #1A1918;
+    --cd-dim: #8B867E;
+    --cd-hair: rgba(0,0,0,0.08);
+    --cd-hair-strong: rgba(0,0,0,0.16);
+    --cd-green: #2D4A3A;
+    --cd-green-deep: #1E3428;
+    --cd-green-soft: #3F5E4D;
+    --serif-en: "Source Serif 4", "Tiempos Headline", Georgia, serif;
+    --sans: "Inter", -apple-system, "PingFang SC", "HarmonyOS Sans 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;
+  }
+  .scene {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    will-change: opacity, transform;
+  }
+  .scene.visible { visibility: visible; }
+  /* ============ Act 1 ============ */
+  .act1 {
+    flex-direction: column;
+    gap: 40px;
+  }
+  .hero-line {
+    font-family: var(--sans);
+    font-size: 132px;
+    font-weight: 200;
+    letter-spacing: -0.045em;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1.02;
+    will-change: transform, opacity, font-variation-settings;
+  }
+  .hero-line .accent { color: var(--accent); font-weight: inherit; }
+  .not-line {
+    font-family: var(--sans);
+    font-size: 96px;
+    font-weight: 200;
+    letter-spacing: -0.035em;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1.08;
+  }
+  .not-line .strike {
+    color: var(--muted);
+    text-decoration: line-through;
+    text-decoration-thickness: 3px;
+    text-decoration-color: var(--accent);
+  }
+  /* ============ Abstract GUI icons (no real product screenshots) ============ */
+  .gui-glyph {
+    position: absolute;
+    opacity: 0;
+    will-change: opacity, transform, filter;
+  }
+  .gui-glyph.click {
+    /* Mouse cursor arrow */
+    width: 120px; height: 120px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .gui-glyph.click::before {
+    content: '';
+    width: 40px; height: 40px;
+    border: 2px solid var(--muted);
+    border-radius: 50%;
+    position: absolute;
+    animation: clickring 0.8s ease-out forwards;
+    animation-play-state: paused;
+  }
+  @keyframes clickring {
+    0%   { transform: scale(0.5); opacity: 0.8; }
+    100% { transform: scale(2.2); opacity: 0; }
+  }
+  .gui-glyph.click svg { width: 56px; height: 56px; position: relative; z-index: 2; }
+  .gui-glyph.drag {
+    /* Slider */
+    width: 400px; height: 48px;
+    display: flex; align-items: center;
+    gap: 0;
+  }
+  .gui-glyph.drag .track {
+    flex: 1;
+    height: 3px;
+    background: var(--hairline);
+    border-radius: 2px;
+    position: relative;
+  }
+  .gui-glyph.drag .fill {
+    position: absolute;
+    height: 100%;
+    background: var(--muted);
+    width: 30%;
+    border-radius: 2px;
+  }
+  .gui-glyph.drag .thumb {
+    position: absolute;
+    width: 24px; height: 24px;
+    background: var(--ink);
+    border: 1px solid var(--muted);
+    border-radius: 50%;
+    top: 50%;
+    left: 30%;
+    transform: translate(-50%, -50%);
+  }
+  .gui-glyph.folder {
+    /* Window frame w/ file list */
+    width: 420px; height: 260px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid var(--hairline);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  .gui-glyph.folder .head {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--hairline);
+    display: flex; gap: 8px;
+  }
+  .gui-glyph.folder .head .dot {
+    width: 9px; height: 9px; border-radius: 50%;
+    background: var(--hairline);
+  }
+  .gui-glyph.folder .row {
+    padding: 10px 16px;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--muted);
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--hairline);
+  }
+  .gui-glyph.folder .row:last-child { border-bottom: none; }
+  .gui-glyph.folder .row .meta {
+    color: var(--dim);
+  }
+  /* ============ Act 2 ============ */
+  .act2 {
+    flex-direction: column;
+  }
+  .terminal {
+    width: 1180px;
+    border-radius: 16px;
+    background: rgba(20, 20, 20, 1);
+    border: 1px solid var(--hairline);
+    overflow: hidden;
+    box-shadow:
+      0 0 0 1px rgba(255,255,255,0.02),
+      0 60px 120px -30px rgba(217,119,87,0.15);
+  }
+  .tty-head {
+    display: flex; align-items: center; gap: 9px;
+    padding: 18px 22px;
+    background: rgba(255,255,255,0.02);
+    border-bottom: 1px solid var(--hairline);
+  }
+  .tty-head .d {
+    width: 13px; height: 13px; border-radius: 50%;
+    background: var(--hairline);
+  }
+  .tty-head .d.red { background: #5a2a2a; }
+  .tty-head .d.yellow { background: #5a4a2a; }
+  .tty-head .d.green { background: #2a5a35; }
+  .tty-title {
+    margin-left: 16px;
+    color: var(--muted);
+    font-size: 14px;
+    font-family: var(--mono);
+    letter-spacing: 0.02em;
+  }
+  .tty-body {
+    padding: 44px 36px;
+    font-family: var(--mono);
+    font-size: 26px;
+    line-height: 1.6;
+    color: rgba(255,255,255,0.86);
+    min-height: 160px;
+  }
+  .prompt { color: var(--accent); margin-right: 12px; }
+  .typed { white-space: pre; }
+  .cursor {
+    display: inline-block;
+    width: 12px; height: 28px;
+    background: var(--accent);
+    vertical-align: -5px;
+    margin-left: 3px;
+  }
+  /* Gallery (v6 structure, dark theme) */
+  .gallery-viewport {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    perspective: 2400px;
+    perspective-origin: 50% 45%;
+  }
+  .gallery-canvas {
+    position: absolute;
+    top: 50%; left: 50%;
+    width: 4320px;
+    height: 2520px;
+    transform-origin: center center;
+    transform-style: preserve-3d;
+    will-change: transform;
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 40px;
+    padding: 60px;
+  }
+  .gallery-card {
+    background: #1a1a1a;
+    border-radius: 14px;
+    padding: 6px;
+    overflow: hidden;
+    border: 1px solid var(--hairline);
+    box-shadow:
+      0 20px 60px -20px rgba(0, 0, 0, 0.6),
+      0 6px 18px -6px rgba(0, 0, 0, 0.4);
+    aspect-ratio: 16 / 9;
+    will-change: opacity, filter;
+  }
+  .gallery-card.depth-near {
+    box-shadow:
+      0 32px 80px -22px rgba(0, 0, 0, 0.8),
+      0 10px 24px -8px rgba(217, 119, 87, 0.12);
+  }
+  .gallery-card.depth-far {
+    box-shadow:
+      0 14px 40px -16px rgba(0, 0, 0, 0.4),
+      0 4px 12px -4px rgba(0, 0, 0, 0.25);
+  }
+  .gallery-card img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: 9px;
+  }
+  /* Overlay statements (on top of gallery) */
+  .over-statement {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 50;
+    opacity: 0;
+  }
+  .over-statement .text {
+    font-family: var(--sans);
+    font-size: 84px;
+    font-weight: 200;
+    letter-spacing: -0.035em;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1.08;
+    text-shadow: 0 8px 40px rgba(0,0,0,0.8);
+    padding: 0 40px;
+    max-width: 1400px;
+  }
+  .over-statement .text .accent { color: var(--accent); }
+  /* ============ Act 3 ============ */
+  .act3 {
+    flex-direction: column;
+    gap: 0;
+  }
+  .statement-big {
+    font-family: var(--sans);
+    font-size: 160px;
+    font-weight: 100;
+    letter-spacing: -0.05em;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1;
+    will-change: opacity, transform, font-variation-settings;
+  }
+  .statement-big .accent { color: var(--accent); font-weight: inherit; }
+  .brand-wordmark {
+    font-family: var(--sans);
+    font-size: 140px;
+    font-weight: 100;
+    font-variation-settings: "wght" 100;
+    letter-spacing: -0.045em;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1;
+    will-change: font-variation-settings, opacity, transform;
+  }
+  .brand-wordmark .accent { color: var(--accent); font-weight: inherit; }
+  .farewell-quote {
+    margin-top: 44px;
+    font-family: var(--serif-en);
+    font-style: italic;
+    font-weight: 300;
+    font-size: 36px;
+    color: var(--accent);
+    letter-spacing: 0.005em;
+    text-align: center;
+    will-change: opacity, transform;
+  }
+  .farewell-cn {
+    margin-top: 18px;
+    font-family: var(--serif-en);
+    font-weight: 300;
+    font-size: 18px;
+    color: var(--muted);
+    letter-spacing: 0.24em;
+    text-align: center;
+  }
+  .brand-url {
+    margin-top: 48px;
+    font-size: 14px;
+    color: var(--muted);
+    font-family: var(--mono);
+    letter-spacing: 0.16em;
+    text-align: center;
+  }
+  /* Watermark (subtle, always on during Act 2/3) */
+  .watermark {
+    position: absolute;
+    bottom: 28px;
+    right: 36px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.22);
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.6s;
+    pointer-events: none;
+  }
+  .watermark.visible { opacity: 1; }
+  /* ============ Act 0 — Claude Design 致敬（+讽刺） ============ */
+  .act0 {
+    background: #0a0a0a;
+  }
+  .cd-browser {
+    position: absolute;
+    top: 50%; left: 50%;
+    width: 1640px;
+    height: 920px;
+    transform: translate(-50%, -50%);
+    background: var(--cd-bg);
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow:
+      0 0 0 1px rgba(255,255,255,0.04),
+      0 60px 160px -40px rgba(0,0,0,0.8),
+      0 24px 60px -20px rgba(0,0,0,0.6);
+    will-change: transform, opacity, filter;
+  }
+  .cd-chrome {
+    display: flex; align-items: center;
+    height: 48px;
+    padding: 0 18px;
+    background: #EDEBE5;
+    border-bottom: 1px solid var(--cd-hair);
+    gap: 14px;
+  }
+  .cd-traffic { display: flex; gap: 8px; }
+  .cd-traffic .d {
+    width: 12px; height: 12px; border-radius: 50%;
+    background: #D9D4CB;
+  }
+  .cd-traffic .d.r { background: #E8A5A0; }
+  .cd-traffic .d.y { background: #E8D0A0; }
+  .cd-traffic .d.g { background: #A5D0B0; }
+  .cd-urlbar {
+    flex: 1;
+    max-width: 520px;
+    margin: 0 auto;
+    height: 28px;
+    background: #F9F7F2;
+    border: 1px solid var(--cd-hair);
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    font-family: var(--sans);
+    font-size: 13px;
+    color: var(--cd-dim);
+    letter-spacing: 0;
+  }
+  .cd-urlbar .lock {
+    width: 10px; height: 10px;
+    margin-right: 8px;
+    border: 1.5px solid var(--cd-dim);
+    border-radius: 2px;
+    position: relative;
+  }
+  .cd-urlbar .lock::before {
+    content: '';
+    position: absolute;
+    top: -5px; left: 50%;
+    transform: translateX(-50%);
+    width: 6px; height: 6px;
+    border: 1.5px solid var(--cd-dim);
+    border-bottom: none;
+    border-radius: 3px 3px 0 0;
+  }
+  .cd-tabs-row {
+    display: flex;
+    height: 42px;
+    padding: 0 24px;
+    background: var(--cd-bg);
+    border-bottom: 1px solid var(--cd-hair);
+    align-items: center;
+    gap: 6px;
+  }
+  .cd-tab {
+    height: 28px;
+    padding: 0 14px;
+    display: flex; align-items: center;
+    font-family: var(--sans);
+    font-size: 12px;
+    color: var(--cd-dim);
+    border-radius: 6px;
+    gap: 8px;
+    white-space: nowrap;
+  }
+  .cd-tab.active {
+    background: #FFFFFF;
+    color: var(--cd-ink);
+    font-weight: 500;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+  }
+  .cd-tab .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--cd-green);
+  }
+  .cd-topbar-right {
+    margin-left: auto;
+    display: flex; align-items: center; gap: 12px;
+    font-family: var(--sans);
+    font-size: 12px;
+    color: var(--cd-dim);
+  }
+  .cd-topbar-right .btn {
+    padding: 6px 12px;
+    background: var(--cd-ink);
+    color: #FFFFFF;
+    border-radius: 6px;
+    font-weight: 500;
+  }
+  .cd-topbar-right .btn.ghost {
+    background: transparent;
+    color: var(--cd-ink);
+    border: 1px solid var(--cd-hair-strong);
+  }
+  .cd-body {
+    display: grid;
+    grid-template-columns: 440px 1fr;
+    height: calc(920px - 48px - 42px);
+  }
+  /* Chat panel */
+  .cd-chat {
+    background: var(--cd-bg);
+    border-right: 1px solid var(--cd-hair);
+    padding: 28px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    overflow: hidden;
+  }
+  .cd-msg { display: flex; gap: 10px; align-items: flex-start; }
+  .cd-avatar {
+    width: 26px; height: 26px;
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-family: var(--sans);
+    font-size: 11px;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  .cd-avatar.user {
+    background: #E8E4DC;
+    color: var(--cd-ink);
+  }
+  .cd-avatar.claude {
+    background: var(--cd-ink);
+    color: #FFFFFF;
+  }
+  .cd-bubble {
+    font-family: var(--sans);
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--cd-ink);
+    max-width: 100%;
+  }
+  .cd-bubble .dim { color: var(--cd-dim); }
+  .cd-tweaks {
+    margin-top: auto;
+    padding: 16px 18px;
+    background: #FFFFFF;
+    border: 1px solid var(--cd-hair);
+    border-radius: 10px;
+  }
+  .cd-tweaks-title {
+    font-family: var(--sans);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--cd-dim);
+    margin-bottom: 14px;
+  }
+  .cd-tweak-row {
+    display: flex; align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .cd-tweak-row:last-child { margin-bottom: 0; }
+  .cd-tweak-label {
+    font-family: var(--sans);
+    font-size: 12px;
+    color: var(--cd-ink);
+    width: 72px;
+    flex-shrink: 0;
+  }
+  .cd-tweak-track {
+    flex: 1;
+    height: 4px;
+    background: #E8E4DC;
+    border-radius: 2px;
+    position: relative;
+  }
+  .cd-tweak-thumb {
+    position: absolute;
+    top: 50%;
+    width: 16px; height: 16px;
+    background: #FFFFFF;
+    border: 1.5px solid var(--cd-ink);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    will-change: left;
+  }
+  .cd-color-dots {
+    display: flex; gap: 6px;
+  }
+  .cd-color-dot {
+    width: 16px; height: 16px;
+    border-radius: 50%;
+    border: 1.5px solid transparent;
+    cursor: default;
+  }
+  .cd-color-dot.active {
+    border-color: var(--cd-ink);
+  }
+  .cd-input {
+    margin-top: 14px;
+    height: 40px;
+    padding: 0 14px;
+    background: #FFFFFF;
+    border: 1px solid var(--cd-hair);
+    border-radius: 8px;
+    display: flex; align-items: center;
+    font-family: var(--sans);
+    font-size: 12px;
+    color: var(--cd-dim);
+  }
+  /* Canvas panel */
+  .cd-canvas {
+    background: #FAF9F5;
+    padding: 40px;
+    overflow: hidden;
+    display: flex; align-items: center; justify-content: center;
+    position: relative;
+  }
+  .cd-poster {
+    width: 780px;
+    aspect-ratio: 4 / 3;
+    background: var(--cd-green);
+    border-radius: 8px;
+    padding: 48px 56px;
+    color: #F5F2E8;
+    display: grid;
+    grid-template-columns: 1.2fr 1fr;
+    gap: 48px;
+    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4);
+    position: relative;
+    overflow: hidden;
+  }
+  .cd-poster::before {
+    content: '';
+    position: absolute;
+    top: -60px; right: -60px;
+    width: 220px; height: 220px;
+    background: radial-gradient(circle, rgba(245,242,232,0.10), transparent 70%);
+  }
+  .cd-poster-left { position: relative; z-index: 2; }
+  .cd-poster-eyebrow {
+    font-family: var(--sans);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    opacity: 0.65;
+    margin-bottom: 28px;
+  }
+  .cd-poster-title {
+    font-family: var(--serif-en);
+    font-size: 76px;
+    font-weight: 500;
+    line-height: 0.95;
+    letter-spacing: -0.02em;
+    margin-bottom: 20px;
+  }
+  .cd-poster-sub {
+    font-family: var(--sans);
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 1.5;
+    margin-bottom: 40px;
+  }
+  .cd-poster-pines {
+    display: flex; gap: 10px;
+    opacity: 0.35;
+  }
+  .cd-pine {
+    width: 0; height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 20px solid #F5F2E8;
+    position: relative;
+  }
+  .cd-pine::after {
+    content: '';
+    position: absolute;
+    bottom: -24px; left: 50%;
+    transform: translateX(-50%);
+    width: 3px; height: 6px;
+    background: #F5F2E8;
+  }
+  .cd-schedule {
+    background: rgba(245,242,232,0.08);
+    border: 1px solid rgba(245,242,232,0.15);
+    border-radius: 6px;
+    padding: 20px 22px;
+    position: relative;
+    z-index: 2;
+  }
+  .cd-schedule-title {
+    font-family: var(--sans);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    opacity: 0.6;
+    margin-bottom: 14px;
+  }
+  .cd-schedule-row {
+    display: flex; justify-content: space-between;
+    font-family: var(--sans);
+    font-size: 12px;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(245,242,232,0.10);
+  }
+  .cd-schedule-row:last-child { border-bottom: none; }
+  .cd-schedule-row .time { opacity: 0.65; font-variant-numeric: tabular-nums; }
+  /* Caption for Act 0 */
+  .cd-caption {
+    position: absolute;
+    bottom: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--sans);
+    font-size: 88px;
+    font-weight: 200;
+    letter-spacing: -0.035em;
+    color: var(--ink);
+    text-align: center;
+    opacity: 0;
+    z-index: 60;
+    text-shadow: 0 10px 50px rgba(0,0,0,0.9);
+    will-change: opacity, transform;
+  }
+  .cd-caption .period { color: var(--accent); }
+  /* Act 0.5 — pivot */
+  .act05 {
+    flex-direction: column;
+  }
+  .pivot-line {
+    font-family: var(--sans);
+    font-size: 112px;
+    font-weight: 200;
+    letter-spacing: -0.04em;
+    color: var(--ink);
+    text-align: center;
+    line-height: 1.05;
+    will-change: opacity, transform, font-variation-settings;
+  }
+  .pivot-line .accent { color: var(--accent); font-weight: inherit; }
+  .pivot-line .faint { color: var(--muted); }
+</style>
+</head>
+<body>
+<div class="stage" id="stage">
+  <div class="watermark" id="watermark">Created by Huashu-Design</div>
+  <!-- ========== Act 0: Claude Design 致敬 ========== -->
+  <div class="scene act0" id="act0ClaudeDesign">
+    <div class="cd-browser" id="cdBrowser">
+      <!-- Chrome bar -->
+      <div class="cd-chrome">
+        <div class="cd-traffic">
+          <span class="d r"></span><span class="d y"></span><span class="d g"></span>
+        </div>
+        <div class="cd-urlbar"><span class="lock"></span>claude.ai/design</div>
+        <div style="width: 56px;"></div>
+      </div>
+      <!-- Tabs row -->
+      <div class="cd-tabs-row">
+        <div class="cd-tab active"><span class="dot"></span>Company offsite html</div>
+        <div class="cd-tab">Dashboard exploration</div>
+        <div class="cd-tab">Landing v2</div>
+        <div class="cd-topbar-right">
+          <span>100%</span>
+          <span class="btn ghost">Export</span>
+          <span class="btn">Share</span>
+        </div>
+      </div>
+      <!-- Body: split chat + canvas -->
+      <div class="cd-body">
+        <div class="cd-chat">
+          <div class="cd-msg">
+            <div class="cd-avatar user">Y</div>
+            <div class="cd-bubble">Make a welcome guide for our company retreat.</div>
+          </div>
+          <div class="cd-msg">
+            <div class="cd-avatar claude">C</div>
+            <div class="cd-bubble">I've designed a 1-page landscape welcome guide for your planning day. It includes a branded cover with pine trees, a two-column schedule, and activity cards.<br/><br/><span class="dim">Toggle the Tweaks to adjust accent color, headline size, and density.</span></div>
+          </div>
+          <div class="cd-tweaks">
+            <div class="cd-tweaks-title">Tweaks</div>
+            <div class="cd-tweak-row">
+              <div class="cd-tweak-label">Accent</div>
+              <div class="cd-color-dots">
+                <div class="cd-color-dot" style="background:#2D4A3A;" id="cdDot1"></div>
+                <div class="cd-color-dot active" style="background:#D97757;" id="cdDot2"></div>
+                <div class="cd-color-dot" style="background:#3F5E8A;" id="cdDot3"></div>
+                <div class="cd-color-dot" style="background:#8B6F4A;" id="cdDot4"></div>
+              </div>
+            </div>
+            <div class="cd-tweak-row">
+              <div class="cd-tweak-label">Headline</div>
+              <div class="cd-tweak-track"><div class="cd-tweak-thumb" id="cdThumb1" style="left: 58%;"></div></div>
+            </div>
+            <div class="cd-tweak-row">
+              <div class="cd-tweak-label">Density</div>
+              <div class="cd-tweak-track"><div class="cd-tweak-thumb" id="cdThumb2" style="left: 40%;"></div></div>
+            </div>
+          </div>
+          <div class="cd-input">Describe what you want next…</div>
+        </div>
+        <div class="cd-canvas">
+          <div class="cd-poster" id="cdPoster">
+            <div class="cd-poster-left">
+              <div class="cd-poster-eyebrow">Anthropic Labs · Planning Day</div>
+              <div class="cd-poster-title">HEMLARK<br/>RETREAT '26</div>
+              <div class="cd-poster-sub">June 14 · Full Day<br/>Pine Valley Lodge</div>
+              <div class="cd-poster-pines">
+                <div class="cd-pine"></div>
+                <div class="cd-pine"></div>
+                <div class="cd-pine"></div>
+                <div class="cd-pine"></div>
+              </div>
+            </div>
+            <div class="cd-schedule">
+              <div class="cd-schedule-title">Schedule</div>
+              <div class="cd-schedule-row"><span>Breakfast</span><span class="time">9:00</span></div>
+              <div class="cd-schedule-row"><span>Kickoff</span><span class="time">10:00</span></div>
+              <div class="cd-schedule-row"><span>Workshops</span><span class="time">10:30</span></div>
+              <div class="cd-schedule-row"><span>Lunch</span><span class="time">12:30</span></div>
+              <div class="cd-schedule-row"><span>Hike</span><span class="time">14:00</span></div>
+              <div class="cd-schedule-row"><span>Dinner</span><span class="time">18:00</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="cd-caption" id="cdCaption">It's beautiful<span class="period">.</span></div>
+  </div>
+  <!-- ========== Act 0.5: Pivot ========== -->
+  <div class="scene act05" id="act05Pivot">
+    <div class="pivot-line" id="pivotLine">
+      But it isn't the <span class="accent">future</span>.
+    </div>
+  </div>
+  <!-- ========== Act 1 ========== -->
+  <div class="scene act1" id="act1a">
+    <div class="hero-line" id="heroLine">
+      Here's to the <span class="accent">Agents</span>.
+    </div>
+  </div>
+  <div class="scene act1" id="act1b">
+    <!-- "Not the ones who click." + abstract mouse -->
+    <div class="gui-glyph click" id="glyphClick" style="left: 50%; top: 62%; transform: translate(-50%, -50%);">
+      <svg viewBox="0 0 24 24" fill="none">
+        <path d="M4 2l6 18 3-8 8-3L4 2z" stroke="rgba(255,255,255,0.55)" stroke-width="1.4" fill="rgba(255,255,255,0.12)" stroke-linejoin="round"/>
+      </svg>
+    </div>
+    <div class="not-line" id="notLine1" style="position: absolute; top: 28%; left: 50%; transform: translateX(-50%); white-space: nowrap;">
+      Not the ones who <span class="strike">click</span>.
+    </div>
+  </div>
+  <div class="scene act1" id="act1c">
+    <!-- "Not the ones who drag." + slider -->
+    <div class="gui-glyph drag" id="glyphDrag" style="left: 50%; top: 62%; transform: translate(-50%, -50%);">
+      <div class="track">
+        <div class="fill"></div>
+        <div class="thumb" id="sliderThumb"></div>
+      </div>
+    </div>
+    <div class="not-line" id="notLine2" style="position: absolute; top: 28%; left: 50%; transform: translateX(-50%); white-space: nowrap;">
+      Not the ones who <span class="strike">drag</span>.
+    </div>
+  </div>
+  <div class="scene act1" id="act1d">
+    <!-- "Not the ones who wait..." + folder window -->
+    <div class="gui-glyph folder" id="glyphFolder" style="left: 50%; top: 62%; transform: translate(-50%, -50%);">
+      <div class="head">
+        <span class="d"></span><span class="d"></span><span class="d"></span>
+      </div>
+      <div class="row"><span>design-v1.fig</span><span class="meta">42 KB</span></div>
+      <div class="row"><span>design-v2-final.fig</span><span class="meta">58 KB</span></div>
+      <div class="row"><span>design-v2-FINAL-final.fig</span><span class="meta">61 KB</span></div>
+      <div class="row"><span>design-v3.fig</span><span class="meta">65 KB</span></div>
+    </div>
+    <div class="not-line" id="notLine3" style="position: absolute; top: 22%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 72px;">
+      Not the ones who <span class="strike">wait for you to open the file</span>.
+    </div>
+  </div>
+  <!-- ========== Act 2 ========== -->
+  <div class="scene act2" id="act2Terminal">
+    <div class="terminal" id="terminal">
+      <div class="tty-head">
+        <span class="d red"></span>
+        <span class="d yellow"></span>
+        <span class="d green"></span>
+        <span class="tty-title">huashu — claude code</span>
+      </div>
+      <div class="tty-body">
+        <span class="prompt">$</span><span class="typed" id="typed"></span><span class="cursor" id="cursor"></span>
+      </div>
+    </div>
+  </div>
+  <div class="scene" id="act2Gallery">
+    <div class="gallery-viewport">
+      <div class="gallery-canvas" id="galleryCanvas"></div>
+    </div>
+  </div>
+  <div class="over-statement" id="overStmt1">
+    <div class="text">The ones who design<br/>while you <span class="accent">sleep</span>.</div>
+  </div>
+  <div class="over-statement" id="overStmt2">
+    <div class="text">The ones who ship<br/>while you're in a <span class="accent">meeting</span>.</div>
+  </div>
+  <!-- ========== Act 3 ========== -->
+  <div class="scene act3" id="act3Medium">
+    <div class="statement-big" id="stmtMedium">
+      <span class="accent">Agent</span> is the<br/>new medium.
+    </div>
+  </div>
+  <div class="scene act3" id="act3Brand">
+    <div class="brand-wordmark" id="wordmark">huashu<span class="accent">-</span>design</div>
+    <div class="farewell-quote" id="farewell">For them, we built this.</div>
+    <div class="farewell-cn" id="farewellCn">· 为 他 们 · 我 们 造 了 这 个 ·</div>
+    <div class="brand-url" id="url">huasheng.ai/huashu-design-hero</div>
+  </div>
+</div>
+<script>
+(function() {
+  // ---------- Fit stage ----------
+  const stage = document.getElementById('stage');
+  function rescale() {
+    const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
+    stage.style.transform = `translate(-50%, -50%) scale(${s})`;
+  }
+  rescale();
+  window.addEventListener('resize', rescale);
+  const SLIDE_FILES = [
+    'preview-01-cover.png','preview-02-quote.png','preview-03-intro.png','preview-04-toc.png',
+    'preview-05-divider-1.png','preview-06-seldon.png','preview-07-human-psych-limit.png','preview-08-ai-vs-human.png',
+    'preview-09-divider-2.png','preview-10-personas.png','preview-11-four-puzzles.png','preview-12-phenomena-1-2.png',
+    'preview-13-phenomena-3-4.png','preview-14-five-voices.png','preview-15-divider-3.png','preview-16-persona-selection.png',
+    'preview-17-persona-space.png','preview-18-emergent-misalignment.png','preview-19-inoculation.png','preview-20-emotion.png',
+    'preview-21-dosage.png','preview-22-steering.png','preview-23-expression-vs-impact.png','preview-24-concept-injection.png',
+    'preview-25-consciousness-prob.png','preview-26-divider-4.png','preview-27-cot-faithfulness.png','preview-28-alignment-faking.png',
+    'preview-29-divider-5.png','preview-30-open-questions.png','preview-31-giving-back.png','preview-32-closing.png',
+  ];
+  const BASE = '../../../2026.04-AI心理学/演讲PPT-北大/';
+  // ---------- Build gallery ----------
+  const COLS = 8, ROWS = 6, COUNT = COLS * ROWS;
+  const galleryCanvas = document.getElementById('galleryCanvas');
+  const galleryCards = [];
+  for (let i = 0; i < COUNT; i++) {
+    const slideIdx = i % 32;
+    const card = document.createElement('div');
+    card.className = 'gallery-card';
+    const zIdx = Math.sin(i * 1.7) * 22 + Math.cos(i * 0.73) * 14;
+    if (zIdx > 12) card.classList.add('depth-near');
+    else if (zIdx < -12) card.classList.add('depth-far');
+    const img = document.createElement('img');
+    img.src = BASE + SLIDE_FILES[slideIdx];
+    img.onerror = () => { img.src = BASE + 'preview-01-cover.png'; };
+    card.appendChild(img);
+    galleryCanvas.appendChild(card);
+    galleryCards.push(card);
+  }
+  for (let i = 0; i < 32; i++) {
+    const im = new Image();
+    im.src = BASE + SLIDE_FILES[i];
+  }
+  // ---------- Easings ----------
+  const easeOut = t => 1 - Math.pow(1 - t, 3);
+  const expoOut = t => (t <= 0) ? 0 : (t >= 1) ? 1 : 1 - Math.pow(2, -10 * t);
+  const easeInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;
+  function lerp(time, start, end, fromV, toV, easing) {
+    if (time <= start) return fromV;
+    if (time >= end) return toV;
+    let p = (time - start) / (end - start);
+    if (easing) p = easing(p);
+    return fromV + (toV - fromV) * p;
+  }
+  function clampLerp(time, start, end) {
+    if (time <= start) return 0;
+    if (time >= end) return 1;
+    return (time - start) / (end - start);
+  }
+  // ---------- Timeline (30s) ----------
+  const T = {
+    DURATION: 30.0,
+    // ===== Act 0: Claude Design 致敬 (0 - 4s) =====
+    a0_in:   [0.3, 1.2],       // browser fade + scale in
+    a0_hold: [1.2, 3.4],       // tweaks 自动动
+    a0_out:  [3.4, 4.0],       // browser 退场
+    cd_tweak_anim: [1.4, 3.3], // tweaks thumb 自动拖动窗口
+    cd_accent_switch: [2.1, 2.5], // accent color dot 切换到深绿
+    cd_caption_in:  [1.6, 2.2],
+    cd_caption_hold:[2.2, 3.3],
+    cd_caption_out: [3.3, 3.8],
+    // ===== Act 0.5: Pivot (3.9 - 5.2s) =====
+    a05_in:   [3.9, 4.6],
+    a05_hold: [4.6, 4.9],
+    a05_out:  [4.9, 5.3],
+    // ===== Act 1 (shifted +5s) =====
+    a1a_in:  [5.3, 6.3],       // "Here's to the Agents."
+    a1a_hold:[6.3, 7.8],
+    a1a_out: [7.8, 8.3],
+    a1b_in:  [8.2, 8.9],       // "Not the ones who click."
+    a1b_hold:[8.9, 10.3],
+    a1b_out: [10.3, 10.8],
+    a1c_in:  [10.7, 11.3],     // "Not the ones who drag."
+    a1c_hold:[11.3, 12.5],
+    a1c_out: [12.5, 13.0],
+    a1d_in:  [12.9, 13.5],     // "Not the ones who wait..."
+    a1d_hold:[13.5, 15.2],
+    a1d_out: [15.2, 15.7],
+    // ===== Act 2 (shifted +5s) =====
+    a2tty_in: [15.6, 16.2],    // terminal in
+    a2type:   [16.4, 18.6],
+    a2tty_out:[18.9, 19.4],
+    a2gal_in: [19.1, 19.9],    // gallery ripple start
+    ripple:   [19.9, 21.6],
+    panStart: 20.2,
+    a2gal_out:[25.5, 26.2],
+    // Overlay statements on gallery
+    stmt1:    [21.7, 23.4],    // "design while you sleep"
+    stmt2:    [23.7, 25.4],    // "ship while you're in a meeting"
+    // ===== Act 3 (shifted +5s) =====
+    a3med_in: [26.1, 27.0],    // "Agent is the new medium"
+    a3med_hold:[27.0, 28.0],
+    a3med_out:[28.0, 28.4],
+    a3brand_in:  [28.3, 29.0],
+    brand_morph: [28.7, 29.4],
+    a3farewell_in: [29.0, 29.6],
+    a3cn_in: [29.3, 29.8],
+    a3url_in: [29.5, 30.0],
+  };
+  // ---------- Elements ----------
+  const scenes = {
+    a0: document.getElementById('act0ClaudeDesign'),
+    a05: document.getElementById('act05Pivot'),
+    a1a: document.getElementById('act1a'),
+    a1b: document.getElementById('act1b'),
+    a1c: document.getElementById('act1c'),
+    a1d: document.getElementById('act1d'),
+    a2tty: document.getElementById('act2Terminal'),
+    a2gal: document.getElementById('act2Gallery'),
+    a3med: document.getElementById('act3Medium'),
+    a3brand: document.getElementById('act3Brand'),
+  };
+  const cdBrowser = document.getElementById('cdBrowser');
+  const cdCaption = document.getElementById('cdCaption');
+  const cdThumb1 = document.getElementById('cdThumb1');
+  const cdThumb2 = document.getElementById('cdThumb2');
+  const cdDot1 = document.getElementById('cdDot1');
+  const cdDot2 = document.getElementById('cdDot2');
+  const cdPoster = document.getElementById('cdPoster');
+  const pivotLine = document.getElementById('pivotLine');
+  const overs = {
+    stmt1: document.getElementById('overStmt1'),
+    stmt2: document.getElementById('overStmt2'),
+  };
+  const heroLine = document.getElementById('heroLine');
+  const notLine1 = document.getElementById('notLine1');
+  const notLine2 = document.getElementById('notLine2');
+  const notLine3 = document.getElementById('notLine3');
+  const glyphClick = document.getElementById('glyphClick');
+  const glyphDrag = document.getElementById('glyphDrag');
+  const sliderThumb = document.getElementById('sliderThumb');
+  const glyphFolder = document.getElementById('glyphFolder');
+  const terminal = document.getElementById('terminal');
+  const typed = document.getElementById('typed');
+  const cursor = document.getElementById('cursor');
+  const stmtMedium = document.getElementById('stmtMedium');
+  const wordmark = document.getElementById('wordmark');
+  const farewell = document.getElementById('farewell');
+  const farewellCn = document.getElementById('farewellCn');
+  const urlEl = document.getElementById('url');
+  const watermark = document.getElementById('watermark');
+  const COMMAND = '/huashu-design 做一份发布会PPT';
+  // ---------- Gallery transforms ----------
+  const GALLERY_TILT = 'perspective(2400px) rotateX(14deg) rotateY(-10deg) rotateZ(-2deg)';
+  const GALLERY_SCALE = 0.94;
+  function galleryTransform(dx, dy, extraScale = 1) {
+    return `translate(-50%, -50%) translate(${dx}px, ${dy}px) scale(${GALLERY_SCALE * extraScale}) ${GALLERY_TILT}`;
+  }
+  // ---------- Helpers to show/hide scenes ----------
+  function showScene(key, opacity) {
+    const el = scenes[key];
+    if (opacity > 0.001) el.classList.add('visible');
+    else el.classList.remove('visible');
+    el.style.opacity = opacity;
+  }
+  function showOver(key, opacity) {
+    const el = overs[key];
+    el.style.opacity = opacity;
+  }
+  // ---------- Render ----------
+  function render(t) {
+    // ============ Act 0: Claude Design 致敬 ============
+    if (t < T.a0_out[1]) {
+      let op;
+      if (t < T.a0_in[1]) op = lerp(t, T.a0_in[0], T.a0_in[1], 0, 1, expoOut);
+      else if (t < T.a0_out[0]) op = 1;
+      else op = lerp(t, T.a0_out[0], T.a0_out[1], 1, 0, easeOut);
+      showScene('a0', op);
+      // Browser: subtle breathing scale + exit shrink
+      const scaleIn = lerp(t, T.a0_in[0], T.a0_in[1], 0.94, 1.0, expoOut);
+      let scaleOut = 1.0;
+      let blurOut = 0;
+      if (t >= T.a0_out[0]) {
+        const p = clampLerp(t, T.a0_out[0], T.a0_out[1]);
+        scaleOut = 1.0 - 0.08 * p;
+        blurOut = 6 * p;
+      }
+      const finalScale = Math.min(scaleIn, scaleOut);
+      cdBrowser.style.transform = `translate(-50%, -50%) scale(${finalScale})`;
+      cdBrowser.style.filter = blurOut > 0.1 ? `blur(${blurOut}px)` : '';
+      // Tweaks thumb 自动拖动（模拟用户在调节）
+      const tw = clampLerp(t, T.cd_tweak_anim[0], T.cd_tweak_anim[1]);
+      // Headline slider: 58% → 72% → 62%
+      let headlinePct;
+      if (tw < 0.5) headlinePct = 58 + (72 - 58) * easeInOut(tw * 2);
+      else headlinePct = 72 + (62 - 72) * easeInOut((tw - 0.5) * 2);
+      cdThumb1.style.left = headlinePct + '%';
+      // Density slider: 40% → 55%
+      const densityPct = 40 + 15 * easeInOut(tw);
+      cdThumb2.style.left = densityPct + '%';
+      // Accent 从橙切换到深绿（模拟用户在选色）
+      const switched = t >= T.cd_accent_switch[0];
+      if (switched) {
+        cdDot1.classList.add('active');
+        cdDot2.classList.remove('active');
+        // Poster 颜色跟着变
+        cdPoster.style.background = 'var(--cd-green)';
+      } else {
+        cdDot1.classList.remove('active');
+        cdDot2.classList.add('active');
+        cdPoster.style.background = '#B85D3D';
+      }
+      // Caption "It's beautiful."
+      let capOp = 0;
+      if (t >= T.cd_caption_in[0] && t < T.cd_caption_out[1]) {
+        if (t < T.cd_caption_in[1]) capOp = clampLerp(t, T.cd_caption_in[0], T.cd_caption_in[1]);
+        else if (t < T.cd_caption_out[0]) capOp = 1;
+        else capOp = 1 - clampLerp(t, T.cd_caption_out[0], T.cd_caption_out[1]);
+      }
+      const capRise = lerp(t, T.cd_caption_in[0], T.cd_caption_in[1], 14, 0, expoOut);
+      cdCaption.style.opacity = capOp;
+      cdCaption.style.transform = `translateX(-50%) translateY(${capRise}px)`;
+    } else {
+      showScene('a0', 0);
+    }
+    // ============ Act 0.5: Pivot — "But it isn't the future." ============
+    if (t >= T.a05_in[0] - 0.1 && t < T.a05_out[1]) {
+      let op;
+      if (t < T.a05_in[1]) op = lerp(t, T.a05_in[0], T.a05_in[1], 0, 1, expoOut);
+      else if (t < T.a05_out[0]) op = 1;
+      else op = lerp(t, T.a05_out[0], T.a05_out[1], 1, 0, easeOut);
+      showScene('a05', op);
+      const rise = lerp(t, T.a05_in[0], T.a05_in[1], 16, 0, expoOut);
+      pivotLine.style.transform = `translate3d(0, ${rise}px, 0)`;
+      // Subtle weight morph on "But it isn't the future."
+      const morph = expoOut(clampLerp(t, T.a05_in[0], T.a05_in[1] + 0.3));
+      const w = 120 + (300 - 120) * morph;
+      pivotLine.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
+      pivotLine.style.fontWeight = Math.round(w);
+    } else {
+      showScene('a05', 0);
+    }
+    // ============ Act 1a: "Here's to the Agents." ============
+    if (t >= T.a1a_in[0] - 0.1 && t < T.a1a_out[1]) {
+      let op;
+      if (t < T.a1a_in[1]) op = lerp(t, T.a1a_in[0], T.a1a_in[1], 0, 1, expoOut);
+      else if (t < T.a1a_out[0]) op = 1;
+      else op = lerp(t, T.a1a_out[0], T.a1a_out[1], 1, 0, easeOut);
+      showScene('a1a', op);
+      // Weight morph 100 → 400 on "Here's to the Agents."
+      const morph = expoOut(clampLerp(t, T.a1a_in[0], T.a1a_in[1] + 0.6));
+      const w = 100 + (400 - 100) * morph;
+      heroLine.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
+      heroLine.style.fontWeight = Math.round(w);
+      // Subtle rise
+      const rise = lerp(t, T.a1a_in[0], T.a1a_in[1], 18, 0, expoOut);
+      heroLine.style.transform = `translate3d(0, ${rise}px, 0)`;
+    } else {
+      showScene('a1a', 0);
+    }
+    // ============ Act 1b: Not the ones who click. ============
+    if (t >= T.a1b_in[0] - 0.1 && t < T.a1b_out[1]) {
+      let op;
+      if (t < T.a1b_in[1]) op = lerp(t, T.a1b_in[0], T.a1b_in[1], 0, 1, expoOut);
+      else if (t < T.a1b_out[0]) op = 1;
+      else op = lerp(t, T.a1b_out[0], T.a1b_out[1], 1, 0, easeOut);
+      showScene('a1b', op);
+      // Animate the click glyph: appear, then trigger click ring + shake
+      const glyphIn = clampLerp(t, T.a1b_in[0] + 0.15, T.a1b_in[1]);
+      glyphClick.style.opacity = expoOut(glyphIn);
+      // Shake at mid-hold
+      const clickT = t - (T.a1b_in[1] + 0.3);
+      if (clickT > 0 && clickT < 0.4) {
+        glyphClick.style.transform = `translate(-50%, -50%) translate(${Math.sin(clickT * 60) * 3}px, 0)`;
+      } else {
+        glyphClick.style.transform = `translate(-50%, -50%)`;
+      }
+      // Strike the word "click" at halfway through hold
+      const strikeOn = t >= T.a1b_in[1] + 0.5;
+      notLine1.classList.toggle('struck', strikeOn);
+    } else {
+      showScene('a1b', 0);
+      glyphClick.style.opacity = 0;
+    }
+    // ============ Act 1c: Not the ones who drag. ============
+    if (t >= T.a1c_in[0] - 0.1 && t < T.a1c_out[1]) {
+      let op;
+      if (t < T.a1c_in[1]) op = lerp(t, T.a1c_in[0], T.a1c_in[1], 0, 1, expoOut);
+      else if (t < T.a1c_out[0]) op = 1;
+      else op = lerp(t, T.a1c_out[0], T.a1c_out[1], 1, 0, easeOut);
+      showScene('a1c', op);
+      const glyphIn = clampLerp(t, T.a1c_in[0] + 0.15, T.a1c_in[1]);
+      glyphDrag.style.opacity = expoOut(glyphIn);
+      // Animate slider thumb 30% → 70% position during hold
+      const dragT = clampLerp(t, T.a1c_hold[0], T.a1c_hold[1] - 0.2);
+      const leftPct = 30 + 40 * easeInOut(dragT);
+      sliderThumb.style.left = leftPct + '%';
+      const fillEl = glyphDrag.querySelector('.fill');
+      if (fillEl) fillEl.style.width = leftPct + '%';
+    } else {
+      showScene('a1c', 0);
+      glyphDrag.style.opacity = 0;
+    }
+    // ============ Act 1d: Not the ones who wait for you to open the file. ============
+    if (t >= T.a1d_in[0] - 0.1 && t < T.a1d_out[1]) {
+      let op;
+      if (t < T.a1d_in[1]) op = lerp(t, T.a1d_in[0], T.a1d_in[1], 0, 1, expoOut);
+      else if (t < T.a1d_out[0]) op = 1;
+      else op = lerp(t, T.a1d_out[0], T.a1d_out[1], 1, 0, easeOut);
+      showScene('a1d', op);
+      const glyphIn = clampLerp(t, T.a1d_in[0] + 0.15, T.a1d_in[1]);
+      glyphFolder.style.opacity = expoOut(glyphIn);
+    } else {
+      showScene('a1d', 0);
+      glyphFolder.style.opacity = 0;
+    }
+    // ============ Act 2 Terminal ============
+    if (t >= T.a2tty_in[0] - 0.1 && t < T.a2tty_out[1]) {
+      let op;
+      if (t < T.a2tty_in[1]) op = lerp(t, T.a2tty_in[0], T.a2tty_in[1], 0, 1, expoOut);
+      else if (t < T.a2tty_out[0]) op = 1;
+      else op = lerp(t, T.a2tty_out[0], T.a2tty_out[1], 1, 0, easeOut);
+      showScene('a2tty', op);
+      const rise = lerp(t, T.a2tty_in[0], T.a2tty_in[1], 28, 0, expoOut);
+      terminal.style.transform = `translate3d(0, ${rise}px, 0)`;
+      // Typing
+      if (t < T.a2type[0]) typed.textContent = '';
+      else if (t < T.a2type[1]) {
+        const p = (t - T.a2type[0]) / (T.a2type[1] - T.a2type[0]);
+        const n = Math.floor(p * COMMAND.length);
+        typed.textContent = COMMAND.slice(0, n);
+      } else typed.textContent = COMMAND;
+      cursor.style.opacity = (Math.floor(t * 2.5) % 2 === 0) ? 1 : 0.25;
+    } else {
+      showScene('a2tty', 0);
+    }
+    // ============ Act 2 Gallery + statements ============
+    if (t >= T.a2gal_in[0] - 0.1 && t < T.a2gal_out[1]) {
+      let op;
+      if (t < T.a2gal_in[1]) op = lerp(t, T.a2gal_in[0], T.a2gal_in[1], 0, 1, expoOut);
+      else if (t < T.a2gal_out[0]) op = 1;
+      else op = lerp(t, T.a2gal_out[0], T.a2gal_out[1], 1, 0, easeOut);
+      showScene('a2gal', op);
+      // Pan
+      const panT = Math.max(0, t - T.panStart);
+      const panX = Math.sin(panT * 0.12) * 180 - panT * 6;
+      const panY = Math.cos(panT * 0.09) * 100 - panT * 4;
+      const cX = Math.max(-600, Math.min(600, panX));
+      const cY = Math.max(-400, Math.min(400, panY));
+      // Ripple
+      const inRipple = t < T.ripple[1];
+      const rippleP = clampLerp(t, T.ripple[0], T.ripple[1]);
+      const galScale = inRipple ? (1.25 - 0.31 * expoOut(rippleP)) : 1.0;
+      galleryCanvas.style.transform = galleryTransform(cX, cY, galScale);
+      // Per-card ripple entry
+      galleryCards.forEach((card, i) => {
+        let entryOp = 1;
+        if (inRipple) {
+          const col = i % COLS, row = Math.floor(i / COLS);
+          const dc = col - (COLS - 1) / 2, dr = row - (ROWS - 1) / 2;
+          const dist = Math.sqrt(dc * dc + dr * dr);
+          const maxDist = Math.sqrt(((COLS - 1) / 2) ** 2 + ((ROWS - 1) / 2) ** 2);
+          const delay = (dist / maxDist) * 0.8;
+          const localT = Math.max(0, (t - T.ripple[0] - delay) / 0.7);
+          entryOp = expoOut(Math.min(1, localT));
+        }
+        // Dim when statements are active
+        const stmt1Active = t >= T.stmt1[0] && t < T.stmt1[1];
+        const stmt2Active = t >= T.stmt2[0] && t < T.stmt2[1];
+        const dimAmount = stmt1Active || stmt2Active ? 0.55 : 0;
+        if (dimAmount > 0) {
+          card.style.opacity = entryOp * (1 - dimAmount);
+          card.style.filter = `brightness(${1 - 0.3 * dimAmount}) saturate(${1 - 0.4 * dimAmount})`;
+        } else {
+          card.style.opacity = entryOp < 1 ? entryOp : '';
+          card.style.filter = '';
+        }
+      });
+    } else {
+      showScene('a2gal', 0);
+    }
+    // Overlay statement 1: "design while you sleep"
+    {
+      let op = 0;
+      if (t >= T.stmt1[0] && t < T.stmt1[1]) {
+        const inP = expoOut(clampLerp(t, T.stmt1[0], T.stmt1[0] + 0.4));
+        const outP = easeOut(clampLerp(t, T.stmt1[1] - 0.4, T.stmt1[1]));
+        op = inP * (1 - outP);
+      }
+      showOver('stmt1', op);
+    }
+    // Overlay statement 2: "ship while meeting"
+    {
+      let op = 0;
+      if (t >= T.stmt2[0] && t < T.stmt2[1]) {
+        const inP = expoOut(clampLerp(t, T.stmt2[0], T.stmt2[0] + 0.4));
+        const outP = easeOut(clampLerp(t, T.stmt2[1] - 0.4, T.stmt2[1]));
+        op = inP * (1 - outP);
+      }
+      showOver('stmt2', op);
+    }
+    // ============ Act 3 Medium ============
+    if (t >= T.a3med_in[0] - 0.1 && t < T.a3med_out[1]) {
+      let op;
+      if (t < T.a3med_in[1]) op = lerp(t, T.a3med_in[0], T.a3med_in[1], 0, 1, expoOut);
+      else if (t < T.a3med_out[0]) op = 1;
+      else op = lerp(t, T.a3med_out[0], T.a3med_out[1], 1, 0, easeOut);
+      showScene('a3med', op);
+      const morph = expoOut(clampLerp(t, T.a3med_in[0], T.a3med_in[1] + 0.4));
+      const w = 100 + (300 - 100) * morph;
+      stmtMedium.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
+      stmtMedium.style.fontWeight = Math.round(w);
+      const rise = lerp(t, T.a3med_in[0], T.a3med_in[1], 24, 0, expoOut);
+      stmtMedium.style.transform = `translate3d(0, ${rise}px, 0)`;
+    } else {
+      showScene('a3med', 0);
+    }
+    // ============ Act 3 Brand ============
+    if (t >= T.a3brand_in[0] - 0.1) {
+      const op = clampLerp(t, T.a3brand_in[0], T.a3brand_in[1]);
+      showScene('a3brand', op);
+      // Wordmark weight morph
+      const morphP = expoOut(clampLerp(t, T.brand_morph[0], T.brand_morph[1]));
+      const wght = 100 + (700 - 100) * morphP;
+      wordmark.style.fontVariationSettings = `"wght" ${wght.toFixed(0)}`;
+      wordmark.style.fontWeight = Math.round(wght);
+      const wRise = lerp(t, T.a3brand_in[0], T.a3brand_in[1], 20, 0, expoOut);
+      wordmark.style.transform = `translate3d(0, ${wRise}px, 0)`;
+      // Farewell quote
+      const fOp = clampLerp(t, T.a3farewell_in[0], T.a3farewell_in[1]);
+      const fRise = lerp(t, T.a3farewell_in[0], T.a3farewell_in[1], 12, 0, expoOut);
+      farewell.style.opacity = fOp;
+      farewell.style.transform = `translate3d(0, ${fRise}px, 0)`;
+      // CN subtitle
+      const cnOp = clampLerp(t, T.a3cn_in[0], T.a3cn_in[1]);
+      farewellCn.style.opacity = cnOp;
+      // URL
+      const uOp = clampLerp(t, T.a3url_in[0], T.a3url_in[1]);
+      urlEl.style.opacity = uOp;
+    } else {
+      showScene('a3brand', 0);
+    }
+    // Watermark: visible during Act 2-3
+    if (t >= T.a2tty_in[0] && t < T.DURATION - 0.2) {
+      watermark.classList.add('visible');
+    } else {
+      watermark.classList.remove('visible');
+    }
+  }
+  // ---------- Driver ----------
+  let manualT = null;
+  let startMs = null;
+  let hasFinishedOnce = false;
+  function tick(now) {
+    if (manualT != null) render(manualT);
+    else {
+      if (startMs == null) startMs = now;
+      const elapsed = (now - startMs) / 1000;
+      const recording = window.__recording === true;
+      let t;
+      if (recording) {
+        // Non-looping: clamp at DURATION, hold on final frame
+        t = Math.min(elapsed, T.DURATION - 0.001);
+        if (elapsed >= T.DURATION && !hasFinishedOnce) hasFinishedOnce = true;
+      } else {
+        t = elapsed % T.DURATION;
+      }
+      render(t);
+    }
+    requestAnimationFrame(tick);
+  }
+  requestAnimationFrame(tick);
+  // For frame-accurate rendering
+  window.__setTime = function(t) {
+    manualT = t;
+    render(t);
+  };
+  window.__resume = function() { manualT = null; startMs = null; };
+  window.__duration = T.DURATION;
+  window.__render = render;
+  window.__ready = true;
+})();
+</script>
+</body>
+</html>