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/c2-slides-pptx-en.html ADDED Viewed

@@ -0,0 +1,1055 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>c2-slides-pptx · English · v2</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;
+    --accent-deep: #B85D3D;
+    --cd-bg: #F5F4F0;
+    --cd-panel: #FFFFFF;
+    --cd-ink: #1A1918;
+    --cd-dim: #8B867E;
+    --cd-hair: rgba(0,0,0,0.08);
+    --serif-cn: "Source Serif 4", Georgia, serif;
+    --serif-en: "Source Serif 4", Georgia, serif;
+    --sans: "Inter", -apple-system, 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;
+  }
+  /* Film grain (2% opacity) */
+  .stage::after {
+    content: '';
+    position: absolute; inset: 0;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+    opacity: 0.025;
+    pointer-events: none;
+    mix-blend-mode: overlay;
+    z-index: 200;
+  }
+  .watermark-tl {
+    position: absolute;
+    top: 40px; left: 56px;
+    font-family: var(--mono);
+    font-size: 14px;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.16);
+    z-index: 180;
+    pointer-events: none;
+  }
+  /* ====== Beat 1: browser-fullscreen deck ====== */
+  .beat1 {
+    position: absolute; inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+  }
+  .deck-window {
+    width: 1400px;
+    height: 788px;
+    border-radius: 14px;
+    background: #101010;
+    border: 1px solid var(--hairline);
+    box-shadow: 0 40px 120px -30px rgba(217,119,87,0.18),
+                0 0 0 1px rgba(255,255,255,0.03);
+    position: relative;
+    will-change: transform, opacity;
+  }
+  .deck-window .deck-body-wrap {
+    position: absolute;
+    top: 44px; left: 0; right: 0; bottom: 0;
+    border-radius: 0 0 14px 14px;
+    overflow: hidden;
+    background: #0A0A0A;
+  }
+  .deck-chrome {
+    height: 44px;
+    background: #161616;
+    border-bottom: 1px solid var(--hairline);
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    gap: 14px;
+  }
+  .deck-chrome .traffic {
+    display: flex; gap: 8px;
+  }
+  .deck-chrome .traffic .d {
+    width: 11px; height: 11px; border-radius: 50%;
+    background: var(--hairline);
+  }
+  .deck-chrome .url {
+    flex: 1;
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--muted);
+    letter-spacing: 0.02em;
+  }
+  .deck-chrome .page-count {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--accent);
+    letter-spacing: 0.08em;
+    min-width: 60px;
+    text-align: right;
+  }
+  .deck-slide {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%;
+    height: 100%;
+    background: #0A0A0A;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 96px 120px;
+    will-change: transform, opacity;
+  }
+  .deck-slide .eyebrow {
+    font-family: var(--mono);
+    font-size: 14px;
+    color: var(--accent);
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
+    margin-bottom: 24px;
+  }
+  .deck-slide h1 {
+    font-family: var(--serif-cn);
+    font-size: 92px;
+    font-weight: 500;
+    line-height: 1.08;
+    color: var(--ink);
+    margin: 0 0 28px 0;
+    letter-spacing: -0.01em;
+  }
+  .deck-slide .sub {
+    font-family: var(--sans);
+    font-size: 22px;
+    color: var(--ink-60);
+    line-height: 1.5;
+    max-width: 780px;
+  }
+  .deck-slide .hairline {
+    margin-top: 48px;
+    width: 80px;
+    height: 2px;
+    background: var(--accent);
+  }
+  /* Key press indicator — sits below the window */
+  .key-hint {
+    position: absolute;
+    top: calc(50% + 440px);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--muted);
+    letter-spacing: 0.14em;
+    opacity: 0;
+    will-change: opacity;
+    z-index: 30;
+  }
+  .key-hint .kbd {
+    display: inline-flex;
+    align-items: center; justify-content: center;
+    width: 36px; height: 36px;
+    border: 1px solid var(--hairline);
+    border-radius: 6px;
+    background: rgba(255,255,255,0.04);
+    color: var(--ink-80);
+    font-size: 14px;
+    will-change: background, color, transform;
+  }
+  /* ====== Beat 2: split screen — HTML left, PowerPoint right ====== */
+  .beat2 {
+    position: absolute; inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 56px;
+    opacity: 0;
+    padding: 0 96px;
+    will-change: opacity;
+  }
+  .split-window {
+    width: 820px;
+    height: 580px;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    will-change: transform, opacity;
+  }
+  /* Left: HTML deck shrunk */
+  .split-left {
+    background: #0A0A0A;
+    border: 1px solid var(--hairline);
+    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
+  }
+  .split-left .mini-chrome {
+    height: 30px;
+    background: #161616;
+    border-bottom: 1px solid var(--hairline);
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    gap: 8px;
+  }
+  .split-left .mini-chrome .d {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--hairline);
+  }
+  .split-left .mini-chrome .label {
+    margin-left: 10px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--muted);
+    letter-spacing: 0.08em;
+  }
+  .split-left .mini-slide {
+    padding: 56px 64px;
+    height: calc(100% - 30px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .split-left .mini-eye {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--accent);
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+  }
+  .split-left .mini-title {
+    font-family: var(--serif-cn);
+    font-size: 54px;
+    font-weight: 500;
+    line-height: 1.1;
+    color: var(--ink);
+    letter-spacing: -0.01em;
+  }
+  .split-left .mini-sub {
+    margin-top: 20px;
+    font-family: var(--sans);
+    font-size: 15px;
+    color: var(--ink-60);
+    line-height: 1.5;
+  }
+  .split-left .mini-hair {
+    margin-top: 28px;
+    width: 52px; height: 2px;
+    background: var(--accent);
+  }
+  /* Right: PowerPoint chrome */
+  .split-right {
+    background: #F3F2EE;
+    border: 1px solid rgba(0,0,0,0.2);
+    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
+  }
+  .ppt-titlebar {
+    height: 32px;
+    background: #C44A36;
+    display: flex;
+    align-items: center;
+    padding: 0 14px;
+    gap: 10px;
+    color: #fff;
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+  .ppt-titlebar .pp-logo {
+    width: 18px; height: 18px;
+    background: #fff;
+    border-radius: 2px;
+    display: inline-flex;
+    align-items: center; justify-content: center;
+    color: #C44A36;
+    font-weight: 700;
+    font-size: 11px;
+    font-family: var(--sans);
+  }
+  .ppt-titlebar .title-text { opacity: 0.92; }
+  .ppt-titlebar .win-dots {
+    margin-left: auto;
+    display: flex; gap: 10px;
+    opacity: 0.7;
+  }
+  .ppt-titlebar .win-dots span {
+    width: 10px; height: 10px; border: 1px solid rgba(255,255,255,0.7);
+    border-radius: 1px;
+  }
+  .ppt-toolbar {
+    height: 40px;
+    background: #EAE8E3;
+    border-bottom: 1px solid rgba(0,0,0,0.08);
+    display: flex;
+    align-items: center;
+    padding: 0 14px;
+    gap: 14px;
+    font-family: var(--sans);
+    font-size: 12px;
+    color: #4A4843;
+  }
+  .ppt-toolbar .tool {
+    display: flex; align-items: center; gap: 6px;
+    padding: 4px 10px;
+    border-radius: 4px;
+  }
+  .ppt-toolbar .tool.active {
+    background: #fff;
+    border: 1px solid rgba(0,0,0,0.08);
+    color: var(--cd-ink);
+  }
+  .ppt-toolbar .tool .ico {
+    width: 14px; height: 14px;
+    border: 1px solid currentColor;
+    border-radius: 2px;
+    opacity: 0.7;
+  }
+  .ppt-toolbar .font-name {
+    padding: 4px 10px;
+    background: #fff;
+    border: 1px solid rgba(0,0,0,0.12);
+    border-radius: 3px;
+    min-width: 140px;
+    font-size: 12px;
+    color: var(--cd-ink);
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .ppt-toolbar .divider {
+    width: 1px; height: 20px;
+    background: rgba(0,0,0,0.08);
+  }
+  /* PPT canvas (the actual slide) */
+  .ppt-canvas {
+    height: calc(100% - 32px - 40px);
+    background: #D8D4CB;
+    padding: 24px;
+    position: relative;
+    overflow: hidden;
+  }
+  .ppt-slide {
+    background: #0A0A0A;
+    border-radius: 3px;
+    width: 100%;
+    height: 100%;
+    padding: 56px 64px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+  }
+  .ppt-slide .ppt-eye {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--accent);
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+  }
+  .ppt-slide .ppt-title-frame {
+    position: relative;
+    display: inline-block;
+    padding: 6px 10px;
+    margin: -6px -10px;
+    border-radius: 2px;
+    transition: box-shadow 0.12s ease;
+    align-self: flex-start;
+    max-width: fit-content;
+    min-width: 160px;
+  }
+  .ppt-slide .ppt-title-frame.selected {
+    box-shadow:
+      0 0 0 1px rgba(217,119,87,0.0),
+      inset 0 0 0 0 rgba(217,119,87,0.0);
+  }
+  .ppt-slide .ppt-title-frame.editing {
+    box-shadow:
+      0 0 0 1.5px var(--accent),
+      0 0 0 3px rgba(217,119,87,0.2);
+  }
+  .ppt-slide .ppt-title {
+    font-family: var(--serif-cn);
+    font-size: 54px;
+    font-weight: 500;
+    line-height: 1.1;
+    color: var(--ink);
+    letter-spacing: -0.01em;
+    display: inline;
+    position: relative;
+  }
+  .ppt-slide .edit-caret {
+    display: inline-block;
+    width: 2px;
+    height: 52px;
+    background: var(--accent);
+    vertical-align: -8px;
+    margin: 0 2px;
+    opacity: 0;
+  }
+  .ppt-slide .ppt-sub {
+    margin-top: 20px;
+    font-family: var(--sans);
+    font-size: 15px;
+    color: var(--ink-60);
+    line-height: 1.5;
+  }
+  .ppt-slide .ppt-hair {
+    margin-top: 28px;
+    width: 52px; height: 2px;
+    background: var(--accent);
+  }
+  /* Selection handles (corners) */
+  .ppt-slide .ppt-title-frame .handle {
+    position: absolute;
+    width: 8px; height: 8px;
+    background: var(--accent);
+    border: 1.5px solid #fff;
+    border-radius: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .ppt-slide .ppt-title-frame .handle.tl { top: -4px; left: -4px; }
+  .ppt-slide .ppt-title-frame .handle.tr { top: -4px; right: -4px; }
+  .ppt-slide .ppt-title-frame .handle.bl { bottom: -4px; left: -4px; }
+  .ppt-slide .ppt-title-frame .handle.br { bottom: -4px; right: -4px; }
+  .ppt-slide .ppt-title-frame.selected .handle { opacity: 1; }
+  .ppt-slide .ppt-title-frame.editing .handle { opacity: 0; }
+  /* Mouse cursor */
+  .cursor {
+    position: absolute;
+    top: 0; left: 0;
+    width: 22px; height: 30px;
+    pointer-events: none;
+    z-index: 50;
+    opacity: 0;
+    will-change: transform, opacity;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+  }
+  .cursor svg { width: 100%; height: 100%; }
+  /* Double-click ripple */
+  .dblclick-ripple {
+    position: absolute;
+    top: 0; left: 0;
+    width: 20px; height: 20px;
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 45;
+    opacity: 0;
+    will-change: transform, opacity;
+  }
+  /* Connection line between two windows */
+  .connector {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 56px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    will-change: opacity;
+    z-index: 10;
+  }
+  .connector svg { width: 100%; height: 100%; }
+  .connector-label {
+    position: absolute;
+    top: calc(50% + 72px);
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--accent);
+    letter-spacing: 0.12em;
+    white-space: nowrap;
+    opacity: 0;
+    will-change: opacity;
+  }
+  /* Stage labels above windows */
+  .split-label {
+    position: absolute;
+    top: -48px;
+    left: 0;
+    font-family: var(--mono);
+    font-size: 16px;
+    color: var(--ink-60);
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    opacity: 0;
+    will-change: opacity;
+    white-space: nowrap;
+  }
+  .split-label .em { color: var(--accent); }
+  /* ====== Brand Reveal (米色面板 · hero-v10 系列 signature) ====== */
+  .brand-panel {
+    position: absolute;
+    inset: 0;
+    background: var(--cd-bg);
+    transform: translateY(100%);
+    will-change: transform;
+    z-index: 80;
+  }
+  .brand-reveal {
+    position: absolute;
+    inset: 0;
+    z-index: 81;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    will-change: opacity;
+  }
+  .brand-reveal .brand-wordmark {
+    font-family: var(--serif-en);
+    font-size: 72px;
+    font-weight: 100;
+    font-variation-settings: "wght" 100;
+    letter-spacing: -0.01em;
+    color: var(--cd-ink);
+    line-height: 1;
+    opacity: 0;
+    will-change: opacity, transform, font-variation-settings;
+  }
+  .brand-reveal .brand-wordmark .accent {
+    color: var(--accent);
+    font-weight: inherit;
+  }
+  .brand-reveal .brand-line {
+    width: 0;
+    height: 2px;
+    background: var(--accent);
+    margin-top: 60px;
+    will-change: width;
+  }
+</style>
+</head>
+<body>
+<div class="stage" id="stage">
+  <div class="watermark-tl">HUASHU · DESIGN</div>
+  <!-- ====== Beat 1 ====== -->
+  <div class="beat1" id="beat1">
+    <div class="deck-window" id="deckWindow">
+      <div class="deck-chrome">
+        <div class="traffic"><span class="d"></span><span class="d"></span><span class="d"></span></div>
+        <div class="url">localhost:8080 / deck · presenting</div>
+        <div class="page-count" id="pageCount">3 / 12</div>
+      </div>
+      <div class="deck-body-wrap">
+        <div class="deck-slide" id="slideA">
+          <div class="eyebrow">AI PSYCHOLOGY · 03</div>
+          <h1>The Mind<br/>is Plastic</h1>
+          <div class="sub">Agents aren't tools. They have preferences.</div>
+          <div class="hairline"></div>
+        </div>
+        <div class="deck-slide" id="slideB" style="opacity:0; transform: translateX(60px);">
+          <div class="eyebrow">AI PSYCHOLOGY · 04</div>
+          <h1>Injection<br/>&amp; Steering</h1>
+          <div class="sub">A world hides in the parameters.</div>
+          <div class="hairline"></div>
+        </div>
+      </div>
+    </div>
+    <div class="key-hint" id="keyHint">
+      <span>PRESS</span>
+      <span class="kbd" id="kbdKey">→</span>
+    </div>
+  </div>
+  <!-- ====== Beat 2: Split Screen ====== -->
+  <div class="beat2" id="beat2">
+    <!-- LEFT: HTML deck -->
+    <div class="split-col" style="position: relative;">
+      <div class="split-label" id="labelLeft">HTML · <span class="em">READ-ONLY</span></div>
+      <div class="split-window split-left" id="splitLeft">
+      <div class="mini-chrome">
+        <span class="d"></span><span class="d"></span><span class="d"></span>
+        <span class="label">localhost:8080/deck</span>
+      </div>
+      <div class="mini-slide">
+        <div class="mini-eye">AI PSYCHOLOGY · 03</div>
+        <div class="mini-title">The Mind<br/>is Plastic</div>
+        <div class="mini-sub">Agents aren't tools. They have preferences.</div>
+        <div class="mini-hair"></div>
+      </div>
+      </div>
+    </div>
+    <!-- Connector -->
+    <div class="connector" id="connector">
+      <svg viewBox="0 0 56 120" fill="none">
+        <line x1="4" y1="60" x2="52" y2="60" stroke="#D97757" stroke-width="1.5" stroke-dasharray="4 4"/>
+        <polygon points="44,54 54,60 44,66" fill="#D97757"/>
+      </svg>
+    </div>
+    <div class="connector-label" id="connectorLabel">html2pptx.js</div>
+    <!-- RIGHT: PowerPoint -->
+    <div class="split-col" style="position: relative;">
+      <div class="split-label" id="labelRight">PowerPoint · <span class="em">EDITABLE TEXT</span></div>
+      <div class="split-window split-right" id="splitRight">
+      <div class="ppt-titlebar">
+        <div class="pp-logo">P</div>
+        <div class="title-text">ai-psychology-talk.pptx - PowerPoint</div>
+        <div class="win-dots"><span></span><span></span><span></span></div>
+      </div>
+      <div class="ppt-toolbar">
+        <div class="tool">
+          <span class="ico"></span>
+          <span class="font-name"><span id="fontName">Source Serif 4</span><span style="opacity:0.5">▾</span></span>
+        </div>
+        <div class="divider"></div>
+        <div class="tool"><span style="font-weight:700">B</span></div>
+        <div class="tool" style="font-style:italic">I</div>
+        <div class="tool" style="text-decoration:underline">U</div>
+        <div class="divider"></div>
+        <div class="tool active"><span class="ico" style="background:#D97757;border-color:#D97757"></span></div>
+      </div>
+      <div class="ppt-canvas">
+        <div class="ppt-slide">
+          <div class="ppt-eye">AI PSYCHOLOGY · 03</div>
+          <div class="ppt-title-frame" id="titleFrame">
+            <span class="handle tl"></span>
+            <span class="handle tr"></span>
+            <span class="handle bl"></span>
+            <span class="handle br"></span>
+            <span class="ppt-title" id="titleText">The Mind is Plastic</span><span class="edit-caret" id="caret"></span>
+          </div>
+          <div class="ppt-sub">Agents aren't tools. They have preferences.</div>
+          <div class="ppt-hair"></div>
+        </div>
+        <!-- Cursor arrow -->
+        <div class="cursor" id="cursor">
+          <svg viewBox="0 0 22 30" fill="none">
+            <path d="M2 2 L2 22 L8 17 L12 26 L16 24 L12 15 L20 14 Z"
+                  fill="#1A1918" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <!-- Double-click ripple -->
+        <div class="dblclick-ripple" id="ripple"></div>
+      </div>
+      </div>
+    </div>
+  </div>
+  <!-- ====== Brand Reveal (米色面板 · hero-v10 signature) ====== -->
+  <div class="brand-panel" id="brandPanel"></div>
+  <div class="brand-reveal" id="brandReveal">
+    <div class="brand-wordmark" id="wordmark">huashu<span class="accent">-</span>design</div>
+    <div class="brand-line" id="brandLine"></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);
+  // ---------- Easings ----------
+  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+  const expoOut = t => (t <= 0) ? 0 : (t >= 1) ? 1 : 1 - Math.pow(2, -10 * t);
+  const expoIn = t => (t <= 0) ? 0 : (t >= 1) ? 1 : Math.pow(2, 10 * (t - 1));
+  const easeOut = t => 1 - Math.pow(1 - t, 3);
+  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, ease) {
+    if (time <= start) return fromV;
+    if (time >= end) return toV;
+    let p = (time - start) / (end - start);
+    if (ease) p = ease(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 (10s total) ----------
+  const T = {
+    DURATION: 10.0,
+    // Beat 1: 0 - 2s
+    deckIn:       [0.15, 0.9],       // browser fade+rise
+    keyHintIn:    [0.6, 1.1],
+    keyPress:     [1.25, 1.4],       // arrow key highlight
+    slideFlip:    [1.3, 1.9],        // slide A→B
+    beat1Out:     [2.0, 2.4],
+    // Beat 2: split screen: 2.2 - 8.0s
+    beat2In:      [2.3, 2.9],
+    labelsIn:     [3.0, 3.5],
+    cursorIn:     [3.1, 3.4],        // cursor arrives on right side
+    cursorMove1:  [3.4, 4.1],        // cursor moves to title
+    dblclick:     [4.1, 4.3],        // double click
+    frameSelect:  [4.15, 4.35],      // frame shows handles
+    frameEdit:    [4.4, 4.55],       // frame enters edit mode
+    caretShowStart: 4.5,
+    textDelete:   [4.6, 5.4],        // delete original text char by char
+    textRetype:   [5.5, 7.2],        // type new text char by char
+    commitEdit:   [7.3, 7.5],        // exit edit mode
+    connectorIn:  [3.3, 3.9],
+    beat2Out:     [8.0, 8.3],        // main scene fades to 0 (0.3s)
+    // Brand Reveal (米色面板 · hero-v10 signature): 8.3 - 10s
+    // panelRise 与 beat2Out 微重叠 0.05s，避免黑屏间隙
+    panelRise:    [8.25, 8.7],       // 米色面板 translateY 100%→0 (expoOut)
+    wordmarkIn:   [8.7, 9.3],        // wordmark opacity 0→1 + translateY 20→0 + weight 100→500 (0.6s, expoOut)
+    brandLineIn:  [9.3, 9.7],        // brand-line expand 0→280px (0.4s, cubicOut)
+    brandHold:    [9.7, 10.0],       // hold (0.3s)
+  };
+  // ---------- Elements ----------
+  const beat1 = document.getElementById('beat1');
+  const beat2 = document.getElementById('beat2');
+  const brandReveal = document.getElementById('brandReveal');
+  const deckWindow = document.getElementById('deckWindow');
+  const pageCount = document.getElementById('pageCount');
+  const slideA = document.getElementById('slideA');
+  const slideB = document.getElementById('slideB');
+  const keyHint = document.getElementById('keyHint');
+  const kbdKey = document.getElementById('kbdKey');
+  const splitLeft = document.getElementById('splitLeft');
+  const splitRight = document.getElementById('splitRight');
+  const labelLeft = document.getElementById('labelLeft');
+  const labelRight = document.getElementById('labelRight');
+  const connector = document.getElementById('connector');
+  const connectorLabel = document.getElementById('connectorLabel');
+  const cursor = document.getElementById('cursor');
+  const ripple = document.getElementById('ripple');
+  const titleFrame = document.getElementById('titleFrame');
+  const titleText = document.getElementById('titleText');
+  const caret = document.getElementById('caret');
+  const panel = document.getElementById('brandPanel');
+  const wordmark = document.getElementById('wordmark');
+  const brandLine = document.getElementById('brandLine');
+  // Text to animate
+  const ORIG_TEXT = 'The Mind is Plastic';
+  const NEW_TEXT  = 'Mind · Plastic';
+  // ---------- Render ----------
+  function render(t) {
+    /* ======= Beat 1 ======= */
+    let beat1Op;
+    if (t < T.beat1Out[0]) {
+      beat1Op = lerp(t, T.deckIn[0], T.deckIn[1], 0, 1, expoOut);
+    } else {
+      beat1Op = 1 - clampLerp(t, T.beat1Out[0], T.beat1Out[1]);
+    }
+    beat1.style.opacity = beat1Op;
+    beat1.style.visibility = beat1Op > 0.01 ? 'visible' : 'hidden';
+    // Deck window rise
+    const deckRise = lerp(t, T.deckIn[0], T.deckIn[1], 24, 0, expoOut);
+    deckWindow.style.transform = `translate3d(0, ${deckRise}px, 0)`;
+    // Key hint appear
+    const khOp = clampLerp(t, T.keyHintIn[0], T.keyHintIn[1]);
+    keyHint.style.opacity = khOp;
+    // Key press flash
+    const kpActive = t >= T.keyPress[0] && t < T.keyPress[1] + 0.2;
+    if (kpActive) {
+      const kp = clampLerp(t, T.keyPress[0], T.keyPress[1]);
+      kbdKey.style.background = `rgba(217,119,87,${0.9 * (1 - kp * 0.4)})`;
+      kbdKey.style.color = '#fff';
+      kbdKey.style.transform = `scale(${1 - 0.08 * kp})`;
+    } else {
+      kbdKey.style.background = '';
+      kbdKey.style.color = '';
+      kbdKey.style.transform = '';
+    }
+    // Slide flip A→B
+    if (t >= T.slideFlip[0] && t < T.slideFlip[1] + 0.2) {
+      const sp = clampLerp(t, T.slideFlip[0], T.slideFlip[1]);
+      const eased = expoOut(sp);
+      slideA.style.opacity = 1 - eased;
+      slideA.style.transform = `translateX(${-60 * eased}px)`;
+      slideB.style.opacity = eased;
+      slideB.style.transform = `translateX(${60 * (1 - eased)}px)`;
+      // Update page count at midway
+      if (sp > 0.5) pageCount.textContent = '4 / 12';
+      else pageCount.textContent = '3 / 12';
+    } else if (t >= T.slideFlip[1]) {
+      slideA.style.opacity = 0;
+      slideB.style.opacity = 1;
+      slideB.style.transform = 'translateX(0)';
+      pageCount.textContent = '4 / 12';
+    } else {
+      slideA.style.opacity = 1;
+      slideA.style.transform = 'translateX(0)';
+      slideB.style.opacity = 0;
+      pageCount.textContent = '3 / 12';
+    }
+    /* ======= Beat 2 ======= */
+    let beat2Op = 0;
+    if (t >= T.beat2In[0] && t < T.beat2Out[1]) {
+      if (t < T.beat2In[1]) beat2Op = clampLerp(t, T.beat2In[0], T.beat2In[1]);
+      else if (t < T.beat2Out[0]) beat2Op = 1;
+      else beat2Op = 1 - clampLerp(t, T.beat2Out[0], T.beat2Out[1]);
+    }
+    beat2.style.opacity = beat2Op;
+    beat2.style.visibility = beat2Op > 0.01 ? 'visible' : 'hidden';
+    // Windows rise in
+    const splitInP = clampLerp(t, T.beat2In[0], T.beat2In[1]);
+    const splitRise = lerp(t, T.beat2In[0], T.beat2In[1], 28, 0, expoOut);
+    splitLeft.style.transform = `translate3d(${-8 * (1 - expoOut(splitInP))}px, ${splitRise}px, 0)`;
+    splitRight.style.transform = `translate3d(${8 * (1 - expoOut(splitInP))}px, ${splitRise}px, 0)`;
+    // Labels
+    const labelOp = clampLerp(t, T.labelsIn[0], T.labelsIn[1]);
+    labelLeft.style.opacity = labelOp * 0.7;
+    labelRight.style.opacity = labelOp * 0.85;
+    // Connector
+    const connOp = clampLerp(t, T.connectorIn[0], T.connectorIn[1]);
+    connector.style.opacity = connOp;
+    connectorLabel.style.opacity = connOp * 0.9;
+    /* === Cursor movement === */
+    // Cursor positions (relative to .ppt-canvas, which is inside split-right)
+    // Canvas starts at (0,0), size ~820 × 508 (580 - 32 - 40)
+    // Title sits around x=84 y=110 (inside .ppt-slide padding 56/64)
+    // We'll place cursor with absolute positioning inside .ppt-canvas.
+    // Entry point: off to the right bottom of canvas
+    const P_ENTER = { x: 720, y: 420 };
+    const P_TITLE = { x: 250, y: 170 }; // on the title
+    let cursorOp = 0;
+    let cx = P_ENTER.x, cy = P_ENTER.y;
+    if (t >= T.cursorIn[0] && t < T.beat2Out[0]) {
+      cursorOp = 1;
+      // Phase 1: appear (pop in with slight scale)
+      const inP = clampLerp(t, T.cursorIn[0], T.cursorIn[1]);
+      cursorOp = expoOut(inP);
+      // Phase 2: move to title
+      if (t >= T.cursorMove1[0]) {
+        const mp = clampLerp(t, T.cursorMove1[0], T.cursorMove1[1]);
+        const e = easeInOut(mp);
+        cx = P_ENTER.x + (P_TITLE.x - P_ENTER.x) * e;
+        cy = P_ENTER.y + (P_TITLE.y - P_ENTER.y) * e;
+      } else {
+        cx = P_ENTER.x;
+        cy = P_ENTER.y;
+      }
+      // After double-click, slight jitter toward caret position during typing
+      if (t >= T.textRetype[0] && t < T.textRetype[1]) {
+        cx = P_TITLE.x + 6;
+        cy = P_TITLE.y - 2;
+      }
+    } else if (t >= T.beat2Out[0]) {
+      cursorOp = 1 - clampLerp(t, T.beat2Out[0], T.beat2Out[1]);
+    }
+    cursor.style.opacity = cursorOp;
+    cursor.style.transform = `translate(${cx}px, ${cy}px)`;
+    /* === Double-click ripple === */
+    // Ripple pulses twice at T.dblclick start
+    let rippleVisible = false;
+    if (t >= T.dblclick[0] && t < T.dblclick[0] + 0.7) {
+      const dt = t - T.dblclick[0];
+      // Two rapid pulses
+      const pulse1 = clamp(dt / 0.25, 0, 1);
+      const pulse2 = clamp((dt - 0.15) / 0.25, 0, 1);
+      const scale1 = 0.4 + pulse1 * 1.4;
+      const scale2 = 0.4 + pulse2 * 1.4;
+      const op1 = 1 - pulse1;
+      const op2 = dt > 0.15 ? (1 - pulse2) : 0;
+      // Render as single element: use larger of the two
+      const scale = Math.max(scale1, scale2);
+      const op = Math.max(op1, op2);
+      ripple.style.opacity = op;
+      ripple.style.transform = `translate(-50%, -50%) translate(${P_TITLE.x + 6}px, ${P_TITLE.y + 26}px) scale(${scale})`;
+      rippleVisible = true;
+    }
+    if (!rippleVisible) ripple.style.opacity = 0;
+    /* === Frame states: selected → editing === */
+    titleFrame.classList.remove('selected', 'editing');
+    if (t >= T.frameSelect[0] && t < T.frameEdit[0]) {
+      titleFrame.classList.add('selected');
+    } else if (t >= T.frameEdit[0] && t < T.commitEdit[1]) {
+      titleFrame.classList.add('editing');
+    }
+    /* === Text animation: delete → retype === */
+    let displayedText = ORIG_TEXT;
+    let caretOp = 0;
+    if (t < T.textDelete[0]) {
+      displayedText = ORIG_TEXT;
+      caretOp = t >= T.caretShowStart ? 1 : 0;
+    } else if (t < T.textDelete[1]) {
+      // Delete: remove chars from end
+      const dp = clampLerp(t, T.textDelete[0], T.textDelete[1]);
+      const charsToRemove = Math.floor(dp * ORIG_TEXT.length);
+      displayedText = ORIG_TEXT.slice(0, ORIG_TEXT.length - charsToRemove);
+      caretOp = 1;
+    } else if (t < T.textRetype[0]) {
+      displayedText = '';
+      caretOp = 1;
+    } else if (t < T.textRetype[1]) {
+      // Retype new text
+      const rp = clampLerp(t, T.textRetype[0], T.textRetype[1]);
+      const charsToShow = Math.floor(rp * NEW_TEXT.length);
+      displayedText = NEW_TEXT.slice(0, charsToShow);
+      caretOp = 1;
+    } else if (t < T.commitEdit[1]) {
+      displayedText = NEW_TEXT;
+      // Caret blinks while still in edit mode
+      caretOp = (Math.floor(t * 2) % 2 === 0) ? 1 : 0.3;
+    } else {
+      displayedText = NEW_TEXT;
+      caretOp = 0;
+    }
+    // Blinking during idle-in-edit phases (when not actively typing/deleting)
+    if (t >= T.caretShowStart && t < T.textDelete[0]) {
+      caretOp = (Math.floor((t - T.caretShowStart) * 3) % 2 === 0) ? 1 : 0.35;
+    }
+    titleText.textContent = displayedText;
+    caret.style.opacity = caretOp;
+    /* ======= Brand Reveal (米色面板 · hero-v10 signature) ======= */
+    // Panel rises from bottom (米色面板 #F5F4F0)
+    const panelP = clampLerp(t, T.panelRise[0], T.panelRise[1]);
+    panel.style.transform = `translateY(${(1 - expoOut(panelP)) * 100}%)`;
+    // brand-reveal container visible once panel starts rising
+    brandReveal.style.opacity = panelP > 0.01 ? 1 : 0;
+    // Wordmark: opacity 0→1 + translateY 20→0 + weight 100→500 (expoOut)
+    const wmP = clampLerp(t, T.wordmarkIn[0], T.wordmarkIn[1]);
+    const wmEased = expoOut(wmP);
+    wordmark.style.opacity = wmEased;
+    const wmRise = (1 - wmEased) * 20;
+    wordmark.style.transform = `translate3d(0, ${wmRise}px, 0)`;
+    const w = 100 + (500 - 100) * wmEased;
+    wordmark.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
+    wordmark.style.fontWeight = Math.round(w);
+    // Brand line expand 0→280px (cubicOut)
+    const lineP = clampLerp(t, T.brandLineIn[0], T.brandLineIn[1]);
+    const cubicOut = x => 1 - Math.pow(1 - x, 3);
+    brandLine.style.width = (280 * cubicOut(lineP)) + 'px';
+  }
+  // ---------- Driver ----------
+  let manualT = null;
+  let startMs = null;
+  let hasFinished = 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) {
+        t = Math.min(elapsed, T.DURATION - 0.001);
+        if (elapsed >= T.DURATION) hasFinished = true;
+      } else {
+        t = elapsed % T.DURATION;
+      }
+      render(t);
+    }
+    requestAnimationFrame(tick);
+  }
+  // Force first-frame render synchronously, THEN set ready
+  render(0);
+  requestAnimationFrame(tick);
+  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>