dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx

@@ -0,0 +1,295 @@
+// scan-bracket-sweep — Scan Bracket 取景括号扫描光带（motion-lab 定稿转原生 Remotion）
+// 文档弹到画面中央，四角落下 L 形取景括号（向内位移 8px），随后一条扫描光带带着
+// 朝来向的渐变拖尾在文档上往复扫 5 趟，两端慢中间快，文档本身完全静止。
+// 设计坐标 480×270（DesignStage raster="zoom"：文档小字按成片尺寸栅格化，不糊）。
+//
+// 质感升级：骨架灰条换成出版级的明细表——video-shotcraft 宣传片的分镜清单（标题 / 元信息 / 4 列 7 行 / 合计）；
+// 光带从"黑线 + 灰泥拖尾"改成靛蓝扫描光——细亮芯 + 柔辉 + 正片叠底的色调拖尾，
+// 拖尾长度随扫描速度伸缩（趟末停顿时收成 0，换向不再"啪"地跳到另一侧）；
+// 光带经过的表格行被轻微照亮（光在读，文档不动）；括号改成圆头描边并带一次轻过冲落位；
+// 背景换柔光底 + 颗粒，文档带随落位收紧的两层阴影。
+import React from 'react';
+import { AbsoluteFill } from 'remotion';
+import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';
+import { Backdrop, EASE, FONT, Grain, softShadow } from '../../_fixtures/Polish';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const SCAN_BRACKET_SWEEP_DURATION = 150; // 5000ms @30fps
+
+// —— 颜色：INK 负责括号与正文，SCAN 是唯一的光色（光带芯 / 辉光 / 拖尾共用，换肤只改这两个）——
+const INK = '#16171c'; // 带冷调的近黑（替代纯黑）
+const SCAN = '91,99,211'; // 靛蓝扫描光（rgb 分量，便于拼 alpha）
+const INK2 = '#5d5f66';
+const INK3 = '#9b9da3';
+const HAIR = 'rgba(20,22,28,0.09)';
+
+const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
+const inOutSin = (x: number) => 0.5 - Math.cos(Math.PI * clamp01(x)) / 2;
+
+// 文档几何：440×240 定尺画布内居中的 300×178 文档
+const DW = 300;
+const DH = 178;
+const DX = (440 - DW) / 2;
+const DY = (240 - DH) / 2;
+
+// 表格列：沿用原骨架的 4 列栅格（左右各 14 内边距、列距 10）
+const COLS = 4;
+const COL_W = (DW - 28 - (COLS - 1) * 10) / COLS;
+const colX = (c: number) => 14 + c * (COL_W + 10);
+// 分镜清单：镜头 / 配方卡 / 入点 / 帧数（入点 = 前面各镜帧数累加 @30fps，合计 828f = 27.6 s）
+const HEAD = ['Shot', 'Recipe', 'Cue', 'Frames'];
+const ROWS: [string, string, string, string][] = [
+  ['Cold open', 'Text mask', '0:00', '96 f'],
+  ['Hero reveal', 'Spotlight', '0:03', '120 f'],
+  ['Feature tour', 'Graze tour', '0:07', '150 f'],
+  ['Data beat', 'Riso hit', '0:12', '120 f'],
+  ['Workbench', 'Crash zoom', '0:16', '90 f'],
+  ['Gallery pass', 'Flyover', '0:19', '144 f'],
+  ['Logo sting', 'Brand snap', '0:24', '108 f'],
+];
+const ROW_TOP = 58; // 第一行顶（与原骨架行距 13 一致）
+const ROW_H = 13;
+
+// 四角取景括号：外扩 −7、臂长 34（含描边共 36），1.6px 圆头 L 形
+const CS = 36;
+const CORNERS = [
+  { left: -8, top: -8, d: 'M1 35V1h34', dx: 1, dy: 1 },
+  { left: DW + 8 - CS, top: -8, d: 'M1 1h34v34', dx: -1, dy: 1 },
+  { left: DW + 8 - CS, top: DH + 8 - CS, d: 'M35 1v34H1', dx: -1, dy: -1 },
+  { left: -8, top: DH + 8 - CS, d: 'M35 35H1V1', dx: 1, dy: -1 },
+];
+
+const PASSES = 5;
+const TAIL = 82; // 拖尾最大长度（峰值速度时）
+
+// 扫描位置（文档内 y，0→DH）与方向：t 的纯函数，便于求速度
+const scanAt = (t: number) => {
+  const sp = seg(t, 0.17, 0.95, E.linear);
+  const raw = sp * PASSES;
+  const pi = Math.min(PASSES - 1, Math.floor(raw));
+  const local = clamp01((raw - pi) / 0.88); // 每趟末尾 12% 完全停顿
+  const dir = pi % 2 === 0 ? 1 : -1;
+  const prog = inOutSin(local);
+  return { y: dir > 0 ? prog * DH : DH - prog * DH, dir };
+};
+
+export const ScanBracketSweep: React.FC = () => {
+  const t = useT();
+  const dt = 1 / (SCAN_BRACKET_SWEEP_DURATION - 1); // 一帧对应的 t
+
+  // 文档弹入：scale 0.86→1（snappy），透明度 dp*3 提前满亮——先"在了"再"稳了"
+  const dp = seg(t, 0, 0.11, EASE.snappy);
+  const elev = lerp(dp, 22, 6);
+
+  // 扫描：位置 + 速度（拖尾长度跟速度走，趟末停顿处收成 0）
+  const { y, dir } = scanAt(t);
+  const speed = Math.abs(scanAt(t + dt / 2).y - scanAt(t - dt / 2).y); // 设计 px/帧
+  const PEAK = (DH * Math.PI) / 2 / (((0.78 * SCAN_BRACKET_SWEEP_DURATION) / PASSES) * 0.88);
+  const sNorm = clamp01(speed / PEAK);
+  const tail = TAIL * Math.pow(sNorm, 0.75);
+  // 光带整体淡入（0.16–0.20）淡出（0.93–0.99）
+  const clipOp = seg(t, 0.16, 0.2) * (1 - seg(t, 0.93, 0.99));
+
+  // 行照亮：光芯离行中心越近越亮（纯空间函数，文档本身不动）
+  const lit = (cy: number) => clipOp * Math.exp(-Math.pow((y - cy) / 7, 2));
+
+  const cell = (txt: string, c: number, top: number, style: React.CSSProperties) => (
+    <div
+      style={{
+        position: 'absolute',
+        top,
+        left: colX(c),
+        width: COL_W,
+        textAlign: c === 3 ? 'right' : 'left',
+        whiteSpace: 'nowrap',
+        lineHeight: 1,
+        ...style,
+      }}
+    >
+      {txt}
+    </div>
+  );
+
+  return (
+    <AbsoluteFill>
+      <Backdrop tone="light" light={{ x: 0.5, y: 0.3 }} accent="#5b63d3" grain={0} vignette={0.16} />
+      <DesignStage bg="transparent" raster="zoom">
+        {/* 440×240 定尺画布，居中于 480×270 设计坐标 */}
+        <div style={{ position: 'absolute', left: '50%', top: '50%', width: 440, height: 240, margin: '-120px 0 0 -220px' }}>
+          {/* holder：文档 + 光带 + 括号共用的定位容器 */}
+          <div style={{ position: 'absolute', left: DX, top: DY, width: DW, height: DH }}>
+            {/* 文档卡片：发丝线 + 顶部内高光 + 随落位收紧的两层阴影 */}
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background: 'linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%)',
+                borderRadius: 10,
+                boxShadow: `inset 0 0 0 0.3px ${HAIR}, inset 0 0.4px 0 rgba(255,255,255,0.9), ${softShadow(elev / 4, { strength: 1.1 })}`,
+                overflow: 'hidden',
+                transformOrigin: '50% 50%',
+                transform: `scale(${lerp(dp, 0.86, 1)})`,
+                opacity: clamp01(dp * 3),
+                fontFamily: FONT.sans,
+                color: INK,
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              {/* 页眉：文档图标 + 标题 + 页数 chip */}
+              <svg style={{ position: 'absolute', left: 14, top: 10.5 }} width={9} height={11} viewBox="0 0 9 11">
+                <path d="M1 .5h4.6L8.5 3.4V10a.5.5 0 0 1-.5.5H1A.5.5 0 0 1 .5 10V1A.5.5 0 0 1 1 .5z" fill="#eef0fb" stroke={`rgb(${SCAN})`} strokeWidth={0.6} />
+                <path d="M5.5.6v2.9h2.9" fill="none" stroke={`rgb(${SCAN})`} strokeWidth={0.6} />
+              </svg>
+              <div style={{ position: 'absolute', left: 27, top: 11, fontSize: 8.6, fontWeight: 650, letterSpacing: '-0.01em', lineHeight: 1 }}>
+                Launch Film — Shot List
+              </div>
+              <div style={{ position: 'absolute', left: 27, top: 23, fontSize: 5.4, color: INK2, lineHeight: 1, letterSpacing: '-0.01em' }}>
+                {BRAND.name} · Storyboard v3 · 1080p · 30 fps
+              </div>
+              <div
+                style={{
+                  position: 'absolute',
+                  right: 14,
+                  top: 12,
+                  padding: '2px 4.5px',
+                  borderRadius: 4,
+                  background: '#f3f3f1',
+                  boxShadow: `inset 0 0 0 0.3px ${HAIR}`,
+                  fontFamily: FONT.mono,
+                  fontSize: 4.6,
+                  color: INK2,
+                  letterSpacing: '0.04em',
+                  lineHeight: 1,
+                }}
+              >
+                7 SHOTS · 0:28
+              </div>
+              <div style={{ position: 'absolute', left: 14, right: 14, top: 36, height: 0.3, background: HAIR }} />
+
+              {/* 表头 */}
+              {HEAD.map((h, c) =>
+                cell(h.toUpperCase(), c, 44, { fontSize: 4.5, fontWeight: 600, color: INK3, letterSpacing: '0.07em' }),
+              )}
+              <div style={{ position: 'absolute', left: 14, right: 14, top: 52.5, height: 0.3, background: HAIR }} />
+
+              {/* 明细行：光芯经过时整行被轻微照亮 */}
+              {ROWS.map((row, r) => {
+                const top = ROW_TOP + r * ROW_H;
+                const L = lit(top + 3);
+                return (
+                  <React.Fragment key={r}>
+                    <div
+                      style={{
+                        position: 'absolute',
+                        left: 8,
+                        right: 8,
+                        top: top - 3.5,
+                        height: ROW_H - 1,
+                        borderRadius: 3,
+                        background: `rgba(${SCAN},${(L * 0.09).toFixed(3)})`,
+                      }}
+                    />
+                    {row.map((v, c) =>
+                      cell(v, c, top, {
+                        fontSize: 5.6,
+                        letterSpacing: '-0.012em',
+                        fontWeight: c === 0 || c === 3 ? 520 : 420,
+                        color: c === 0 || c === 3 ? INK : INK2,
+                      }),
+                    )}
+                  </React.Fragment>
+                );
+              })}
+
+              {/* 合计 */}
+              <div style={{ position: 'absolute', left: 14, right: 14, top: 151, height: 0.3, background: HAIR }} />
+              {cell('Runtime', 0, 158, { fontSize: 5.6, fontWeight: 600 })}
+              {cell('30 fps', 2, 158, { fontSize: 5.6, color: INK2 })}
+              {cell('828 f · 27.6 s', 3, 157.2, { fontSize: 7, fontWeight: 680, letterSpacing: '-0.01em' })}
+            </div>
+
+            {/* 扫描光带（裁在文档同 10px 圆角内）：细亮芯 + 柔辉 + 朝来向的色调拖尾 */}
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                borderRadius: 10,
+                overflow: 'hidden',
+                pointerEvents: 'none',
+                opacity: clipOp,
+              }}
+            >
+              <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 0, transform: `translateY(${y.toFixed(3)}px)` }}>
+                {/* 拖尾：正片叠底把表格"染"上光色；长度随速度伸缩，下行挂上方、上行挂下方 */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    height: tail,
+                    top: dir > 0 ? -tail : 0,
+                    mixBlendMode: 'multiply',
+                    background:
+                      dir > 0
+                        ? `linear-gradient(180deg, rgba(${SCAN},0) 0%, rgba(${SCAN},0.06) 55%, rgba(${SCAN},0.2) 100%)`
+                        : `linear-gradient(0deg, rgba(${SCAN},0) 0%, rgba(${SCAN},0.06) 55%, rgba(${SCAN},0.2) 100%)`,
+                  }}
+                />
+                {/* 柔辉：光芯两侧对称的窄光晕 */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: -5,
+                    height: 10,
+                    background: `linear-gradient(180deg, rgba(${SCAN},0) 0%, rgba(${SCAN},0.22) 50%, rgba(${SCAN},0) 100%)`,
+                  }}
+                />
+                {/* 光芯：1.2px 靛蓝线，中间提亮成白热 */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: -0.6,
+                    height: 1.2,
+                    background: `linear-gradient(90deg, rgba(${SCAN},0.55) 0%, rgb(${SCAN}) 18%, #8f95ff 50%, rgb(${SCAN}) 82%, rgba(${SCAN},0.55) 100%)`,
+                    boxShadow: `0 0 2.5px rgba(${SCAN},0.75)`,
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 四角取景括号：交错落位，从外侧 8px 带一次轻过冲收进来 */}
+            {CORNERS.map((c, i) => {
+              const t0 = 0.08 + i * 0.022;
+              const a = seg(t, t0, t0 + 0.03); // 透明度先到
+              const p = EASE.overshoot(clamp01((t - t0) / 0.055)); // 位移带 ~8% 过冲
+              const off = (1 - p) * 8;
+              return (
+                <svg
+                  key={i}
+                  width={CS}
+                  height={CS}
+                  viewBox={`0 0 ${CS} ${CS}`}
+                  style={{
+                    position: 'absolute',
+                    left: c.left,
+                    top: c.top,
+                    overflow: 'visible',
+                    opacity: a,
+                    transform: `translate(${(-off * c.dx).toFixed(3)}px,${(-off * c.dy).toFixed(3)}px)`,
+                  }}
+                >
+                  <path d={c.d} fill="none" stroke={INK} strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              );
+            })}
+          </div>
+        </div>
+      </DesignStage>
+      <Grain opacity={0.045} />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/scanline-annotate-focus/ScanlineAnnotateFocus.tsx

@@ -0,0 +1,329 @@
+// scanline-annotate-focus — 扫描分析取景标注：一条扫描线自上而下匀速掠过一张已存在的品牌官网，
+// 扫过哪个区块的下缘，哪块就被一组取景角标"收拢对准"，随后贴一枚机器标签把它命名；顶部状态行实时计数。
+//
+// 第二轮重设计（暖沙官网 × 钴蓝机器视线）：
+// - look = sand（米色 · 赤陶）。被分析的是 video-shotcraft 的官网：镜刻标志 + 字标、大号粗黑体 H1「Your product, in motion.」、
+//   一支样片（陶器品牌 Tide Vase 的发布片封面，手绘感陶瓶）、赤陶色 CTA、四色色板——页面本身就是一张好看的品牌页。
+// - 两套颜色严格分工：赤陶 = 品牌（页面内容），钴蓝 = 机器（扫描线 / 角标 / 标签 / 状态行）。
+//   标签照设计工具的选中标签惯例做成钴蓝底白字小签，32px 等宽字，任何底上都读得清。
+// - 页面放进一扇有两层软阴影的浏览器窗（1560×840），状态行在窗外上方；全程 1.000→1.035 极缓推镜。
+// - 扫描线严格匀速（机器的视线，不加缓动）：3px 钴蓝光芯 + 身后 140px 渐隐的"已读"淡蓝余晖与点阵；
+//   窗框两侧各一枚随线滑动的游标，左侧读出当前 Y 坐标。
+// - 取景框：四个 L 角从外扩 76px 处按弹簧（damping 15，一次可见过冲）收拢到 bbox，臂长晚 3f 收一档（跟随）；
+//   对准瞬间框内钴蓝对焦闪；标签 5f 后从左擦出、文字逐字打出（机器在写）。
+//
+// 时间表（30fps，共 150f）：
+//   0–6     页面已在场（它本来就存在），状态行亮起 READING
+//   6–80    扫描线匀速 −20→860（74f）；越过 bbox 下缘即触发（≥4f 最小间隔）：
+//           LOGO ~19f · NAV ~23f · H1 ~47f · CTA ~66f · HERO ~70f · PALETTE ~75f
+//   ft+0–14 角标弹簧收拢；ft+5–14 标签擦出 + 打字
+//   80–88   扫描线淡出；状态行切 BRAND READ · 6 SIGNALS（钴蓝）
+//   88–150  hold：全部标注就位，极缓推镜让画面活着，尾帧是一张完整海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const SCANLINE_ANNOTATE_FOCUS_DURATION = 150;
+
+const L = LOOKS.sand;
+const MACHINE = '#2b4fd8'; // 机器色（钴蓝）：扫描线 / 角标 / 标签 / 状态行专用，页面内容不用
+const TERRA = L.accent; // 品牌色（赤陶）：只在页面内容里出现
+const MONO = FONT.mono;
+
+// 浏览器窗（帧坐标）
+const WX = 180;
+const WY = 168;
+const WW = 1560;
+const WH = 840;
+const CHROME = 52;
+
+// 扫描线（页面坐标，窗内 y）：严格匀速
+const SCAN0 = 6;
+const SCAN1 = 80;
+const Y0 = -20;
+const Y1 = 860;
+const scanY = (f: number) => Y0 + (Y1 - Y0) * Math.min(1, Math.max(0, (f - SCAN0) / (SCAN1 - SCAN0)));
+const frameAtY = (y: number) => SCAN0 + ((y - Y0) / (Y1 - Y0)) * (SCAN1 - SCAN0);
+
+// ───────────── 分析目标（页面坐标；tag = 标签相对 bbox 的放置） ─────────────
+type Tag = 'right' | 'above' | 'below' | 'belowRight';
+type Target = { key: string; x: number; y: number; w: number; h: number; head: string; detail: string; tag: Tag; ft: number };
+const TARGETS: Target[] = (() => {
+  const ts: Target[] = [
+    { key: 'logo', x: 48, y: 64, w: 344, h: 66, head: 'LOGO', detail: 'Frame Chisel', tag: 'right', ft: 0 },
+    { key: 'nav', x: 1000, y: 64, w: 512, h: 66, head: 'NAV', detail: '4 items', tag: 'belowRight', ft: 0 },
+    { key: 'h1', x: 48, y: 222, w: 722, h: 262, head: 'H1', detail: 'Grotesk 850 · −4%', tag: 'above', ft: 0 },
+    { key: 'cta', x: 48, y: 632, w: 408, h: 88, head: 'CTA', detail: '#C4552D', tag: 'right', ft: 0 },
+    { key: 'hero', x: 892, y: 216, w: 620, h: 532, head: 'HERO', detail: 'Sample film', tag: 'below', ft: 0 },
+    { key: 'palette', x: 48, y: 756, w: 220, h: 66, head: 'PALETTE', detail: '4 swatches', tag: 'right', ft: 0 },
+  ];
+  // 触发 = 扫描线越过 bbox 下缘的那一帧；按下缘排序后钳制最小间隔 4f（两块同高的不会同帧弹）
+  let prev = -99;
+  for (const t of [...ts].sort((a, b) => a.y + a.h - (b.y + b.h))) {
+    t.ft = Math.max(frameAtY(t.y + t.h), prev + 4);
+    prev = t.ft;
+  }
+  return ts;
+})();
+const LAST_FIRE = Math.max(...TARGETS.map((t) => t.ft));
+
+// ───────────── 页面内容：video-shotcraft 官网（产品图位放一支样片封面：陶器品牌的发布片） ─────────────
+const Vase: React.FC = () => (
+  <svg width={620} height={580} viewBox="0 0 620 580" style={{ position: 'absolute', left: 0, top: 0 }}>
+    <defs>
+      <linearGradient id="haf-vase" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0" stopColor="#7d3418" />
+        <stop offset="0.3" stopColor="#c45a31" />
+        <stop offset="0.46" stopColor="#e9925f" />
+        <stop offset="0.62" stopColor="#c2552c" />
+        <stop offset="1" stopColor="#6e2c13" />
+      </linearGradient>
+      <linearGradient id="haf-bowl" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0" stopColor="#a99a83" />
+        <stop offset="0.4" stopColor="#f3ece1" />
+        <stop offset="0.7" stopColor="#ddd1bf" />
+        <stop offset="1" stopColor="#8f8069" />
+      </linearGradient>
+      <radialGradient id="haf-shadow" cx="0.5" cy="0.5" r="0.5">
+        <stop offset="0" stopColor="#5a3a1c" stopOpacity="0.38" />
+        <stop offset="1" stopColor="#5a3a1c" stopOpacity="0" />
+      </radialGradient>
+      <clipPath id="haf-clip"><path d="M228 118 C226 150 214 168 196 196 C150 262 142 336 168 398 C186 444 214 466 268 468 C322 466 350 444 368 398 C394 336 386 262 340 196 C322 168 310 150 308 118 Z" /></clipPath>
+      <linearGradient id="haf-glaze" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" stopColor="#fff" stopOpacity="0.18" />
+        <stop offset="0.25" stopColor="#fff" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+    {/* 接触影 */}
+    <ellipse cx={268} cy={470} rx={150} ry={22} fill="url(#haf-shadow)" />
+    <ellipse cx={452} cy={478} rx={98} ry={15} fill="url(#haf-shadow)" />
+    {/* 陶瓶：窄口 · 鼓腹 · 收足 */}
+    <path
+      d="M228 118 C226 150 214 168 196 196 C150 262 142 336 168 398 C186 444 214 466 268 468 C322 466 350 444 368 398 C394 336 386 262 340 196 C322 168 310 150 308 118 Z"
+      fill="url(#haf-vase)"
+    />
+    <path
+      d="M228 118 C226 150 214 168 196 196 C150 262 142 336 168 398 C186 444 214 466 268 468 C322 466 350 444 368 398 C394 336 386 262 340 196 C322 168 310 150 308 118 Z"
+      fill="url(#haf-glaze)"
+    />
+    <ellipse cx={268} cy={118} rx={40} ry={9} fill="#5e260f" />
+    <ellipse cx={268} cy={116} rx={40} ry={8} fill="none" stroke="#e7a073" strokeWidth={2} opacity={0.7} />
+    {/* 拉坯留下的轮纹：几道极淡的横向弧线，手作感 */}
+    <g clipPath="url(#haf-clip)">
+      {[176, 222, 270, 320, 370, 420].map((y, i) => (
+        <path key={i} d={`M60 ${y} Q268 ${y + 14} 476 ${y}`} fill="none" stroke="#3e1608" strokeWidth={1.6} opacity={0.09} />
+      ))}
+    </g>
+    {/* 釉面流挂的一道亮痕 */}
+    <path d="M232 210 C214 262 206 330 222 400" fill="none" stroke="#ffd2b0" strokeWidth={6} strokeLinecap="round" opacity={0.28} />
+    {/* 骨白小碗 */}
+    <path d="M362 402 C366 452 404 478 452 478 C500 478 538 452 542 402 Z" fill="url(#haf-bowl)" />
+    <ellipse cx={452} cy={402} rx={90} ry={14} fill="#efe6d8" />
+    <ellipse cx={452} cy={404} rx={78} ry={9} fill="#cdbfa9" />
+  </svg>
+);
+
+const Page: React.FC = () => (
+  <div style={{ position: 'absolute', inset: 0, background: '#f8f2e9', fontFamily: FONT.sans, color: L.ink }}>
+    {/* 浏览器顶栏 */}
+    <div style={{ position: 'absolute', left: 0, top: 0, width: WW, height: CHROME, background: '#efe7db', borderBottom: `1px solid ${L.line}` }}>
+      {[0, 1, 2].map((i) => (
+        <div key={i} style={{ position: 'absolute', left: 24 + i * 22, top: 20, width: 12, height: 12, borderRadius: 6, background: alpha(L.ink, 0.16) }} />
+      ))}
+      <div style={{ position: 'absolute', left: WW / 2 - 260, top: 11, width: 520, height: 30, borderRadius: 8, background: alpha('#ffffff', 0.7), border: `1px solid ${L.line}`, font: `500 18px ${MONO}`, color: L.ink3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        {BRAND.repo}
+      </div>
+    </div>
+    {/* logo：镜刻标志 + video-shotcraft 字标（标志 svg 四周有 16/128 留白，左移 7px 让可见框对齐 64） */}
+    <div style={{ position: 'absolute', left: 57, top: 70, display: 'flex', alignItems: 'center', gap: 12 }}>
+      <ShotcraftMark size={56} tone="light" />
+      <div style={{ font: `700 34px ${BRAND.font}`, letterSpacing: '0.01em', color: BRAND.ink, whiteSpace: 'nowrap' }}>{BRAND.name}</div>
+    </div>
+    {/* 导航 */}
+    <div style={{ position: 'absolute', right: 64, top: 84, display: 'flex', gap: 46, font: `550 28px ${FONT.sans}`, color: L.ink2, letterSpacing: '-0.01em' }}>
+      <span>Recipes</span>
+      <span>Gallery</span>
+      <span>Docs</span>
+      <span style={{ color: L.ink }}>GitHub</span>
+    </div>
+    {/* H1 */}
+    <div style={{ position: 'absolute', left: 60, top: 236, font: `850 120px ${FONT.sans}`, letterSpacing: '-0.045em', lineHeight: 1, whiteSpace: 'nowrap' }}>
+      Your product,
+      <br />
+      in <span style={{ color: TERRA }}>motion.</span>
+    </div>
+    {/* 正文 */}
+    <div style={{ position: 'absolute', left: 64, top: 512, width: 700, font: `450 34px ${FONT.sans}`, lineHeight: 1.36, color: L.ink2, letterSpacing: '-0.012em' }}>
+      Cinematic product videos, crafted by your agent. From screenshot to showreel.
+    </div>
+    {/* CTA */}
+    <div style={{ position: 'absolute', left: 64, top: 644, height: 64, padding: '0 34px', borderRadius: 32, background: TERRA, color: L.onAccent, display: 'flex', alignItems: 'center', gap: 14, font: `650 30px ${FONT.sans}`, letterSpacing: '-0.01em', boxShadow: `0 10px 24px -10px ${alpha('#7a2a10', 0.55)}, inset 0 1px 0 rgba(255,255,255,0.25)` }}>
+      Render a launch film <span style={{ fontWeight: 500 }}>→</span>
+    </div>
+    {/* 釉色板 */}
+    <div style={{ position: 'absolute', left: 64, top: 768, display: 'flex', alignItems: 'center', gap: 12 }}>
+      {['#ebe5da', '#5d6c4f', TERRA, '#d6c3a5'].map((c, i) => (
+        <div key={i} style={{ width: 42, height: 42, borderRadius: 21, background: `radial-gradient(circle at 35% 30%, ${alpha('#ffffff', 0.45)}, ${alpha('#ffffff', 0)} 55%), ${c}`, boxShadow: `inset 0 0 0 1px ${alpha(L.ink, 0.12)}` }} />
+      ))}
+    </div>
+    {/* 产品图卡 */}
+    <div style={{ position: 'absolute', left: 900, top: 224, width: 604, height: 516, borderRadius: 22, overflow: 'hidden', background: 'linear-gradient(180deg, #ecdcc7 0%, #e2cbae 62%, #d4b896 62.2%, #cdb08c 100%)' }}>
+      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 55% at 70% 18%, rgba(255,248,236,0.75) 0%, rgba(255,248,236,0) 70%)' }} />
+      <div style={{ position: 'absolute', left: -8, top: -24 }}>
+        <Vase />
+      </div>
+      <div style={{ position: 'absolute', left: 28, bottom: 26, padding: '10px 18px', borderRadius: 14, background: alpha('#fbf6ef', 0.86), font: `600 24px ${FONT.sans}`, color: L.ink, letterSpacing: '-0.01em' }}>
+        ▶ Tide Vase launch film <span style={{ color: L.ink3, fontWeight: 500 }}>· 0:30</span>
+      </div>
+    </div>
+  </div>
+);
+
+// ───────────── 取景框 + 标签 ─────────────
+const Bracket: React.FC<{ t: Target; frame: number }> = ({ t, frame }) => {
+  const f = frame - t.ft;
+  if (f < 0) return null;
+  const s = springAt(frame, t.ft, { damping: 15, stiffness: 210 }); // 0→1（过冲 ~1.06）
+  const pad = 76 * (1 - s); // 外扩 76px → 0（过冲时略收进 bbox）
+  const op = Math.min(1, f / 3);
+  const arm = 40 - 14 * ramp(frame, t.ft + 3, 12, EASE.out); // 臂长晚一拍收一档
+  const flash = ramp(frame, t.ft + 3, 3, EASE.out) * (1 - ramp(frame, t.ft + 6, 12, EASE.out));
+  const x = t.x - pad;
+  const y = t.y - pad;
+  const w = t.w + pad * 2;
+  const h = t.h + pad * 2;
+  const d = [
+    `M${x} ${y + arm}V${y}H${x + arm}`,
+    `M${x + w - arm} ${y}H${x + w}V${y + arm}`,
+    `M${x + w} ${y + h - arm}V${y + h}H${x + w - arm}`,
+    `M${x + arm} ${y + h}H${x}V${y + h - arm}`,
+  ].join('');
+  return (
+    <>
+      <div style={{ position: 'absolute', left: t.x, top: t.y, width: t.w, height: t.h, borderRadius: 6, background: alpha(MACHINE, 0.075 * flash), boxShadow: `inset 0 0 0 2px ${alpha(MACHINE, 0.4 * flash)}` }} />
+      <svg width={WW} height={WH} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', opacity: op }}>
+        <path d={d} fill="none" stroke={MACHINE} strokeWidth={3.5} strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </>
+  );
+};
+
+const TAG_H = 50;
+const CHAR_W = 0.6 * 32; // 32px 等宽字步进
+const tagWidth = (t: Target) => Math.round((t.head.length + 3 + t.detail.length) * CHAR_W + 34);
+
+const Label: React.FC<{ t: Target; frame: number }> = ({ t, frame }) => {
+  const s0 = t.ft + 5;
+  if (frame < s0) return null;
+  const rise = ramp(frame, s0, 12, EASE.out);
+  const pop = ramp(frame, s0, 4, EASE.out);
+  const full = `${t.head} · ${t.detail}`;
+  const typedF = Math.min(full.length, (frame - s0) * 2.2 + 1); // 机器在写：~2 字/帧
+  const typed = Math.floor(typedF);
+  const w = tagWidth(t); // 定位用的最终宽度
+  const wNow = Math.min(w, typedF * CHAR_W + 34); // 签条随字长出来（右缘略领先于字）
+  const typing = typed < full.length;
+  let x = t.x;
+  let y = t.y;
+  if (t.tag === 'right') { x = t.x + t.w + 16; y = t.y + (t.h - TAG_H) / 2; }
+  if (t.tag === 'above') { x = t.x; y = t.y - TAG_H - 10; }
+  if (t.tag === 'below') { x = t.x; y = t.y + t.h + 12; }
+  if (t.tag === 'belowRight') { x = t.x + t.w - w; y = t.y + t.h + 10; }
+  const head = full.slice(0, Math.min(typed, t.head.length));
+  const rest = typed > t.head.length ? full.slice(t.head.length, typed) : '';
+  return (
+    <div style={{
+      position: 'absolute', left: t.tag === 'belowRight' ? x + w - wNow : x, top: y, width: wNow, height: TAG_H, borderRadius: 10, background: MACHINE,
+      boxShadow: `0 10px 22px -10px ${alpha('#0c1a5a', 0.55)}, inset 0 1px 0 rgba(255,255,255,0.22)`,
+      opacity: pop, overflow: 'hidden',
+      transform: `translateY(${((1 - rise) * 8).toFixed(2)}px)`,
+      display: 'flex', alignItems: 'center', paddingLeft: 17, boxSizing: 'border-box',
+      font: `600 32px ${MONO}`, letterSpacing: 0, whiteSpace: 'pre', color: '#ffffff',
+    }}>
+      <span style={{ fontWeight: 750 }}>{head}</span>
+      <span style={{ color: 'rgba(255,255,255,0.78)', fontWeight: 500 }}>{rest}</span>
+      {typing && <span style={{ display: 'inline-block', width: 14, height: 30, marginLeft: 2, background: 'rgba(255,255,255,0.85)' }} />}
+    </div>
+  );
+};
+
+export const ScanlineAnnotateFocus: React.FC = () => {
+  const frame = useCurrentFrame();
+  const ly = scanY(frame);
+  const lineOn = ramp(frame, SCAN0 - 4, 5, EASE.out) * (1 - ramp(frame, SCAN1, 8, EASE.exit));
+  const fired = TARGETS.filter((t) => frame >= t.ft).length;
+  const done = ramp(frame, LAST_FIRE + 8, 8, EASE.out);
+  const push = 1 + 0.035 * ramp(frame, 0, SCANLINE_ANNOTATE_FOCUS_DURATION, EASE.swift); // 极缓推镜
+  const statusIn = ramp(frame, 0, 10, EASE.out);
+  const scanProg = Math.min(1, Math.max(0, (frame - SCAN0) / (SCAN1 - SCAN0)));
+
+  return (
+    <AbsoluteFill>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.05 }} fill={{ x: 0.9, y: 0.95 }} vignette={0.2} />
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: '50% 54%' }}>
+        {/* ── 状态行（窗外上方）── */}
+        <div style={{ position: 'absolute', left: WX, top: 84, width: WW, height: 48, opacity: statusIn, font: `600 30px ${MONO}`, color: L.ink, display: 'flex', alignItems: 'center' }}>
+          <div style={{ width: 14, height: 14, borderRadius: 7, marginRight: 16, background: done > 0.5 ? MACHINE : alpha(MACHINE, 0.45 + 0.55 * (0.5 + 0.5 * Math.sin(frame / 3))), boxShadow: `0 0 0 6px ${alpha(MACHINE, 0.12)}` }} />
+          <span style={{ color: done > 0.5 ? MACHINE : L.ink, letterSpacing: '0.06em' }}>{done > 0.5 ? 'BRAND READ' : 'READING'}</span>
+          <span style={{ color: L.ink3, marginLeft: 18, fontWeight: 500 }}>{BRAND.name}</span>
+          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 20 }}>
+            <div style={{ width: 220, height: 6, borderRadius: 3, background: alpha(L.ink, 0.1), overflow: 'hidden' }}>
+              <div style={{ width: `${(scanProg * 100).toFixed(2)}%`, height: '100%', background: MACHINE, borderRadius: 3 }} />
+            </div>
+            <span style={{ fontVariantNumeric: 'tabular-nums', letterSpacing: '0.04em' }}>
+              <span style={{ color: L.ink3, fontWeight: 500 }}>SIGNALS </span>
+              <span style={{ color: fired === TARGETS.length ? MACHINE : L.ink }}>{String(fired).padStart(2, '0')}</span>
+              <span style={{ color: L.ink3 }}> / {String(TARGETS.length).padStart(2, '0')}</span>
+            </span>
+          </div>
+        </div>
+
+        {/* ── 浏览器窗：页面 + 扫描余晖（裁进窗内）── */}
+        <div style={{ position: 'absolute', left: WX, top: WY, width: WW, height: WH, borderRadius: 20, overflow: 'hidden', boxShadow: `${softShadow(30, { color: L.shadow, strength: 1.1 })}, 0 0 0 1px ${alpha(L.ink, 0.08)}` }}>
+          <Page />
+          {/* 已读余晖：扫描线身后 140px 的淡蓝洗色 + 点阵（机器"读过"的痕迹） */}
+          {lineOn > 0.01 && (
+            <>
+              <div style={{
+                position: 'absolute', left: 0, width: WW, top: ly - 140, height: 140, opacity: lineOn,
+                background: `linear-gradient(180deg, ${alpha(MACHINE, 0)} 0%, ${alpha(MACHINE, 0.05)} 60%, ${alpha(MACHINE, 0.13)} 100%)`,
+              }} />
+              <div style={{
+                position: 'absolute', left: 0, width: WW, top: ly - 90, height: 90, opacity: lineOn * 0.8,
+                backgroundImage: `radial-gradient(circle, ${alpha(MACHINE, 0.55)} 1.3px, transparent 1.9px)`, backgroundSize: '18px 18px', backgroundPosition: '0 0',
+                WebkitMaskImage: 'linear-gradient(180deg, transparent, #000)', maskImage: 'linear-gradient(180deg, transparent, #000)',
+              }} />
+              <div style={{
+                position: 'absolute', left: 0, width: WW, top: ly - 1.5, height: 3, opacity: lineOn, background: MACHINE,
+                boxShadow: `0 0 10px ${alpha(MACHINE, 0.55)}, 0 0 28px ${alpha(MACHINE, 0.3)}`,
+              }} />
+            </>
+          )}
+        </div>
+
+        {/* ── 窗框两侧游标：随线滑动，左侧读出 Y ── */}
+        {lineOn > 0.01 && (
+          <div style={{ opacity: lineOn }}>
+            <svg width={22} height={26} viewBox="0 0 22 26" style={{ position: 'absolute', left: WX - 30, top: WY + ly - 13 }}>
+              <path d="M2 2 L20 13 L2 24 Z" fill={MACHINE} />
+            </svg>
+            <svg width={22} height={26} viewBox="0 0 22 26" style={{ position: 'absolute', left: WX + WW + 8, top: WY + ly - 13 }}>
+              <path d="M20 2 L2 13 L20 24 Z" fill={MACHINE} />
+            </svg>
+            <div style={{ position: 'absolute', left: WX - 150, top: WY + ly - 14, width: 112, textAlign: 'right', font: `600 22px ${MONO}`, color: MACHINE, fontVariantNumeric: 'tabular-nums' }}>
+              Y {String(Math.max(0, Math.round(ly))).padStart(4, '0')}
+            </div>
+          </div>
+        )}
+
+        {/* ── 取景框与标签（页面坐标，叠在窗上；不裁切，标签可略出框）── */}
+        <div style={{ position: 'absolute', left: WX, top: WY, width: WW, height: WH }}>
+          {TARGETS.map((t) => <Bracket key={t.key} t={t} frame={frame} />)}
+          {TARGETS.map((t) => <Label key={t.key} t={t} frame={frame} />)}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};