dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/ui-entrance/row-embed/RowEmbed.tsx

@@ -0,0 +1,175 @@
+// row-embed —— 内容行从空中降下、rotateX 收平、嵌入瞬间底边亮强调色缝
+// "结构化数据长进页面"的详情页/列表镜头。参考实现从 template SceneDetail 剥离：
+// 行按节拍逐条从上空飞入（perspective translateY(−120·air) + rotateX(16°·air) +
+// scale 略过冲后 press 回弹），行位先盖页面底色补丁占位、落地后消失让纹理透出，
+// 嵌入瞬间行底边 2px 强调色缝从中心向两侧展开后淡出，相机同时缓缓下摇。
+// 节拍（质感改版）：cue = 12/22/31/39/46（间隔 10→7 递减，行雨越落越快），飞行 12f，
+// 末行 58f 落地、强调色缝 66f 收尾 ≤ 镜头 68f 预算。
+// 飞行体 = 整页截图 backgroundImage 负偏移裁片（Q1：裁片不重绘内容）。
+// 质感改版要点：
+// - 空槽补丁取页面真实底色 #f9f6f1（原 #fdfcfa 偏白，五个槽位读成一整块白板），并画一道
+//   极淡的槽位虚线框——观众看得见"这里有个空位在等"，落地就是"扣进去"（Q9）；
+// - 下落改为"加速砸进槽位"（末段仍有速度）+ press 回弹，飞行段按速度加纵向运动模糊；
+// - 槽位接触影随行接近而收紧变实（近地小而实），离地时是大而虚的环境影；
+// - 相机取景改为全程被页面铺满（原起点露出页顶外空白、终点露出页底外 160px 空白）。
+import React from 'react';
+import { AbsoluteFill, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { PageCam2D, CamKey2D } from '../../_fixtures/PageCam2D';
+import { Grain, Vignette } from '../../_fixtures/Polish';
+import layout from '../../_textures/live-layout.json';
+
+export const ROW_EMBED_DURATION = 68;
+
+const DETAIL_H = layout.detail.pageH;
+const rows = layout.detail.rows;
+const PAGE_BG = '#f9f6f1'; // 截图里内容区的真实底色（逐像素采样）
+
+// 起点 cy=500@1.12：页顶刚好出画；终点 cy=740@1.25：边下摇边微推近，页底贴住画框下沿，
+// 画框上沿落在「编辑元数据」分隔线与「项目资料」之间（不切半行字）
+const DETAIL_CAM: CamKey2D[] = [
+  { frame: 0, cx: 960, cy: 500, zoom: 1.12 },
+  { frame: 68, cx: 960, cy: 740, zoom: 1.25 },
+];
+
+const CUES = [12, 22, 31, 39, 46];
+const FLY = 12;
+// 下落：起步慢、末段仍带速度砸进槽位（终点斜率≈1.25），由 press 回弹吸收冲击
+const FLY_EASE = Easing.bezier(0.5, 0, 0.8, 0.75);
+const detailSrc = staticFile('textures/live/detail-full.png');
+const clamp = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+const airOf = (frame: number, cue: number) => 1 - interpolate(frame, [cue, cue + FLY], [0, 1], { ...clamp, easing: FLY_EASE });
+
+export const RowEmbed: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <AbsoluteFill>
+      <PageCam2D src="textures/live/detail-full.png" pageH={DETAIL_H} keys={DETAIL_CAM} bg={PAGE_BG}>
+        {rows.map((r, i) => {
+          const cue = CUES[i];
+          const land = cue + FLY;
+
+          // 空槽补丁（真实底色）+ 虚线槽位框，落地后 2f 消失
+          const patchOpacity = interpolate(frame, [land, land + 2], [1, 0], clamp);
+          // 槽位框在行飞来时略微提亮（"这里"），落地即随补丁消失
+          const slotHint = interpolate(frame, [cue - 6, cue + 4], [0.55, 1], clamp);
+
+          // flying row: texture-crop dropping in from the air
+          let flyer: React.ReactNode = null;
+          let contact: React.ReactNode = null;
+          if (frame >= cue && frame < land + 4) {
+            const air = airOf(frame, cue);
+            const p = 1 - air;
+            const appear = interpolate(frame, [cue, cue + 3], [0, 1], clamp);
+            const scale =
+              frame < land
+                ? 1.06 - 0.065 * p
+                : interpolate(frame, [land, land + 4], [0.995, 1], { ...clamp, easing: Easing.out(Easing.quad) });
+            // 纵向速度（页面 px/帧）→ 运动模糊，落地为 0
+            const vy = 120 * (airOf(frame - 0.5, cue) - airOf(frame + 0.5, cue));
+            const mb = frame < land ? Math.min(3.2, vy * 0.22) : 0;
+            flyer = (
+              <div
+                key={`row-${i}`}
+                style={{
+                  position: 'absolute', left: r.x, top: r.y, width: r.w, height: r.h,
+                  opacity: appear, zIndex: 3, pointerEvents: 'none',
+                  transform: `perspective(900px) translateY(${(-120 * air).toFixed(2)}px) rotateX(${(16 * air).toFixed(3)}deg) scale(${scale.toFixed(4)})`,
+                  filter: mb > 0.25 ? `url(#row-mb-${i})` : undefined,
+                }}
+              >
+                {mb > 0.25 && (
+                  <svg width={0} height={0} style={{ position: 'absolute' }} aria-hidden>
+                    <filter id={`row-mb-${i}`} x="-5%" y="-30%" width="110%" height="160%">
+                      <feGaussianBlur stdDeviation={`0 ${mb.toFixed(2)}`} />
+                    </filter>
+                  </svg>
+                )}
+                <div
+                  style={{
+                    position: 'absolute', inset: 0, borderRadius: 8, overflow: 'hidden', backgroundColor: '#fff',
+                    backgroundImage: `url(${detailSrc})`,
+                    backgroundSize: `1920px ${DETAIL_H}px`,
+                    backgroundPosition: `-${r.x}px -${r.y}px`,
+                    // 两层影：离地时大而虚的环境影 + 随高度变淡的近地影；顶部 1px 受光
+                    boxShadow:
+                      `inset 0 1px 0 rgba(255,255,255,${(0.9 * air).toFixed(3)}), ` +
+                      `0 0 0 1px rgba(60,45,25,${(0.07 * air).toFixed(3)}), ` +
+                      `0 ${(34 * air).toFixed(1)}px ${(64 * air).toFixed(1)}px -${(10 * air).toFixed(1)}px rgba(40,30,18,${(0.24 * air).toFixed(3)}), ` +
+                      `0 ${(6 * air).toFixed(1)}px ${(14 * air).toFixed(1)}px rgba(40,30,18,${(0.1 * air).toFixed(3)})`,
+                  }}
+                />
+              </div>
+            );
+            // 槽位接触影：行越近越实越小（落地前 4f 最浓），落地后 3f 淡掉
+            const near = interpolate(air, [0, 0.5], [1, 0], clamp);
+            const contactOp = frame < land ? near * 0.5 : interpolate(frame, [land, land + 3], [0.5, 0], clamp);
+            contact = (
+              <div
+                key={`contact-${i}`}
+                style={{
+                  position: 'absolute', left: r.x + 10, top: r.y + 6, width: r.w - 20, height: r.h - 6, borderRadius: 10,
+                  boxShadow: `0 ${(2 + 6 * air).toFixed(1)}px ${(6 + 18 * air).toFixed(1)}px rgba(60,42,20,${(0.22 * contactOp).toFixed(3)})`,
+                  zIndex: 2, pointerEvents: 'none',
+                }}
+              />
+            );
+          }
+
+          // embed flash: 2px amber seam at the row's bottom edge, expanding from
+          // the center on touchdown, then fading out（两端羽化，裁在行宽内）
+          let seam: React.ReactNode = null;
+          if (frame >= land && frame < land + 8) {
+            const spread = interpolate(frame, [land, land + 5], [0, 1], { ...clamp, easing: Easing.out(Easing.cubic) });
+            const seamOpacity = interpolate(frame, [land, land + 2, land + 8], [1, 1, 0], clamp);
+            const seamW = r.w * spread;
+            seam = (
+              <div
+                key={`seam-${i}`}
+                style={{
+                  position: 'absolute',
+                  left: r.x + (r.w - seamW) / 2,
+                  top: r.y + r.h - 2,
+                  width: seamW, height: 2, borderRadius: 1,
+                  background:
+                    'linear-gradient(90deg, rgba(196,120,40,0) 0%, oklch(60% 0.14 62) 18%, oklch(66% 0.15 66) 50%, oklch(60% 0.14 62) 82%, rgba(196,120,40,0) 100%)',
+                  boxShadow: '0 0 7px rgba(200,128,52,0.38)',
+                  opacity: seamOpacity, zIndex: 4, pointerEvents: 'none',
+                }}
+              />
+            );
+          }
+
+          return (
+            <React.Fragment key={i}>
+              {patchOpacity > 0 ? (
+                <div
+                  key={`patch-${i}`}
+                  style={{
+                    position: 'absolute', left: r.x - 8, top: r.y - 4,
+                    width: r.w + 24, height: r.h + 8, background: PAGE_BG,
+                    opacity: patchOpacity, zIndex: 1, pointerEvents: 'none',
+                  }}
+                >
+                  <div
+                    style={{
+                      position: 'absolute', left: 8, top: 10, width: r.w, height: r.h - 12, borderRadius: 8,
+                      border: '1px dashed rgba(120,96,64,0.20)', boxSizing: 'border-box', opacity: slotHint,
+                      background: 'rgba(120,96,64,0.018)',
+                    }}
+                  />
+                </div>
+              ) : null}
+              {contact}
+              {flyer}
+              {seam}
+            </React.Fragment>
+          );
+        })}
+      </PageCam2D>
+      <Vignette strength={0.1} color="#3a2c1c" inner={0.55} />
+      <Grain opacity={0.035} />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/value-stagger-gradient/ValueStaggerGradient.tsx

@@ -0,0 +1,153 @@
+// value-stagger-gradient — Value Stagger 数值梯度（motion-lab 定稿转原生 Remotion）
+// stagger 不只错开时间，还把属性值在 N 个元素上铺成梯度：16 根柱入场时
+// delay=stagger(时间)，同时高度/色相/模糊都是 stagger([from,to]) 的数值梯度；
+// 第二拍换 from:'center'，脉冲幅度以中心为原点重新铺开。
+// 设计坐标 480×270（DesignStage zoom 放大，按目标分辨率栅格化），参数表数值以此坐标系标定。
+// 质感改版：
+// - 柱子改用 height 生长（底部锚定）而非 scaleY，圆角不再被压扁；顶部受光高光 + 地面倒影 + 基线刻度；
+// - 代码字幕做成语法着色的代码条（≥38px 输出字高），两拍之间上下交叉换句，不再硬切；
+// - 柱群与代码条整体居中构图；带色相的深底 + 柱群下方柔光 + 暗角 + 颗粒（原生分辨率）。
+import React from 'react';
+import { AbsoluteFill } from 'remotion';
+import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';
+import { EASE, FONT, Grain, Vignette } from '../../_fixtures/Polish';
+
+export const VALUE_STAGGER_GRADIENT_DURATION = 150; // 5000ms @30fps
+
+// 数值梯度 util（等价 stagger([a,b]) 的 value 模式）
+const staggerVal = (i: number, n: number, a: number, b: number, ease?: (x: number) => number) => {
+  let k = n <= 1 ? 0 : i / (n - 1);
+  if (ease) k = ease(k);
+  return lerp(k, a, b);
+};
+
+const N = 16;
+const C = (N - 1) / 2;
+const BARS = Array.from({ length: N }, (_, i) => ({
+  i,
+  hue: staggerVal(i, N, 200, 320), // 数值梯度：色相铺开
+  hMax: staggerVal(i, N, 92, 32), // 数值梯度：高度 1→0.35
+  distC: Math.abs(i - C) / C,
+}));
+
+const BASE_Y = 196; // 基线（设计 px）
+const SWITCH = 0.52; // 两拍之间换代码句
+
+// 语法着色片段：[文本, 颜色]
+const KEY = '#9aa3bd';
+const FN = '#c9b3ff';
+const NUM = '#86d4ff';
+const STR = '#f3b58c';
+const PUN = '#5f6782';
+type Tok = [string, string];
+const LINE1: Tok[] = [
+  ['scale', KEY], [': ', PUN], ['stagger', FN], ['([', PUN], ['1', NUM], [', ', PUN], ['0.35', NUM], ['])', PUN],
+  ['   hue', KEY], [': ', PUN], ['stagger', FN], ['([', PUN], ['200', NUM], [', ', PUN], ['320', NUM], ['])', PUN],
+];
+const LINE2: Tok[] = [
+  ['pulse', KEY], [': ', PUN], ['stagger', FN], ['([', PUN], ['.06', NUM], [', ', PUN], ['.42', NUM], ['], { ', PUN],
+  ['from', KEY], [': ', PUN], ["'center'", STR], [' })', PUN],
+];
+
+const Code: React.FC<{ toks: Tok[]; style: React.CSSProperties }> = ({ toks, style }) => (
+  <div style={{ position: 'absolute', left: 0, right: 0, textAlign: 'center', whiteSpace: 'pre', ...style }}>
+    {toks.map(([s, c], k) => (
+      <span key={k} style={{ color: c }}>{s}</span>
+    ))}
+  </div>
+);
+
+export const ValueStaggerGradient: React.FC = () => {
+  const t = useT();
+  // 代码条：入场淡入上浮；两拍间旧句上移淡出、新句自下而上替入（≈5f 交叉）
+  const capIn = seg(t, 0.03, 0.12, EASE.out);
+  const sw = seg(t, SWITCH - 0.018, SWITCH + 0.022, EASE.smooth);
+  // 柱群下方的柔光随第一拍铺开、第二拍脉冲略增
+  const pulseC = Math.sin(seg(t, 0.56, 0.74) * Math.PI);
+  return (
+    <AbsoluteFill style={{ background: 'linear-gradient(180deg, #0e0f15 0%, #0a0b0f 100%)' }}>
+      <AbsoluteFill
+        style={{
+          background: 'radial-gradient(ellipse 46% 34% at 50% 66%, rgba(120,110,255,0.16), rgba(120,110,255,0) 70%)',
+          opacity: 0.35 + 0.65 * seg(t, 0.06, 0.5) + pulseC * 0.3,
+        }}
+      />
+      <DesignStage bg="transparent" raster="zoom">
+        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', fontFamily: FONT.mono }}>
+          {/* 代码条 */}
+          <div
+            style={{
+              position: 'absolute', left: '50%', top: 40, height: 22, width: 316, marginLeft: -158, borderRadius: 7,
+              background: 'rgba(255,255,255,0.035)', boxShadow: 'inset 0 0 0 0.25px rgba(255,255,255,0.12), inset 0 0.25px 0 rgba(255,255,255,0.08)',
+              overflow: 'hidden', opacity: capIn, transform: `translateY(${lerp(capIn, 4, 0).toFixed(3)}px)`,
+            }}
+          >
+            <Code toks={LINE1} style={{ top: 5.6, fontSize: 9.5, lineHeight: '11px', opacity: 1 - sw, transform: `translateY(${(-sw * 12).toFixed(3)}px)` }} />
+            <Code toks={LINE2} style={{ top: 5.6, fontSize: 9.5, lineHeight: '11px', opacity: sw, transform: `translateY(${((1 - sw) * 12).toFixed(3)}px)` }} />
+          </div>
+          {/* 基线 + 刻度 */}
+          <div style={{ position: 'absolute', left: '7%', right: '7%', top: BASE_Y + 0.5, height: 0.3, background: 'rgba(255,255,255,0.12)', opacity: seg(t, 0.02, 0.1) }} />
+          {BARS.map(({ i, hue, hMax, distC }) => {
+            // 拍一：时间 stagger（linear from first）× 数值梯度（y/blur 同时铺开）
+            const d = i * 0.02;
+            const e = seg(t, 0.06 + d, 0.28 + d, E.outCubic);
+            const y0 = staggerVal(i, N, 46, 14); // 位移量本身也是梯度
+            const b0 = staggerVal(i, N, 8, 2); // 模糊量梯度
+            // 拍二：from:'center' —— 波与幅度都以中心为原点铺开
+            const w = seg(t, 0.56 + distC * 0.13, 0.74 + distC * 0.13);
+            const pulse = Math.sin(w * Math.PI);
+            const amp = lerp(1 - distC, 0.06, 0.42); // 幅度梯度：中心最大
+            const h = hMax * e * (1 + pulse * amp);
+            const x = `${8 + i * 5.4}%`;
+            const blur = (1 - e) * b0;
+            const bright = 1 + pulse * 0.55;
+            const body = `linear-gradient(180deg, hsl(${hue},80%,70%) 0%, hsl(${hue},72%,56%) 45%, hsl(${hue},66%,40%) 100%)`;
+            return (
+              <React.Fragment key={i}>
+                {/* 刻度 */}
+                <div style={{ position: 'absolute', top: BASE_Y + 3, left: `${8 + i * 5.4 + 1.7}%`, width: 0.3, height: 2.5, background: 'rgba(255,255,255,0.18)', opacity: seg(t, 0.02, 0.1) }} />
+                {/* 柱体（底部锚定，height 生长） */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: BASE_Y - h,
+                    left: x,
+                    width: '3.4%',
+                    height: h,
+                    borderRadius: 4,
+                    background: body,
+                    boxShadow: `inset 0 0.5px 0 rgba(255,255,255,0.45), inset 0 0 0 0.25px rgba(255,255,255,0.10), 0 0 10px hsla(${hue},85%,58%,${(0.18 + pulse * 0.22).toFixed(3)})`,
+                    opacity: e,
+                    filter: `${blur > 0.02 ? `blur(${blur.toFixed(2)}px) ` : ''}brightness(${bright.toFixed(3)})`,
+                    transform: `translateY(${((1 - e) * y0).toFixed(3)}px)`,
+                    overflow: 'hidden',
+                  }}
+                >
+                  {/* 左侧受光条 */}
+                  <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '34%', background: 'linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0))' }} />
+                </div>
+                {/* 地面倒影：翻转、渐隐、略糊 */}
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: BASE_Y + 1.5,
+                    left: x,
+                    width: '3.4%',
+                    height: h * 0.45,
+                    borderRadius: 4,
+                    background: `linear-gradient(180deg, hsla(${hue},70%,52%,0.32), hsla(${hue},70%,40%,0))`,
+                    opacity: e * 0.8,
+                    filter: `blur(${(0.8 + blur).toFixed(2)}px) brightness(${bright.toFixed(3)})`,
+                    transform: `translateY(${((1 - e) * y0 * 0.4).toFixed(3)}px)`,
+                  }}
+                />
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </DesignStage>
+      <Vignette strength={0.5} color="#000000" inner={0.45} />
+      <Grain opacity={0.08} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { Card } from '../../_fixtures/Fixtures';
+import { BRAND, PITCH, ShotcraftMark } from '../../_fixtures/Brand';
+import { Backdrop, FONT, Grain } from '../../_fixtures/Polish';
+
+// bento-light-up：暗场里 3×2 bento 墙压暗待命，随节拍逐格点亮——
+// 边框流光先描一圈（琥珀），格内内容随后提亮上浮弹出；六格全亮后整体微推收住。
+// 节拍：0–20 建立(hold) → 每格间隔 12f 依次激活(描边 8f + 内容弹出 8f)
+//       → ~96f 全亮 → 96–121 scale 1→1.04 缓推 → 121–150 静止收尾。
+// 质感改版：
+// - 真 bento：两行宽窄互补（600/420/420 ↔ 420/420/600），不再是六张等大格子；
+// - 卡面用暗色出版级 Card（tone=dark），暗场品牌段里不再"白卡亮瞎"，点亮读作通电而非换色；
+// - 流光描边改为"彗星"：亮头 + 渐隐尾的描边段跑一圈后收成常亮细边，辉光只在描边上（不外溢成方框）；
+// - 标题改为眉标 + 主标题的字阶；暗场柔光底（暖色余光）+ 暗角 + 颗粒。
+// 品牌：眉标 = video-shotcraft 标志 + 小写字标（琥珀），主标题 = PITCH 口号「Every shot, tuned in one place.」。
+export const BENTO_LIGHT_UP_DURATION = 150;
+
+const AMBER = '#e8b45e';
+const FIRST = 20; // 首格激活帧
+const GAP = 12; // 格间节拍
+const CELL_H = 330;
+const GUT = 44;
+const U = 480; // 宽窄格基准：宽 1.25U=600，窄 0.875U=420，每行 1440 + 2 道沟（宽窄差再大，卡内字阶会明显不一）
+const ROW_W = U * 3 + GUT * 2;
+const LEFT = (1920 - ROW_W) / 2;
+const TOP = (1080 - (CELL_H * 2 + GUT)) / 2 + 44;
+const WIDTHS = [
+  [1.25, 0.875, 0.875],
+  [0.875, 0.875, 1.25],
+];
+const CELLS = WIDTHS.flatMap((row, r) => {
+  let x = LEFT;
+  return row.map((k) => {
+    const w = k * U;
+    const c = { x, y: TOP + r * (CELL_H + GUT), w };
+    x += w + GUT;
+    return c;
+  });
+});
+
+const clamp = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+const Cell: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const start = FIRST + i * GAP;
+  const { x, y, w } = CELLS[i];
+
+  // ① 边框流光：彗星段（长 22% 周长）沿 pathLength=100 跑一圈，8f；随后整圈细边常亮
+  const draw = interpolate(frame, [start, start + 8], [0, 1], { ...clamp, easing: Easing.out(Easing.cubic) });
+  // 描完后流光退火：琥珀亮边 → 弱化成常亮细边
+  const strokeFade = interpolate(frame, [start + 12, start + 26], [1, 0.4], { ...clamp, easing: Easing.out(Easing.quad) });
+  const ring = interpolate(frame, [start + 2, start + 10], [0, 1], { ...clamp, easing: Easing.out(Easing.quad) });
+
+  // ② 内容提亮 + 上浮弹出：描边过半后接力，8f 弹出（back-out 带一点过冲）
+  const lit = interpolate(frame, [start + 6, start + 14], [0, 1], { ...clamp, easing: Easing.out(Easing.cubic) });
+  const rise = interpolate(frame, [start + 6, start + 14], [0, 1], { ...clamp, easing: Easing.bezier(0.3, 1.4, 0.5, 1) });
+  const opacity = 0.18 + 0.82 * lit;
+  const ty = 20 * (1 - rise);
+  // seed 正弦哈希做每格微差（点亮瞬间的辉光强度略有随机感）
+  const jitter = Math.abs((Math.sin(i * 127.3) * 43758.5453) % 1);
+  const pulse = lit * (1 - lit) * 4; // 点亮中段最亮的辉光脉冲
+  const head = 100 * draw; // 彗星头位置（周长百分比）
+  const TAIL = 22;
+
+  return (
+    <div style={{ position: 'absolute', left: x, top: y, width: w, height: CELL_H }}>
+      {/* 暗态卡 + 点亮后的内容（同一张卡，靠 opacity/translateY 提亮浮出） */}
+      <div style={{ opacity, transform: `translateY(${ty.toFixed(2)}px)`, borderRadius: 14 }}>
+        <Card w={w} h={CELL_H} seed={i + 1} tone="dark" />
+        {/* 点亮瞬间卡内一层暖光（裁在圆角内，脉冲后归零） */}
+        <div style={{
+          position: 'absolute', inset: 0, borderRadius: 14, pointerEvents: 'none',
+          background: `radial-gradient(90% 70% at 50% 0%, rgba(232,180,94,${(0.16 * pulse * (0.8 + jitter * 0.4)).toFixed(3)}), rgba(232,180,94,0) 70%)`,
+        }} />
+      </div>
+      {/* 边框流光：SVG rect 描边 */}
+      {draw > 0 && (
+        <svg width={w} height={CELL_H} viewBox={`0 0 ${w} ${CELL_H}`} style={{ position: 'absolute', left: 0, top: ty, overflow: 'visible' }}>
+          <defs>
+            <filter id={`blu-glow-${i}`} x="-10%" y="-10%" width="120%" height="120%">
+              <feGaussianBlur stdDeviation={4 + jitter * 2} />
+            </filter>
+          </defs>
+          {/* 常亮细边：随彗星走过逐段出现，退火后保持 */}
+          <rect
+            x={0.75} y={0.75} width={w - 1.5} height={CELL_H - 1.5} rx={14} fill="none"
+            stroke={AMBER} strokeWidth={1.5} pathLength={100} strokeDasharray={100} strokeDashoffset={100 * (1 - draw)}
+            opacity={ring * strokeFade}
+          />
+          {/* 彗星：辉光层 + 亮芯层，跑完一圈后随退火淡去 */}
+          {[0, 1].map((k) => (
+            <rect
+              key={k}
+              x={1.5} y={1.5} width={w - 3} height={CELL_H - 3} rx={14} fill="none"
+              stroke={k ? '#ffe3ae' : AMBER}
+              strokeWidth={k ? 2.5 : 6}
+              strokeLinecap="round"
+              pathLength={100}
+              strokeDasharray={`${TAIL} ${100 - TAIL}`}
+              strokeDashoffset={TAIL - head}
+              opacity={(1 - interpolate(frame, [start + 8, start + 16], [0, 1], clamp)) * (k ? 1 : 0.8)}
+              filter={k ? undefined : `url(#blu-glow-${i})`}
+            />
+          ))}
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export const BentoLightUp: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ③ 六格全亮(~96f)后整体缓推 scale 1→1.04，25f 收住，之后真静止
+  const push = interpolate(frame, [96, 121], [1, 1.04], { ...clamp, easing: Easing.bezier(0.33, 0, 0.2, 1) });
+
+  // 标题随首格点亮微微提亮，交代场景
+  const titleLit = interpolate(frame, [FIRST, FIRST + 20], [0.25, 1], { ...clamp, easing: Easing.out(Easing.quad) });
+  // 全亮后地面暖光稍起
+  const allLit = interpolate(frame, [FIRST + 5 * GAP + 6, FIRST + 5 * GAP + 30], [0, 1], { ...clamp, easing: Easing.out(Easing.quad) });
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Backdrop tone="dark" light={{ x: 0.5, y: 0.1 }} accent={AMBER} grain={0} vignette={0.55} />
+      <AbsoluteFill style={{
+        background: 'radial-gradient(ellipse 50% 40% at 50% 62%, rgba(232,180,94,0.10), rgba(232,180,94,0) 70%)',
+        opacity: 0.3 + 0.7 * allLit,
+      }} />
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: '960px 540px' }}>
+        <div style={{ position: 'absolute', left: LEFT, top: TOP - 132, fontFamily: FONT.sans, opacity: titleLit }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 9, height: 18 }}>
+            <ShotcraftMark size={24} tone="dark" />
+            <span style={{ fontFamily: BRAND.font, fontSize: 17, fontWeight: 700, letterSpacing: '0.03em', color: AMBER, opacity: 0.9, lineHeight: 1 }}>{BRAND.name}</span>
+          </div>
+          <div style={{ marginTop: 10, fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', color: '#f1efe9', lineHeight: 1 }}>
+            {PITCH.en.taglines[2]}
+          </div>
+        </div>
+        {CELLS.map((_, i) => (
+          <Cell key={i} i={i} frame={frame} />
+        ))}
+      </div>
+      <Grain opacity={0.08} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};