@biunow/agent-biuvibe 0.0.0-stage → 1.0.0

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//347/211/207/346/256/265/344/273/243/347/240/201.js

@@ -0,0 +1,243 @@
+// 片段 · 发布会式界面（t2），做教程、功能、参数最顺手：深色光斑底，一屏一件事；字从模糊里浮出，卡片是毛玻璃、轻回弹落位。
+// data: { eyebrow?（标题上方小字）, title?, subtitle?, accent?:'#3d6bff' }
+// cues：title（at 这一帧标题开始从模糊里浮出；text/sub 覆盖 data）
+//       card | step | image（一张卡：text 卡标题，sub 说明，image 截图路径；at 这一帧卡片开始弹入；步骤号按出现顺序 01、02…，data.step 可指定）
+//         · 有 image：一屏一张，截图等比放进卡里（contain，不裁）。横图横卡；竖图（手机截图）在横屏里是「左字右图」，图撑满高度
+//         · 没有 image：功能卡。连着的几张（最多 3 张）并排站在一屏里，新卡进来时旧卡让位（像示范片的三卡并列）；
+//           卡上有图标（data.icon：wave memory agent clock phone layers chart code check play bolt lock，不写就画步骤号）、
+//           大标题、说明，可选一个大数字（data.value / prefix / suffix / decimals ＋ data.label，卡片落定后计数）
+//       highlight（框出当前截图卡里的一块：data.rect = [x, y, w, h]，相对截图的 0..1；text 可选标签）
+//       number（大数字单独一屏：data {value, prefix, suffix, decimals, label?（数字上方小字）}；at = 数字落定时刻，提前 0.9s 开始计数，
+//               上一屏这时开始退场，不叠在卡片上；说明写 text 或 sub 都认）
+// 竖屏：第一张卡进来时标题缩成页眉留在顶上（不让上下大片空着）；卡片按剩余高度放大。safe：版面只排在 top..H−bottom 之间。
+// alpha：不画光斑底；卡片垫一层深色、字带投影，压在亮画面上也看得清。
+CLIPS.t2_keynote_ui = (() => {
+const { clamp, lerp } = U;
+const SANS = '"Inter", "PuHui-Medium"', SANSB = '"Inter", "PuHui-Bold"', ZH = '"PuHui-Medium"', ZHB = '"PuHui-Bold"';
+let BL, slides, scr = {}, G;
+const track = (c, size, em = -0.02) => { c.letterSpacing = (size * em).toFixed(2) + 'px'; };
+// 本语法自带的几个线性图标（UI.icon 只有 wave/memory/agent）：单位框 ±0.5，圆头等线宽
+const ICON = {
+  clock: c => { c.beginPath(); c.arc(0, 0, 0.42, 0, 7); c.stroke(); c.beginPath(); c.moveTo(0, -0.24); c.lineTo(0, 0); c.lineTo(0.18, 0.1); c.stroke(); },
+  phone: c => { c.beginPath(); c.roundRect(-0.25, -0.45, 0.5, 0.9, 0.1); c.stroke(); c.beginPath(); c.moveTo(-0.08, 0.32); c.lineTo(0.08, 0.32); c.stroke(); },
+  layers: c => { for (let k = 0; k < 3; k++) { const y = -0.22 + k * 0.22; c.globalAlpha = k ? 0.6 : 1; c.beginPath(); c.moveTo(-0.45, y); c.lineTo(0, y - 0.18); c.lineTo(0.45, y); c.lineTo(0, y + 0.18); c.closePath(); c.stroke(); } c.globalAlpha = 1; },
+  chart: c => { c.beginPath(); c.moveTo(-0.42, -0.42); c.lineTo(-0.42, 0.4); c.lineTo(0.44, 0.4); c.stroke(); c.beginPath(); c.moveTo(-0.28, 0.18); c.lineTo(-0.06, -0.04); c.lineTo(0.1, 0.06); c.lineTo(0.36, -0.26); c.stroke(); },
+  code: c => { c.beginPath(); c.moveTo(-0.18, -0.28); c.lineTo(-0.42, 0); c.lineTo(-0.18, 0.28); c.moveTo(0.18, -0.28); c.lineTo(0.42, 0); c.lineTo(0.18, 0.28); c.moveTo(0.08, -0.38); c.lineTo(-0.08, 0.38); c.stroke(); },
+  check: c => { c.beginPath(); c.arc(0, 0, 0.42, 0, 7); c.stroke(); c.beginPath(); c.moveTo(-0.2, 0); c.lineTo(-0.05, 0.16); c.lineTo(0.22, -0.16); c.stroke(); },
+  play: c => { c.beginPath(); c.moveTo(-0.22, -0.34); c.lineTo(0.34, 0); c.lineTo(-0.22, 0.34); c.closePath(); c.fill(); },
+  bolt: c => { c.beginPath(); c.moveTo(0.08, -0.46); c.lineTo(-0.28, 0.06); c.lineTo(0, 0.06); c.lineTo(-0.08, 0.46); c.lineTo(0.28, -0.06); c.lineTo(0, -0.06); c.closePath(); c.fill(); },
+  lock: c => { c.beginPath(); c.roundRect(-0.32, -0.04, 0.64, 0.46, 0.08); c.stroke(); c.beginPath(); c.arc(0, -0.04, 0.2, Math.PI, 0); c.stroke(); },
+};
+const icon = (g, kind, x, y, s, col, t) => {
+  if (['wave', 'memory', 'agent'].includes(kind)) return UI.icon(g, kind, x, y, s, col, t);
+  const f = ICON[kind]; if (!f) return false;
+  g.save(); g.translate(x, y); g.scale(s, s); g.strokeStyle = col; g.fillStyle = col; g.lineWidth = 0.075; g.lineCap = 'round'; g.lineJoin = 'round'; f(g); g.restore();
+};
+// 放得下才算：TY.fit 量每行宽度，多行折成等长（说明文字不留一个字挂在下一行）
+const fitB = (g, text, maxW, size, fam, o = {}) => TY.fit(g, text, maxW, size, fam, { ...o, balance: true });
+const fmtNum = (d, k) => (d.prefix || '') + TY.fmt((+d.value || 0) * k, d.decimals ?? 0) + (d.suffix || '');
+return {
+  fonts: ['PuHui-Medium', 'PuHui-Bold'],
+  safe: true,
+  init(ctx) {
+    const { W, H, u, safe } = ctx;
+    BL = [{ x: .22 * W, y: .28 * H, r: .4 * Math.max(W, H), col: [150, 90, 238], a: .75, ax: .11 * W, ay: .11 * H, period: 11, ph: 0 },
+      { x: .79 * W, y: .24 * H, r: .37 * Math.max(W, H), col: [56, 104, 255], a: .7, ax: .1 * W, ay: .15 * H, period: 13, ph: 2.1 },
+      { x: .69 * W, y: .86 * H, r: .3 * Math.max(W, H), col: [120, 214, 255], a: .5, ax: .13 * W, ay: .09 * H, period: 9.5, ph: 4 },
+      { x: .27 * W, y: .89 * H, r: .27 * Math.max(W, H), col: [255, 96, 84], a: .42, ax: .09 * W, ay: .08 * H, period: 12, ph: 1.3 }];
+    const hasTitle = ctx.of('title').length > 0, hdr = ctx.portrait && hasTitle;
+    G = { y0: safe.top + (hdr ? 250 * u : 40 * u), y1: H - safe.bottom - 40 * u, hdrY: safe.top + 150 * u, hdr };
+    G.cy = (G.y0 + G.y1) / 2; G.bh = G.y1 - G.y0;
+    // 分屏：截图卡一张一屏；连着的无图卡最多 3 张一屏；number 单独一屏
+    slides = []; let k = 0;
+    for (const q of ctx.cues) {
+      if (['card', 'step', 'image'].includes(q.kind)) {
+        const n = q.data && q.data.step != null ? q.data.step : ++k, im = q.image && ctx.IMG[q.image], cd = { q, n, im };
+        const last = slides[slides.length - 1];
+        if (!im && last && last.type === 'cards' && last.cards.length < 3) last.cards.push(cd);
+        else slides.push({ type: im ? 'img' : 'cards', cards: [cd], start: q.at });
+      } else if (q.kind === 'number') slides.push({ type: 'num', q, start: q.at - 0.9 });
+    }
+    slides.forEach((s, i) => { s.next = slides[i + 1] ? slides[i + 1].start : 1e9; });
+    // 截图卡的版式：标题行 ＋ 截图区；截图区按截图比例定。竖图在横屏里改成「左字右图」
+    const maxW = W * (ctx.portrait ? 0.9 : 0.8), maxH = G.bh * (ctx.portrait ? 0.92 : 0.86), head = (ctx.portrait ? 230 : 130) * u, pad = 36 * u;
+    for (const s of slides) if (s.type === 'img') {
+      const cd = s.cards[0], ar = cd.im.width / cd.im.height;
+      if (!ctx.portrait && ar < 0.9) {                                         // 横屏放竖图：左字右图，图撑满卡高
+        const ih = maxH - 2 * pad, iw = ih * ar, tw = 560 * u;
+        cd.box = { w: tw + iw + 3 * pad, h: maxH, img: { x: tw + 2 * pad, y: pad, w: iw, h: ih }, side: tw };
+      } else {
+        let iw = maxW - 2 * pad, ih = iw / ar; if (ih > maxH - head - 2 * pad) { ih = maxH - head - 2 * pad; iw = ih * ar; }
+        const cw = Math.max(iw + 2 * pad, Math.min(maxW, 760 * u)), ch = ih + head + 2 * pad;
+        cd.box = { w: cw, h: ch, img: { x: (cw - iw) / 2, y: head + pad, w: iw, h: ih } };
+      }
+    }
+  },
+  draw(c, t, ctx) {
+    const { W, H, u, data: d } = ctx, acc = d.accent || '#3d6bff';
+    // ---- 底：光斑（只依赖片段时间，连续） ----
+    let bd = null;
+    if (!ctx.alpha) {
+      const bgc = UI.scratch('clip_t2bg', W, H), g = bgc.getContext('2d'); g.clearRect(0, 0, W, H);   // 先清空：不清的话上一帧的残留会透过半透明边缘，同一时刻先后渲出来差 1 个色阶（qa 确定性 ✗）
+      UI.mesh(g, t, { base: '#050508', blobs: BL, blur: 90, scale: 0.25, grain: 0.035, key: 'clip_t2mesh' });
+      const vg = g.createRadialGradient(W / 2, H / 2, 100 * u, W / 2, H / 2, Math.max(W, H) * 0.55); vg.addColorStop(0, 'rgba(0,0,0,0.38)'); vg.addColorStop(1, 'rgba(0,0,0,0.1)');
+      g.fillStyle = vg; g.fillRect(0, 0, W, H); c.drawImage(bgc, 0, 0); bd = UI.backdrop(bgc, { blur: 40, key: 'clip_t2bd' });
+    }
+    const shadowText = g => { if (ctx.alpha) { g.shadowColor = 'rgba(0,0,0,0.75)'; g.shadowBlur = 18 * u; g.shadowOffsetY = 3 * u; } };
+    // ---- 标题：眉题 → 主标题（模糊→清晰＋上移）→ 副标题；第一屏进来时：横屏退到后面，竖屏缩成页眉留在顶上 ----
+    const qt = ctx.of('title')[0], first = slides[0] ? slides[0].start : 1e9;
+    if (qt) {
+      const out = MO.appleOut(MO.seg(t, first - 0.15, first + 0.5));
+      const keep = G.hdr, title = qt.text ?? d.title ?? '', eb = (qt.data && qt.data.eyebrow) ?? d.eyebrow, sub = qt.sub ?? d.subtitle;
+      if (out < 1 || keep) {
+        c.save(); c.textAlign = 'center'; c.textBaseline = 'alphabetic'; shadowText(c);
+        let sz = TY.fit(c, title, W * 0.86, (ctx.portrait ? 150 : 190) * u, 'Inter', { maxLines: 1, min: 0.55, weight: '600 ', soft: true });   // 先缩字号放一行，放不下再折两行
+        if (!sz.ok) sz = fitB(c, title, W * 0.86, (ctx.portrait ? 150 : 190) * u, 'Inter', { maxLines: 2, weight: '600 ' });
+        const cy = G.cy - (sz.lines.length - 1) * sz.size * 0.55;
+        // 竖屏：整块缩到页眉（主标题 → 约 64px），眉题和副标题淡出
+        const hs = keep ? Math.min(1, 68 * u / sz.size) : 1, sc = keep ? lerp(1, hs, out) : lerp(1, 0.92, out), ty = keep ? lerp(0, G.hdrY - cy, out) : 0;
+        c.translate(W / 2, cy + ty); c.scale(sc, sc); c.translate(-W / 2, -cy);
+        const aSide = 1 - out;
+        if (!keep) { c.globalAlpha = 1 - out; if (out > 0) c.filter = `blur(${(20 * out * u).toFixed(1)}px)`; }
+        if (eb && aSide > 0) { c.save(); c.globalAlpha *= keep ? aSide : 1; c.font = `500 ${34 * u}px ${ZH}`; c.fillStyle = '#a7a7b4'; c.letterSpacing = `${6 * u}px`; TY.blurIn(c, eb, W / 2, cy - sz.size * 0.95, MO.appleOut(ctx.p(t, qt.at, 0.7)), { blur: 10 * u, dy: 16 * u }); c.restore(); }
+        c.font = `600 ${sz.size}px ${SANSB}`; track(c, sz.size); c.fillStyle = '#f5f3ff';
+        sz.lines.forEach((ln, i) => TY.blurIn(c, ln, W / 2, cy + i * sz.size * 1.1, MO.appleOut(ctx.p(t, qt.at + 0.15 + i * 0.12, 1.0)), { blur: 26 * u, dy: 40 * u }));
+        if (sub && aSide > 0) { c.save(); c.globalAlpha *= keep ? aSide : 1; c.letterSpacing = '0px'; c.font = `400 ${46 * u}px ${ZH}`; c.fillStyle = '#c9c9d4';
+          TY.wrap(c, sub, W * 0.84).forEach((ln, i) => TY.blurIn(c, ln, W / 2, cy + (sz.lines.length - 1) * sz.size * 1.1 + 110 * u + i * 62 * u, MO.appleOut(ctx.p(t, qt.at + 0.5, 0.9)), { blur: 12 * u, dy: 22 * u })); c.restore(); }
+        c.restore();
+      }
+    }
+    // ---- 每一屏：下一屏开始时往左后方退走（0.65s），不和下一屏的内容叠着 ----
+    slides.forEach((s, si) => {
+      if (t < s.start - 1e-6) return;
+      const nx = slides[si + 1], leave = MO.appleOut(MO.seg(t, s.next - 0.15, s.next + (nx && nx.type === 'num' ? 0.3 : 0.5))); if (leave >= 1) return;
+      if (s.type === 'num') return drawNumber(c, s, t, leave, ctx, shadowText);
+      if (s.type === 'img') return drawCard(c, s.cards[0], 0, t, leave, ctx, bd, cardGeoImg(s.cards[0], ctx), 'i' + si);
+      // 无图卡并排：n 张时的位置；新卡进来时旧卡按弹簧挪到新位置
+      const vis = s.cards.filter(cd => t >= cd.q.at - 1e-6), n = vis.length, last = vis[n - 1]; ctx._stat = s.cards.some(cd => cd.q.data && cd.q.data.value != null);
+      const rf = n > 1 ? MO.spring(t - last.q.at, { duration: 0.7, bounce: 0.12 }) : 1;
+      vis.forEach((cd, j) => { const A = rowGeo(j, n, ctx, s.cards.length), Bp = j < n - 1 ? rowGeo(j, n - 1, ctx, s.cards.length) : A;
+        const geo = { cx: lerp(Bp.cx, A.cx, rf), cy: lerp(Bp.cy, A.cy, rf), w: lerp(Bp.w, A.w, rf), h: lerp(Bp.h, A.h, rf), focus: j === n - 1 ? 1 : 1 - 0.25 * rf };
+        drawCard(c, cd, j, t, leave, ctx, bd, geo, 'c' + si + '_' + j); });
+    });
+  },
+};
+// 截图卡的屏幕几何
+function cardGeoImg(cd, ctx) { return { cx: ctx.W / 2, cy: G.cy, w: cd.box.w, h: cd.box.h, focus: 1 }; }
+// 无图卡：横屏排一行（1 张时宽一点），竖屏叠成一列；total = 这一屏最终有几张（排版按当前张数，但尺寸上限按最终张数，挪位时不忽大忽小）
+function rowGeo(j, n, ctx, total) {
+  const { W, u } = ctx, gap = 44 * u;
+  if (ctx.portrait) { const w = W * 0.86, h = Math.min(400 * u, (G.bh - (total - 1) * gap) / total), y0 = G.cy - (n * h + (n - 1) * gap) / 2; return { cx: W / 2, cy: y0 + j * (h + gap) + h / 2, w, h }; }
+  const w = total === 1 ? 760 * u : Math.min(540 * u, (W * 0.9 - (total - 1) * gap) / total), h = Math.min((ctx._stat ? 660 : 540) * u, G.bh * 0.9), x0 = W / 2 - (n * w + (n - 1) * gap) / 2;
+  return { cx: x0 + j * (w + gap) + w / 2, cy: G.cy, w, h };
+}
+// 一张卡：弹簧从下方升起＋绕 Y 轴转正；内容画进离屏纹理（毛玻璃按卡片的屏幕位置取样），再伪 3D 贴回
+function drawCard(c, cd, i, t, leave, ctx, bd, geo, key) {
+  const { u, data: d } = ctx, q = cd.q, lt = ctx.lt(t, q.at); if (lt <= 0) return;
+  const sp = MO.spring(lt, { duration: 0.7, bounce: 0.15 }), acc = d.accent || '#3d6bff';
+  const Bw = geo.w, Bh = geo.h, cx = geo.cx - leave * ctx.W * 0.35, cy = geo.cy + (1 - sp) * 170 * u + MO.float(t, 5 * u, 3.6, i);
+  const sc = (0.9 + 0.1 * sp) * (1 - 0.12 * leave) * lerp(0.97, 1, geo.focus), ry = (1 - sp) * -0.45 + 0.03 * Math.sin(t * 0.9 + i) - 0.35 * leave, a = clamp(lt / 0.2) * (1 - leave) * lerp(0.6, 1, geo.focus);
+  const pad = 60, tex = scr[key] || (scr[key] = document.createElement('canvas')); tex.width = Math.ceil(Bw + 2 * pad); tex.height = Math.ceil(Bh + 2 * pad);
+  const g = tex.getContext('2d'); g.reset();
+  const sw = Bw * sc, sh = Bh * sc;
+  if (ctx.alpha) { g.fillStyle = 'rgba(12,12,22,0.62)'; g.beginPath(); g.roundRect(pad, pad, Bw, Bh, 34 * u); g.fill(); }
+  UI.glass(g, { x: pad, y: pad, w: Bw, h: Bh, r: 34 * u, bd, sample: { x: cx - sw / 2, y: cy - sh / 2, w: sw, h: sh }, tint: ctx.alpha ? 0.08 : 0.075, stroke: 0.22, light: 0.14, shadow: false });
+  g.save(); g.translate(pad, pad);
+  if (cd.im) imgContent(g, cd, Bw, Bh, t, ctx, acc); else featContent(g, cd, Bw, Bh, lt, t, ctx, acc);
+  UI.sheen(g, UI.rrPath(0, 0, Bw, Bh, 34 * u), MO.seg(lt, 0.4, 1.2), { x0: 0, x1: Bw, width: 120 * u, angle: -0.35, alpha: 0.16 });   // 光扫过整张卡（入场后 0.4s）
+  g.restore();
+  c.save(); c.globalAlpha = a;
+  UI.shadow(c, cx - sw / 2 + 10 * u, cy - sh / 2 + 20 * u, sw - 20 * u, sh - 20 * u, 34 * u, { blur: 80 * u, oy: 40 * u, alpha: 0.55 });
+  UI.persp(c, tex, { cx, cy, w: tex.width * sc, h: tex.height * sc, ry, persp: 1800 * u, strip: 3, shade: 0.35 });
+  c.restore();
+}
+// 步骤号徽章
+function badge(g, x, y, s, n, acc, u) { g.fillStyle = acc; g.beginPath(); g.roundRect(x, y, s, s, s * 0.28); g.fill();
+  g.fillStyle = '#fff'; g.font = `700 ${s * 0.5}px ${SANSB}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(String(n).padStart(2, '0'), x + s / 2, y + s / 2 + 2 * u); g.textAlign = 'left'; g.textBaseline = 'alphabetic'; }
+// 截图卡的内容：步骤号＋标题＋说明，截图 contain；highlight 框出一块
+function imgContent(g, cd, Bw, Bh, t, ctx, acc) {
+  const { u } = ctx, q = cd.q, B = cd.box, I = B.img, hp = 40 * u, bs = 70 * u;
+  badge(g, hp, hp, bs, cd.n, acc, u);
+  if (B.side) {                                                           // 左字右图：标题、说明在左栏往下排
+    const tw = B.side - hp, tl = fitB(g, q.text || '', tw, 58 * u, 'PuHui-Bold', { maxLines: 3, weight: '600 ' });
+    g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = '#f5f5f7'; tl.lines.forEach((ln, k) => g.fillText(ln, hp, hp + bs + 70 * u + k * tl.size * 1.25));
+    if (q.sub) { const sl = fitB(g, q.sub, tw, 34 * u, 'PuHui-Medium', { maxLines: 5 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = 'rgba(235,235,245,0.66)';
+      sl.lines.forEach((ln, k) => g.fillText(ln, hp, hp + bs + 70 * u + tl.lines.length * tl.size * 1.25 + 30 * u + k * sl.size * 1.4)); }
+  } else {
+    const tx = hp + bs + 26 * u, tw = Bw - tx - hp;
+    if (ctx.portrait) {                                                    // 竖屏：卡头高一些，标题、说明字大一号
+      const tl = fitB(g, q.text || '', tw, 56 * u, 'PuHui-Bold', { maxLines: 2, weight: '600 ', min: 0.7 }); g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = '#f5f5f7';
+      tl.lines.forEach((ln, k) => g.fillText(ln, tx, hp + tl.size * 0.85 + k * tl.size * 1.2));
+      // 标题占两行时说明只留一行，卡头放得下
+      if (q.sub) { const sl = fitB(g, q.sub, tw, 34 * u, 'PuHui-Medium', { maxLines: tl.lines.length > 1 ? 1 : 2, min: 0.75 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = 'rgba(235,235,245,0.66)';
+        sl.lines.forEach((ln, k) => g.fillText(ln, tx, hp + tl.size * 0.85 + (tl.lines.length - 1) * tl.size * 1.2 + 24 * u + sl.size + k * sl.size * 1.35)); }
+    } else {
+    const tl = TY.fit(g, q.text || '', tw, 46 * u, 'PuHui-Bold', { maxLines: 1, weight: '600 ' });
+    g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = '#f5f5f7'; g.fillText(tl.lines[0] || '', tx, hp + (q.sub ? 32 * u : 48 * u));
+    if (q.sub) { const sl = TY.fit(g, q.sub, tw, 28 * u, 'PuHui-Medium', { maxLines: 1 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = 'rgba(235,235,245,0.62)'; g.fillText(sl.lines[0] || '', tx, hp + 74 * u); }
+    }
+  }
+  const f = CLIP.fit(cd.im.width, cd.im.height, I.x, I.y, I.w, I.h);
+  g.save(); g.shadowColor = 'rgba(0,0,0,.45)'; g.shadowBlur = 30 * u; g.shadowOffsetY = 12 * u; g.fillStyle = '#000'; g.beginPath(); g.roundRect(f.x, f.y, f.w, f.h, 10 * u); g.fill(); g.restore();
+  g.save(); g.beginPath(); g.roundRect(f.x, f.y, f.w, f.h, 10 * u); g.clip(); g.drawImage(cd.im, f.x, f.y, f.w, f.h); g.restore();
+  g.strokeStyle = 'rgba(255,255,255,0.22)'; g.lineWidth = 1.5; g.beginPath(); g.roundRect(f.x + .75, f.y + .75, f.w - 1.5, f.h - 1.5, 10 * u); g.stroke();
+  // 框出重点：at 这一帧框开始弹出，之后呼吸；一道光扫过框内（只认落在这张卡在屏期间的 highlight）
+  const nxAt = (() => { const i = ctx.cues.indexOf(q); const n = ctx.cues.slice(i + 1).find(z => ['card', 'step', 'image', 'number'].includes(z.kind)); return n ? (n.kind === 'number' ? n.at - 0.9 : n.at) : 1e9; })();
+  for (const qh of ctx.of('highlight')) {
+    if (qh.at < q.at || qh.at >= nxAt || !qh.data || !qh.data.rect) continue;
+    const hl = ctx.lt(t, qh.at); if (hl <= 0) continue;
+    const R = CLIP.sub(qh.data.rect, f), s = MO.spring(hl, { duration: 0.45, bounce: 0.25 }), e = 8 * u * (1 - s);
+    g.save(); g.fillStyle = 'rgba(0,0,0,0.38)'; g.beginPath(); g.rect(f.x, f.y, f.w, f.h); g.roundRect(R.x - e, R.y - e, R.w + 2 * e, R.h + 2 * e, 10 * u); g.globalAlpha = clamp(hl / 0.3); g.fill('evenodd'); g.restore();
+    g.save(); g.strokeStyle = acc; g.lineWidth = 5 * u; g.shadowColor = acc; g.shadowBlur = 18 * u * (0.7 + 0.3 * Math.sin(hl * 5)); g.globalAlpha = clamp(hl / 0.15);
+    g.beginPath(); g.roundRect(R.x - e, R.y - e, R.w + 2 * e, R.h + 2 * e, 10 * u); g.stroke(); g.restore();
+    UI.sheen(g, UI.rrPath(R.x, R.y, R.w, R.h, 10 * u), MO.seg(hl, 0.25, 1.0), { x0: R.x, x1: R.x + R.w, width: Math.max(60 * u, R.w * 0.2), alpha: 0.35 });
+    if (qh.text) { g.font = `600 ${30 * u}px ${ZHB}`; const lw = g.measureText(qh.text).width + 36 * u, ly = R.y + R.h + 16 * u + 48 * u > f.y + f.h ? R.y - 64 * u : R.y + R.h + 16 * u;
+      g.save(); g.globalAlpha = clamp((hl - 0.15) / 0.25); g.fillStyle = acc; g.beginPath(); g.roundRect(clamp(R.x, f.x, f.x + f.w - lw), ly, lw, 48 * u, 24 * u); g.fill(); g.fillStyle = '#fff'; g.textBaseline = 'middle'; g.fillText(qh.text, clamp(R.x, f.x, f.x + f.w - lw) + 18 * u, ly + 25 * u); g.restore(); }
+  }
+}
+// 无图功能卡的内容：图标（或步骤号）→ 大标题 → 说明 →（可选）大数字计数。横屏竖卡上下排，竖屏横卡左右排
+function featContent(g, cd, Bw, Bh, lt, t, ctx, acc) {
+  const { u } = ctx, q = cd.q, dd = q.data || {}, hasNum = dd.value != null, pad = 48 * u, tile = (ctx.portrait ? 110 : 120) * u;
+  const drawTile = (x, y) => { g.fillStyle = 'rgba(255,255,255,0.10)'; g.beginPath(); g.roundRect(x, y, tile, tile, 26 * u); g.fill();
+    if (!dd.icon || icon(g, dd.icon, x + tile / 2, y + tile / 2, tile * 0.6, '#f2f2f7', t) === false) {
+      g.fillStyle = acc; g.beginPath(); g.roundRect(x, y, tile, tile, 26 * u); g.fill(); g.fillStyle = '#fff'; g.font = `700 ${tile * 0.46}px ${SANSB}`; g.textAlign = 'center'; g.textBaseline = 'middle';
+      g.fillText(String(cd.n).padStart(2, '0'), x + tile / 2, y + tile / 2 + 3 * u); g.textAlign = 'left'; g.textBaseline = 'alphabetic'; } };
+  const num = (x, y, size, align) => { const v = MO.expoOut(clamp((lt - 0.35) / 0.9)); g.save(); g.font = `600 ${size}px ${SANSB}`; track(g, size, -0.03); g.fillStyle = '#fff';
+    TY.tabular(g, fmtNum(dd, v), x, y, { align }); g.restore(); if (dd.label) { g.font = `400 ${28 * u}px ${ZH}`; g.fillStyle = 'rgba(235,235,245,0.6)'; g.textAlign = align; g.fillText(dd.label, x, y + 46 * u); g.textAlign = 'left'; } };
+  g.textAlign = 'left'; g.textBaseline = 'alphabetic';
+  if (!ctx.portrait) {
+    drawTile(pad, pad);
+    const tl = fitB(g, q.text || '', Bw - 2 * pad, 64 * u, 'PuHui-Bold', { maxLines: 2, weight: '600 ', min: 0.6 });
+    let y = pad + tile + 40 * u + tl.size; g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = '#f5f5f7'; tl.lines.forEach((ln, k) => g.fillText(ln, pad, y + k * tl.size * 1.2)); y += (tl.lines.length - 1) * tl.size * 1.2;
+    if (q.sub) { const sl = fitB(g, q.sub, Bw - 2 * pad, (hasNum ? 32 : 38) * u, 'PuHui-Medium', { maxLines: hasNum ? 2 : 4, min: 0.75 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = 'rgba(235,235,245,0.66)';
+      sl.lines.forEach((ln, k) => g.fillText(ln, pad, y + 26 * u + sl.size + k * sl.size * 1.45)); }
+    if (hasNum) { g.fillStyle = 'rgba(255,255,255,0.12)'; g.fillRect(pad, Bh - pad - 200 * u, Bw - 2 * pad, 1.5); num(pad, Bh - pad - 66 * u, Math.min(128 * u, (Bw - 2 * pad) / Math.max(3, fmtNum(dd, 1).length) * 1.6), 'left'); }
+  } else {
+    drawTile(pad, (Bh - tile) / 2);
+    const tx = pad + tile + 34 * u, nw = hasNum ? Math.min(340 * u, Bw * 0.36) : 0, tw = Bw - tx - pad - nw;
+    const tl = fitB(g, q.text || '', tw, 62 * u, 'PuHui-Bold', { maxLines: 2, weight: '600 ', min: 0.6 });   // 标题放不下就折两行，不再截掉后半句
+    const sl = q.sub ? fitB(g, q.sub, tw, 38 * u, 'PuHui-Medium', { maxLines: tl.lines.length > 1 ? 1 : 2, min: 0.75 }) : { lines: [], size: 0 };
+    const tH = tl.size + (tl.lines.length - 1) * tl.size * 1.15, blk = tH + (sl.lines.length ? 22 * u + sl.lines.length * sl.size * 1.4 : 0), y0 = (Bh - blk) / 2 + tl.size * 0.85;
+    g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = '#f5f5f7'; tl.lines.forEach((ln, k) => g.fillText(ln, tx, y0 + k * tl.size * 1.15));
+    const ys = y0 + (tl.lines.length - 1) * tl.size * 1.15;
+    g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = 'rgba(235,235,245,0.66)'; sl.lines.forEach((ln, k) => g.fillText(ln, tx, ys + 22 * u + sl.size + k * sl.size * 1.4));
+    if (hasNum) num(Bw - pad, Bh / 2 + 20 * u, Math.min(96 * u, nw / Math.max(3, fmtNum(dd, 1).length) * 1.7), 'right');
+  }
+}
+// 大数字一屏：at 落定（提前 0.9s 开始滚）；数字上方可有小字 label，下方说明（text 或 sub）
+function drawNumber(c, s, t, leave, ctx, shadowText) {
+  const { W, u } = ctx, q = s.q, nd = q.data || {}, k = MO.expoOut(clamp((t - s.start) / 0.9)), a = MO.appleOut(clamp((t - s.start - 0.12) / 0.3)) * (1 - leave);
+  const cap = q.text ?? q.sub;
+  c.save(); c.globalAlpha = a; shadowText(c); c.textAlign = 'center'; c.textBaseline = 'alphabetic';
+  if (leave > 0) { c.filter = `blur(${(16 * leave * u).toFixed(1)}px)`; }
+  const str = fmtNum(nd, k), full = fmtNum(nd, 1);
+  c.font = `600 ${220 * u}px ${SANSB}`; track(c, 220 * u, -0.03); let size = 220 * u; const fw = c.measureText(full).width; if (fw > W * 0.88) size *= W * 0.88 / fw;
+  c.font = `600 ${size}px ${SANSB}`; track(c, size, -0.03); c.fillStyle = '#fff';
+  const y = G.cy + size * 0.32 - (cap ? 30 * u : 0);
+  TY.tabular(c, str, W / 2, y, { align: 'center' });
+  c.letterSpacing = '0px';
+  if (nd.label) { c.font = `500 ${34 * u}px ${ZH}`; c.fillStyle = '#a7a7b4'; c.fillText(nd.label, W / 2, y - size * 0.85); }
+  if (cap) { c.font = `400 ${(ctx.portrait ? 46 : 44) * u}px ${ZH}`; c.fillStyle = 'rgba(235,235,245,0.78)'; TY.wrap(c, cap, W * 0.84).forEach((ln, i) => c.fillText(ln, W / 2, y + 100 * u + i * 60 * u)); }
+  c.restore();
+}
+})();

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//347/244/272/350/214/203/345/267/245/347/250/213/eras.js

@@ -0,0 +1,10 @@
+// 示范 · 发布会式（Apple keynote / 产品发布 UI）「Plover 2 的三个功能」（8 秒三镜，产品与数字虚构）。语法卡：references/动画语法/t2_keynote_ui.md
+//   预览 index.html?film=demos/t2_keynote_ui   渲染 render.py --film demos/t2_keynote_ui --out t2.mp4
+// 光斑底只依赖全片时间 t，三个镜头之间无缝；卡片 → 全屏是共享元素展开（rect = 中间卡在镜头 2 末帧的屏幕矩形）。
+window.PUNCH = 0;
+window.SCENE_DIR = 'demos/t2_keynote_ui';
+window.ERAS = [
+  { id: 't2_s1', dur: 2.6 },
+  { id: 't2_s2', dur: 3.0, transition: { type: 'blurPush', dur: 0.55 } },
+  { id: 't2_s3', dur: 2.4, transition: { type: 'expandRect', dur: 0.6, rect: { x: 705.6, y: 252.6, w: 508.8, h: 614.8 }, r: 38 } },
+];

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//347/244/272/350/214/203/345/267/245/347/250/213/t2_s1.js

@@ -0,0 +1,57 @@
+// t2 · 发布会式：「一个 AI 产品发布：三个功能卡片」
+// 镜头 1（2.6s）：深色底上柔和光斑缓慢漂移；眉题 → 产品名（模糊→清晰＋上移，渐变字，光扫过）→ 一句话副标题。相机极慢推近。
+// 本文件同时放 t2 共用的东西（window.T2）：光斑底、字体、颜色。
+(() => {
+const { clamp, lerp } = U;
+const W = 1920, H = 1080;
+const BASE = '#050508';
+const BLOBS = [                                                   // 色相取 Stripe 渐变一系（紫/蓝/青）+ 一点暖色；周期避开 5s（HIG：避免 ~0.2Hz 持续摆动）
+  { x: 430, y: 300, r: 760, col: [150, 90, 238], a: 0.75, ax: 220, ay: 120, period: 11, ph: 0 },
+  { x: 1520, y: 260, r: 700, col: [56, 104, 255], a: 0.7, ax: 200, ay: 160, period: 13, ph: 2.1 },
+  { x: 1320, y: 930, r: 560, col: [120, 214, 255], a: 0.5, ax: 260, ay: 100, period: 9.5, ph: 4 },
+  { x: 520, y: 960, r: 520, col: [255, 96, 84], a: 0.42, ax: 180, ay: 90, period: 12, ph: 1.3 },
+];
+const SANS = '"Inter", "NotoSansSC"', ZH = '"NotoSansSC"';
+// 光斑底：只依赖全片时间 t，三个镜头之间无缝（换镜头时背景不跳）
+const bg = (c, t, { dim = 0.38 } = {}) => {
+  UI.mesh(c, t, { base: BASE, blobs: BLOBS, blur: 90, scale: 0.25, grain: 0.035, key: 't2mesh' });
+  // 中心压暗一点，给白字留对比
+  const g = c.createRadialGradient(W / 2, H / 2, 100, W / 2, H / 2, 1000); g.addColorStop(0, `rgba(0,0,0,${dim})`); g.addColorStop(1, 'rgba(0,0,0,0.1)');
+  c.fillStyle = g; c.fillRect(0, 0, W, H);
+};
+// 大字：字距收紧 −0.02em（苹果/Linear 官网 64px 以上 −0.015～−0.03em）
+const track = (c, size, em = -0.02) => { c.letterSpacing = (size * em).toFixed(2) + 'px'; };
+// 光斑漂移、卡片漂浮、图标律动都读全片时间 t。PHASE：沿用实验时这支片排在 8–16s 的相位，保持定稿画面的构图（换题目时删掉或随便改）
+const PHASE = 8;
+window.T2 = { bg, SANS, ZH, track, BASE, PHASE };
+
+const DUR = 2.6;
+SCENES['t2_s1'] = {
+  draw(c, lt, t) {
+    t += T2.PHASE;
+    bg(c, t);
+    // 相机匀速慢推：1.0 → 1.045（整镜线性，发布会片的慢推不减速，减速到停会让画面「死」掉）
+    const s = lerp(1, 1.045, lt / (DUR + 0.55));
+    c.save(); c.translate(W / 2, H / 2); c.scale(s, s); c.translate(-W / 2, -H / 2);
+    c.textAlign = 'center'; c.textBaseline = 'alphabetic';
+    // 眉题
+    c.font = `500 34px ${ZH}`; c.fillStyle = '#a7a7b4'; c.letterSpacing = '6px';
+    TY.blurIn(c, '全 新 发 布', W / 2, 372, MO.appleOut(MO.seg(lt, 0.1, 0.8)), { blur: 10, dy: 16 });
+    // 产品名：渐变字画进离屏 → 光扫过（source-atop 只亮在字上）→ 模糊→清晰贴回
+    const p = MO.appleOut(MO.seg(lt, 0.3, 1.3));
+    if (p > 0) {
+      const tx = UI.scratch('t2title', W, 420), g = tx.getContext('2d'); g.reset();
+      g.font = `600 220px ${SANS}`; track(g, 220); g.textAlign = 'center'; g.textBaseline = 'alphabetic';
+      const gr = g.createLinearGradient(600, 0, 1320, 0); gr.addColorStop(0, '#ffffff'); gr.addColorStop(0.55, '#ddd2ff'); gr.addColorStop(1, '#a8dcff');
+      g.fillStyle = gr; g.fillText('Plover 2', W / 2, 300);
+      UI.sheen(g, null, MO.seg(lt, 1.25, 2.15), { x0: 560, x1: 1360, width: 140, angle: -0.38, alpha: 0.85, comp: 'source-atop' });
+      c.save(); c.globalAlpha = clamp(p * 1.5); const b = (1 - p) * 26; if (b > 0.3) c.filter = `blur(${b.toFixed(1)}px)`;
+      c.drawImage(tx, 0, 620 - 300 + (1 - p) * 40); c.restore();               // 纹理基线 y=300 → 屏幕 y=620
+    }
+    // 副标题
+    c.font = `400 50px ${ZH}`; c.fillStyle = '#c9c9d4'; c.letterSpacing = '1px';
+    TY.blurIn(c, '会思考、会记忆、会动手的 AI 助手', W / 2, 740, MO.appleOut(MO.seg(lt, 0.7, 1.6)), { blur: 12, dy: 22 });
+    c.restore();
+  },
+};
+})();

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//347/244/272/350/214/203/345/267/245/347/250/213/t2_s2.js

@@ -0,0 +1,70 @@
+// t2 · 镜头 2（3.0s）：三张毛玻璃功能卡片在 3D 空间入场（弹簧，bounce 0.15，错开 0.1s），绕 Y 轴转正；
+// 卡上数字计数；整组持续漂浮；光扫过三张卡；最后中间卡「被选中」（放大，其余后退变暗），接共享元素展开。
+(() => {
+const { clamp, lerp } = U;
+const W = 1920, H = 1080;
+const CW = 480, CH_ = 580, GAP = 52, CY = 560, R = 36;
+const CARDS = [
+  { icon: 'wave', title: '实时语音', desc: '像打电话一样自然地打断和追问', num: 320, dec: 0, unit: 'ms', label: '端到端延迟' },
+  { icon: 'memory', title: '长期记忆', desc: '记得你说过的每一个偏好', num: 100, dec: 0, unit: '万', label: 'tokens 上下文' },
+  { icon: 'agent', title: '自主执行', desc: '拆解任务、调用工具、交付结果', num: 87, dec: 0, unit: '%', label: '任务一次完成率' },
+];
+const DUR = 3.0, FOCUS = 2.15;                         // 2.15s 起中间卡被选中
+// 每张卡在 lt 时刻的状态（屏幕中心、旋转、缩放、透明），转场也要用中间卡的最终矩形
+const state = (i, lt, t) => {
+  const t0 = 0.05 + i * 0.1;                           // 错开 0.1s
+  const sp = MO.spring(lt - t0, { duration: 0.75, bounce: 0.15 });
+  const f = MO.smooth(MO.seg(lt, FOCUS, FOCUS + 0.6));
+  const floatAmp = lerp(1, i === 1 ? 0 : 0.6, f);      // 被选中的卡停止漂浮，好让转场从一个稳定的矩形展开
+  const cx = 960 + (i - 1) * (CW + GAP) + (i - 1) * 40 * f;
+  const cy = CY + (1 - sp) * 170 + MO.float(t, 7, 3.4 + i * 0.45, i * 2) * floatAmp;
+  const ry = (1 - sp) * (i - 1 || 0.001) * -0.55 + 0.06 * Math.sin(t * 0.9 + i) * floatAmp + (i - 1) * 0.12 * f;
+  const sc = (0.9 + 0.1 * sp) * (i === 1 ? lerp(1, 1.06, f) : lerp(1, 0.94, f));
+  const a = clamp((lt - t0) / 0.25) * (i === 1 ? 1 : lerp(1, 0.45, f));
+  return { cx, cy, ry, sc, a, t0 };
+};
+const cardRectAt = (lt, t) => { const s = state(1, lt, t); return { x: s.cx - CW * s.sc / 2, y: s.cy - CH_ * s.sc / 2, w: CW * s.sc, h: CH_ * s.sc }; };
+
+SCENES['t2_s2'] = {
+  cardRectAt, CW, CH: CH_,
+  draw(c, lt, t) {
+    t += T2.PHASE;
+    const bgc = UI.scratch('t2bg', W, H), bgx = bgc.getContext('2d');
+    T2.bg(bgx, t); c.drawImage(bgc, 0, 0);
+    const bd = UI.backdrop(bgc, { blur: 40, key: 't2bd' });
+    // 先画两侧再画中间（中间卡在最上层）
+    [0, 2, 1].forEach(i => {
+      const S = state(i, lt, t); if (S.a <= 0) return;
+      const d = CARDS[i], cw = CW * S.sc, ch = CH_ * S.sc;
+      // 卡片纹理：毛玻璃（按卡片的屏幕位置取样背景）＋内容
+      const tex = UI.scratch('t2card' + i, CW + 120, CH_ + 120), g = tex.getContext('2d'); g.reset();
+      const ox = 60, oy = 60;
+      UI.glass(g, { x: ox, y: oy, w: CW, h: CH_, r: R, bd, sample: { x: S.cx - cw / 2, y: S.cy - ch / 2, w: cw, h: ch }, tint: 0.075, stroke: 0.2, light: 0.14, shadow: false });
+      g.save(); g.translate(ox, oy);
+      // 图标底：同心圆角（子圆角 = 父圆角 − 内边距）
+      const pad = 44; g.fillStyle = 'rgba(255,255,255,0.09)'; g.beginPath(); g.roundRect(pad, pad, 96, 96, R - 14); g.fill();
+      UI.icon(g, d.icon, pad + 48, pad + 48, 60, '#f2f2f7', t);
+      g.textBaseline = 'alphabetic'; g.textAlign = 'left';
+      g.font = `600 50px ${T2.ZH}`; g.fillStyle = '#f5f5f7'; g.fillText(d.title, pad, 230);
+      g.font = `400 28px ${T2.ZH}`; g.fillStyle = 'rgba(235,235,245,0.62)'; g.fillText(d.desc, pad, 278);
+      // 分隔线
+      g.fillStyle = 'rgba(255,255,255,0.12)'; g.fillRect(pad, 330, CW - pad * 2, 1.5);
+      // 大数字：卡片落定后 0.25s 起计数 0.9s（easeOutExpo，最后一位慢慢落定），等宽排布不抖
+      const v = TY.count(lt, S.t0 + 0.35, 0.9, 0, d.num);
+      g.font = `600 132px ${T2.SANS}`; T2.track(g, 132, -0.03); g.fillStyle = '#ffffff';
+      const nw = TY.tabular(g, TY.fmt(v, d.dec), pad, 488);
+      g.letterSpacing = '0px'; g.font = `500 52px ${T2.SANS}`; g.fillStyle = 'rgba(235,235,245,0.7)'; g.fillText(d.unit, pad + nw + 10, 488);
+      g.font = `400 28px ${T2.ZH}`; g.fillStyle = 'rgba(235,235,245,0.55)'; g.fillText(d.label, pad, 535);
+      g.restore();
+      // 光扫过：1.2–2.0s 从左到右扫过整组（每张卡按自己的屏幕位置算进度，看起来是同一道光）
+      const sp = MO.seg(lt, 1.15, 2.05), gx = lerp(-200, W + 200, sp), lx = (gx - (S.cx - cw / 2)) / cw;
+      if (sp > 0 && sp < 1) UI.sheen(g, UI.rrPath(ox, oy, CW, CH_, R), clamp((lx + 0.35) / 1.7), { x0: ox, x1: ox + CW, width: 110, angle: -0.35, alpha: 0.22 });
+      // 阴影（按屏幕投影后的尺寸）＋透视贴图
+      c.save(); c.globalAlpha = S.a;
+      UI.shadow(c, S.cx - cw / 2 + 10, S.cy - ch / 2 + 20, cw - 20, ch - 20, R, { blur: 80, oy: 40, alpha: 0.55 });
+      UI.persp(c, tex, { cx: S.cx, cy: S.cy, w: (CW + 120) * S.sc, h: (CH_ + 120) * S.sc, ry: S.ry, persp: 1800, strip: 3, shade: 0.4 });
+      c.restore();
+    });
+  },
+};
+})();

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//347/244/272/350/214/203/345/267/245/347/250/213/t2_s3.js

@@ -0,0 +1,61 @@
+// t2 · 镜头 3（2.4s，前 0.6s 是中间卡「展开成全屏」的共享元素转场）：
+// 我们「进到了长期记忆这张卡里」——底是同一块毛玻璃；超大数字（与卡片同口径，不重数）；下方一块向后倾斜的对话面板，气泡依次弹起；最后产品落版。
+(() => {
+const { clamp, lerp } = U;
+const W = 1920, H = 1080;
+const PW = 1180, PH = 360;
+SCENES['t2_s3'] = {
+  draw(c, lt, t) {
+    t += T2.PHASE;
+    const bgc = UI.scratch('t2bg3', W, H), bgx = bgc.getContext('2d');
+    T2.bg(bgx, t, { dim: 0.25 });
+    const bd = UI.backdrop(bgc, { blur: 40, key: 't2bd3' });
+    // 全屏毛玻璃 = 卡片的质地放大到全屏（与转场里展开的卡片同一种材料）
+    c.drawImage(bd, 0, 0, W, H); c.fillStyle = 'rgba(255,255,255,0.075)'; c.fillRect(0, 0, W, H);
+    const tg = c.createLinearGradient(0, 0, 0, H * 0.5); tg.addColorStop(0, 'rgba(255,255,255,0.10)'); tg.addColorStop(1, 'rgba(255,255,255,0)'); c.fillStyle = tg; c.fillRect(0, 0, W, H * 0.5);
+    // 卡片抬头留在左上（展开前它就在卡片的这个位置，观众知道自己在哪）
+    c.fillStyle = 'rgba(255,255,255,0.09)'; c.beginPath(); c.roundRect(120, 96, 84, 84, 20); c.fill();
+    UI.icon(c, 'memory', 162, 138, 52, '#f2f2f7', t);
+    c.font = `600 44px ${T2.ZH}`; c.fillStyle = '#f5f5f7'; c.textBaseline = 'alphabetic'; c.textAlign = 'left'; c.fillText('长期记忆', 232, 154);
+    // 超大数字：和卡片上同一个口径「100万」，不重新计数（卡片刚数过一遍，展开后再从 0 数会让叙事打嗝）——卡片里的数字放大成主角
+    const pin = MO.appleOut(MO.seg(lt, 0.0, 0.5));
+    c.save(); c.textBaseline = 'alphabetic'; c.textAlign = 'left';
+    c.font = `600 230px ${T2.SANS}`; T2.track(c, 230, -0.03); const w1 = c.measureText('100').width;
+    c.letterSpacing = '0px'; c.font = `600 150px ${T2.ZH}`; const w2 = c.measureText('万').width;
+    c.font = `500 56px ${T2.SANS}`; const w3 = c.measureText('tokens').width;
+    const x0 = W / 2 - (w1 + w2 + w3 + 34) / 2, by = 400 - (1 - pin) * 20;
+    c.font = `600 230px ${T2.SANS}`; T2.track(c, 230, -0.03); c.fillStyle = '#ffffff'; c.fillText('100', x0, by);
+    c.letterSpacing = '0px'; c.font = `600 150px ${T2.ZH}`; c.fillText('万', x0 + w1 + 6, by);
+    c.font = `500 56px ${T2.SANS}`; c.fillStyle = 'rgba(235,235,245,0.7)'; c.fillText('tokens', x0 + w1 + w2 + 34, by);
+    c.restore();
+    c.font = `400 34px ${T2.ZH}`; c.fillStyle = 'rgba(235,235,245,0.6)'; c.textAlign = 'center';
+    TY.blurIn(c, '上下文窗口 —— 一年的对话，它都记得', W / 2, 478, MO.appleOut(MO.seg(lt, 0.35, 0.95)), { blur: 8, dy: 14 });
+    // 对话面板（纹理 → 绕 X 轴后倾），气泡按 spring 依次弹起；面板整体缓慢上浮
+    const tex = UI.scratch('t2panel', PW, PH), g = tex.getContext('2d'); g.reset();
+    g.fillStyle = 'rgba(12,12,20,0.55)'; g.beginPath(); g.roundRect(0, 0, PW, PH, 30); g.fill();
+    g.strokeStyle = 'rgba(255,255,255,0.16)'; g.lineWidth = 2; g.stroke();
+    const bubble = (k, text, right, y, t0) => {
+      const s = MO.spring(lt - t0, { duration: 0.5, bounce: 0.15 }); if (lt <= t0) return;
+      g.save(); g.globalAlpha = clamp((lt - t0) / 0.2); g.font = `400 34px ${T2.ZH}`;
+      const tw = g.measureText(text).width, bw = tw + 64, bh = 74, bx = right ? PW - 48 - bw : 48, by = y + (1 - s) * 40;
+      g.translate(bx + (right ? bw : 0), by + bh); g.scale(lerp(0.85, 1, s), lerp(0.85, 1, s)); g.translate(-(bx + (right ? bw : 0)), -(by + bh));
+      g.fillStyle = right ? '#3d6bff' : 'rgba(255,255,255,0.14)'; g.beginPath(); g.roundRect(bx, by, bw, bh, 37); g.fill();
+      g.fillStyle = '#fff'; g.textBaseline = 'middle'; g.fillText(text, bx + 32, by + bh / 2 + 2); g.restore();
+      void k;
+    };
+    bubble(0, '还记得我上个月说的旅行计划吗？', true, 36, 0.45);
+    bubble(1, '记得：五月去京都，预算两万，不坐红眼航班。', false, 134, 0.8);
+    bubble(2, '那帮我订吧。', true, 232, 1.15);
+    // 输入中光标闪（持续小动作）
+    if (lt > 1.35) { g.fillStyle = `rgba(255,255,255,${0.35 + 0.35 * Math.sin(lt * 9)})`; for (let k = 0; k < 3; k++) { g.beginPath(); g.arc(90 + k * 26, 330, 7, 0, Math.PI * 2); g.fill(); } }
+    const pp = MO.spring(lt - 0.3, { duration: 0.8, bounce: 0 });
+    c.save(); c.globalAlpha = clamp((lt - 0.3) / 0.3);
+    UI.persp(c, tex, { cx: W / 2, cy: 725 + (1 - pp) * 120 - 8 * MO.smooth(clamp(lt / 2.4)), w: PW, h: PH, rx: lerp(0.55, 0.32, pp), persp: 1500, strip: 2 });
+    c.restore();
+    // 落版：品牌名 + 上线信息
+    c.textAlign = 'center'; c.font = `600 40px ${T2.SANS}`; T2.track(c, 40, -0.01); c.fillStyle = '#ffffff';
+    TY.blurIn(c, 'Plover 2 · 今天起可用', W / 2, 972, MO.appleOut(MO.seg(lt, 1.2, 1.8)), { blur: 10, dy: 12 });   // 1.8s 落定，停 0.6s；y=972 在字幕安全区内
+    c.letterSpacing = '0px';
+  },
+};
+})();

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//350/257/255/346/263/225/345/215/241.md

@@ -0,0 +1,109 @@
+# t2_keynote_ui · 发布会式界面与渐变动效
+
+> 一句话语法：**深色底上缓慢漂移的彩色光斑，一屏一件事；字收紧、从模糊里浮出来；界面做成玻璃卡片在 3D 里用无回弹/轻回弹弹簧落位，数字计数、光扫过，转场靠「同一块玻璃」展开。**
+>
+> 示范片：`scripts/engine/demos/t2_keynote_ui/`（渲染 `render.py --film demos/t2_keynote_ui`）（8s，3 镜头）· 总览 `assets/动画语法/t2_keynote_ui_总览.jpg` · 代码 `scripts/engine/demos/t2_keynote_ui/`
+
+## ① 适用场景
+
+- **用**：产品/功能发布、版本更新、「三个新功能」、价格与参数公布、开场品牌片、视频里的「这个产品是什么」段落。口播是**名词＋数字**（「Plover 2」「延迟 320 毫秒」「100 万 tokens」）时最合适：一句一屏，名词出现时字浮出，数字说到时落定。
+- **用**：需要把「界面截图」讲得高级——把 UI 放进玻璃卡、放到 3D 里转正。
+- **别用**：讲机制原理（玻璃和光斑不承载逻辑，用 t1）；讲数据走势（用 t3）；严肃事故/财报坏消息（这套语言自带「好消息」的情绪）；内容本身没有一个能放大的「主角」时（只剩空镜光斑）。
+
+## ② 画面构成
+
+| 项 | 取值 | 依据 |
+|---|---|---|
+| 底色 | 近黑：本片 `#050508`；Apple `#000/#161617/#1d1d1f`；Linear `#08090a`（上一级 `#0f1011/#141516`，正文 `#f7f8f8`，描边 `#ffffff14`） | 两家官网 CSS 实测 |
+| 光斑 | 4 团径向渐变 screen 叠加 → 1/4 尺寸上模糊 90px → 放大铺满 → 叠 3.5% 静态颗粒防色带。色相走 Stripe 一系：紫 `(150,90,238)`、蓝 `(56,104,255)`、青 `(120,214,255)`、一点暖红 `(255,96,84)`；中心再压一层 38% 黑径向渐变给白字让对比 | Stripe 2021 渐变 `#a960ee #ff333d #90e0ff #ffcb57` |
+| 光斑运动 | 每团漂移振幅 90–260px、周期 9.5–13s，**避开 5s 周期**（HIG：避免 ~0.2Hz 持续摆动） | Apple HIG Motion |
+| 玻璃卡 | 背景取样模糊 40px（Apple 导航 `saturate(180%) blur(20px)`，NN/g 说越大越好）＋白 7.5% 填充＋顶部 14% 白渐变受光带＋1.5px 渐变描边（左上亮、右下暗）＋大阴影（blur 70–80，y+30–40，α0.5） | apple.com globalheader.css；NN/g Glassmorphism |
+| 圆角 | 卡片 36px；**同心圆角**：内部图标底圆角 = 36 − 内边距 14 = 22 | WWDC25「子圆角 = 父圆角 − padding」 |
+| 字体 | Inter（SF Pro 最接近的开源字，Linear 用 Inter）；中文思源黑。标题 600 字重、**大字号字距收紧 −0.02 ~ −0.03em**（`T2.track`） | Apple 96px −0.015em、Linear 64px −0.022em、OpenAI 64px −0.03em |
+| 文字层级 | 白 `#f5f5f7` 主、`rgba(235,235,245,.6)` 次、`#a7a7b4` 眉题（字距 +6px）；产品名用白→淡紫→淡青横向渐变 | Apple 官网层级惯例 |
+| 构图 | 一屏一个焦点，居中对称；三卡等宽 480、间距 52；大数字占画面宽 55% 以上 | — |
+| 形状语言 | 圆角矩形、胶囊、细线图标（圆头等线宽，SF Symbols 气质，`UI.icon`） | — |
+
+## ③ 运动轨迹
+
+- **弹簧（主力）**：SwiftUI duration＋bounce 参数化，`MO.spring(t,{duration,bounce})`：mass=1、stiffness=(2π/d)²、damping=4π(1−bounce)/d → 阻尼比 ζ=1−bounce。**默认 bounce 0**（最通用）；0.15 利落几乎不弹（本片卡片入场 d=0.75、气泡 d=0.5）；0.3 明显弹；>0.4 对 UI 夸张。`.smooth/.snappy/.bouncy` 都是 d=0.5。
+- **曲线（非弹簧）**：apple.com 导航 `.32s cubic-bezier(.4,0,.6,1)`；本片字的浮现用 CSS `ease`=`(.25,.1,.25,1)`（`MO.appleOut`）；Linear 主力 ease-out-quad `(.25,.46,.45,.94)` .16s；Stripe 建议 <500ms、`(.2,1,.2,1)`。`MO.bezier(x1,y1,x2,y2)` 通吃。
+- **字的入场**：模糊 18–26px → 0、上移 16–40px → 0、透明 → 1，0.7–1.0s（`TY.blurIn`）。眉题 → 产品名 → 副标题依次错开 0.2–0.4s。
+- **卡片入场**：从下方 170px、绕 Y 轴 ±0.55rad（≈31°，两侧卡朝外）、缩放 0.9 → 弹簧落位；三张错开 0.1s。3D 用 `UI.persp`（竖条切片透视，persp 1800px；Stripe 用 600、Linear 用 1000）。
+- **持续微动**：卡片漂浮 7px、周期 3.4/3.85/4.3s（两频叠加，`MO.float`）＋ry 轻摆 ±0.06rad；光斑漂移；相机匀速慢推 1→1.045（**线性**，减速到停会让画面「死」）。
+- **计数**：卡片落定后 0.25s 起 0.9s（同一个数只数一次——展开成全屏后沿用「100万」，不再从 0 重数）；`easeOutExpo`（CountUp.js 默认缓动）——最后一位慢慢落定；数字**等宽排布**（`TY.tabular`，Canvas 不能开 tnum，不排会抖）。
+- **光扫过**：斜 −20°、宽 110–140px 的亮带 0.8–0.9s 扫过；在文字离屏上用 `source-atop`（只亮在字上），在卡片上用 `lighter`；三张卡按各自屏幕位置算进度 = 同一道光。
+
+## ④ 转场（常用 5 种）
+
+1. **模糊推进（blurPush）**：旧画面缩到 0.92＋模糊 24px＋淡出，新画面从 1.06 带模糊落到 1.0 清晰，0.55s，`ease`。**底下先垫一层放大 1.08 的重模糊旧画面**，缩小的画面四周才不露黑边。本片镜头 1→2。
+2. **共享元素展开（expandRect）**：（新画面第一帧就**不透明**装进卡片——卡片是半透明的，任何溶接都会看到新旧两层字叠在一起）被选中的卡片（先放大到 1.06、两侧卡后退变暗到 45%）从自己的屏幕矩形展开成全屏，圆角 38→0，弹簧 d=0.55 bounce 0；新画面一开始就按卡片大小缩放装在卡里。**选中卡在展开前停止漂浮**，转场才从一个稳定矩形起跳。本片镜头 2→3。
+3. **匹配剪辑**：前后两镜同一物体同一位置（产品名 → 卡片标题位置）。
+4. **遮罩擦除/光扫切**：一道光扫过时在光带后面换画面。
+5. **折射代替淡入淡出**（Liquid Glass）：元素出场时逐渐改变折射/模糊强度，而不是直接降透明度（本片字的模糊浮现即此思路）。
+
+## ⑤ 节奏与文字
+
+- **镜头时长**：发布会演讲一屏常 5–8s（Jobs 2007 iPhone 70 秒 9 屏≈7.8s/屏）；产品片快剪 1.5–3s。本片 2.6/3.0/2.4s。
+- **一屏一件事**：一个名词、一个数字、一张卡。密集段落后放一屏空的给观众喘气（Presentation Zen 说的 counterweight）。
+- **与口播对位**：名词说出前 0.2–0.3s 字开始浮现（浮现本身要 0.7s，说到时正好清晰）；数字在口播说出数值时**落定**——计数起点 = 说数字时刻 − 计数时长；三卡依次入场对应「第一、第二、第三」。
+- **文字**：标题 ≤6 个字或一个产品名；副标题一句话 ≤16 字；卡片：标题 4 字＋一行说明＋一个大数字＋单位（小一号、灰一级）。
+
+## ⑥ 代码实现要点
+
+> 收进 skill 后（2026-10-04 v0.4）：本卡「新写」里的通用函数已统一进 `scripts/engine/lib/`（名字已换成统一后的 MO / CAM / DG / TY / CH / UI / CL / TOON），示范片自己的代码在 `scripts/engine/demos/t2_keynote_ui/`。库速查和「怎么为一段口播选语法」见 `references/09-视频动画语法.md`。
+
+- 复用 skill：`engine.js`、`render.py`、`PAINT.cached/hex`、`U.rng`。
+- 新写、现已统一进库 `lib/ui.js`（`window.UI`）：`mesh`（光斑底）、`grainTex`、`backdrop`（模糊副本，毛玻璃取样）、`shadow`（只画影子）、`glass`（毛玻璃卡）、`sheen`（光扫过，`comp` 可选）、`persp`（绕 Y/X 轴伪 3D）、`icon`、`rr/rrPath`、`scratch`。
+- `lib/motion.js`：`spring/smoothSpring/snappy/bouncy`、`bezier/appleOut/emphasized`、`float`；数字与文字在 `lib/typo.js`：`TY.count/tabular`、`TY.blurIn`（实验时叫 MO.textIn）。
+- 转场（实验时在 `transitions_info.js`，现已进 `transitions.js`）：`blurPush`、`expandRect`。
+- 性能：每帧画一次光斑（1/4 尺寸）＋一次背景模糊副本，均 40–60ms/帧（qa 带 GPU flush）；8 秒 60fps 渲完约 1 分钟。
+- 坑（已修进库里）：①**blur 会从画布外拉进透明像素**，画进不清空的离屏会逐帧累积，qa 报确定性 ✗——先垫一层不模糊原图；②透视切片相邻重叠 0.75px 在半透明纹理上出一条条纹——切片边界取整像素首尾相接，并先画进离屏再整体按 alpha 贴回；③`UI.sheen` 内部设了合成模式，会盖掉外面设的 `source-atop`，所以做成参数。
+
+## ⑦ 代表作品与一手参考
+
+- 代表作：Apple iPhone/Apple Intelligence 发布片与 apple.com 产品页；OpenAI GPT-4o / o 系列发布视频；Linear 官网与 Linear Release 视频；Stripe 2020–21 官网渐变。
+- https://developer.apple.com/videos/play/wwdc2023/10158/ （Animate with springs：duration/bounce）
+- https://developer.apple.com/videos/play/wwdc2018/803/ （Designing Fluid Interfaces：从 100% 阻尼起步）
+- https://developer.apple.com/videos/play/wwdc2025/219/ （Meet Liquid Glass）
+- https://developer.apple.com/design/human-interface-guidelines/materials 、/motion 、/typography
+- https://www.nngroup.com/articles/glassmorphism/
+- https://web.archive.org/web/20211015000000/https://stripe.com/ （渐变色值）
+- https://stripe.com/blog/connect-front-end-experience （<500ms、曲线）
+- https://linear.app/now/how-we-redesigned-the-linear-ui （LCH 色彩、Inter）
+
+## ⑧ 最容易做错的 3 件事
+
+1. **玻璃后面没东西。** 毛玻璃只模糊它后面的内容；深色纯底上的「玻璃」就是一块灰矩形。先画有色彩、有起伏的光斑，再按卡片屏幕位置取样模糊。
+2. **弹簧太弹、动作太多。** bounce 默认 0，入场最多 0.15–0.3；>0.4 立刻廉价。一次只动一组东西。
+3. **大字没收紧字距、光斑颜色发脏。** 64px 以上 −0.015～−0.03em；光斑每团颜色各占一块（screen 叠加＋大模糊），别把多色线性平均成灰紫泥。
+
+## qa 数字（skill `scripts/qa.py`，2026-10-04，审片前）
+
+| 镜头 | 运动% | 静止帧对% | 跳变 | 均/峰 ms | 确定性 |
+|---|---|---|---|---|---|
+| t2_s1 | 0.58 | 35.4 | 0 | 39.8/51.4 | ✓ |
+| t2_s2 | 2.62 | 8.5 | 0 | 60.2/65.0 | ✓ |
+| t2_s3 | 1.84 | 9.6 | 0 | 44.3/51.0 | ✓ |
+
+说明：t2_s1 的「静止帧对 35%」不是卡——光斑漂移和 4.5% 的慢推每帧变化低于 qa 的像素阈值（>12 级），隔 1 秒取两帧（成片 1.6s vs 2.6s）有 26.8% 的像素变化超过 12 级、78% 超过 4 级；这类「慢呼吸」画面要另用间隔帧差判断。
+
+## 修订（独立审片 → 改一轮，2026-10-04）
+
+| 审片意见 | 改法 |
+|---|---|
+| 🔴 2.55–2.75s、5.6–5.85s 转场四周露黑边 | blurPush / expandRect 底下垫一层放大 1.08、模糊 30px 的旧画面 |
+| 🔴 卡片展开时「长期记忆」「100万」两层叠影；展开后又从 0 重数 | 新画面第一帧不透明装进卡片；全屏页沿用「100万 tokens」同一口径，不重数 |
+| 🔴 6.95s 计数一帧从 999,023 跳到 1,000,000，「tokens」被挤 | 随上条删掉重复计数；单位按三段实测宽度排版，不再贴字 |
+| 🟡 落版只出现 0.4s、y≈1020 出安全区 | 落版 1.2–1.8s 浮现、停 0.6s，y=972；对话面板整体上移 65px |
+| ⚪ 卡片「100万」与全屏「1,000,000」口径不一 | 统一为「100万」 |
+
+修订后 qa：
+
+| 镜头 | 运动% | 静止帧对% | 跳变 | 均/峰 ms | 确定性 |
+|---|---|---|---|---|---|
+| t2_s1 | 0.58 | 35.4 | 0 | 39.5/51.6 | ✓ |
+| t2_s2 | 2.62 | 8.5 | 0 | 57.2/59.9 | ✓ |
+| t2_s3 | 0.97 | 15.4 | 0 | 43.0/48.7 | ✓ |
+
+（转场冒烟：blurPush 最慢约 137ms/帧，含两次全屏模糊。）

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t3_finance_chart_/350/264/242/347/273/217/345/233/276/350/241/250//345/217/202/346/225/260/347/244/272/344/276/213.json

@@ -0,0 +1,27 @@
+{
+  "grammar": "t3_finance_chart",
+  "duration": 7,
+  "fps": 30,
+  "width": 1920,
+  "height": 1080,
+  "data": {
+    "title": "英伟达：五个财年营收涨到原来的 7.8 倍",
+    "unit": "年营收，十亿美元",
+    "source": "来源：英伟达 2021–2025 财年 10-K 年报（财年截至次年 1 月）",
+    "chart": "bar",
+    "decimals": 1,
+    "series": [
+      { "label": "FY2021", "value": 16.68 },
+      { "label": "FY2022", "value": 26.91 },
+      { "label": "FY2023", "value": 26.97 },
+      { "label": "FY2024", "value": 60.92 },
+      { "label": "FY2025", "value": 130.50 }
+    ],
+    "highlight": { "index": 4, "text": "7.8 倍", "sub": "130.5 ÷ 16.7" }
+  },
+  "cues": [
+    { "at": 0.0, "kind": "title" },
+    { "at": 1.2, "kind": "bar" },
+    { "at": 4.4, "kind": "highlight" }
+  ]
+}