dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx

@@ -0,0 +1,293 @@
+// spotlight-hero-card —— 聚光灯扫过页面锁定一张卡 → 斜侧推进 → 卡片弹起悬浮 →
+// 轮廓光束两圈 → 贴回原位。单一主角式产品开场，把核心对象立成全片主角。
+//
+// 第二轮重设计（石墨剧场 · 钨丝聚光）：
+// - look = graphite。真实页面截图（Q1，纹理不动）被放进一间关了灯的剧场：整页先压到 ~14% 亮度，
+//   只有聚光灯的光池里是页面本色；灯是暖钨丝白，带一道从画面上方打下来的体积光柱（光柱里有浮尘）。
+//   开灯是"啪"的一下：2f 亮起 → 1f 回闪 → 稳住，像舞台灯被推上闸。
+// - 光池游走 3 个中间站（操作员在找人）→ 锁定卡心：光池收拢 + 锁定脉冲 + 光池外再压暗一档。
+// - 相机：全页正视 → 18f 推进到左侧机位斜特写（rotY 34° 主导 + rotX 8°），推进后彻底锁死（R1 真静止）。
+// - 卡：rise（过冲）→ 悬停 sin bob → reseat（落地微压 + 一圈香槟色落地光）。悬浮时卡投在页面上的影子
+//   偏离光源方向、随高度变大变虚（主光方向统一：光从上方偏右来）。
+// - 轮廓光束改为香槟金 + 白芯（graphite 的 accent2），只给主角两圈（Q4）：lap1 快而亮、lap2 慢而弱。
+// - 3D 注记（C3：同一 3D 空间、同一台相机）：暗页上的白色粗黑体「Your product, / in motion.」（video-shotcraft 宣传语），
+//   关键词后长出香槟色马克条（字变墨色）；卡 reseat 时注记也一起"落"回页面平面（translateZ 92→4），
+//   不再提前退场——结尾是一张完整的海报：聚光里的卡 + 页面上的一句话。
+//
+// 时间表（30fps，共 172f）：
+//   0–6     暗场：页面 ~14% 亮度；f2–6 开灯（亮-回闪-稳）
+//   6–34    光池游走 3 站（smooth in-out，站间有 2–3f 停顿）
+//   34–44   锁定：光池收拢到卡 + 6% 脉冲，光池外压暗 0.80→0.90
+//   40–58   相机推进到斜侧特写（18f），高清卡纹理 40–46 交叉淡入
+//   56–66   卡弹起（10f 过冲）；66–124 悬停 bob（周期 40f）
+//   68–82   光束 lap1（快、亮）；88–108 lap2（慢、弱）
+//   70–84   注记入场（升起 + 解糊），84–96 马克条长出
+//   124–142 reseat（18f）；注记同步落回页面；142 触地：落地光一圈 + 微压
+//   142–172 hold：相机锁死，只剩光柱里浮尘与光池极缓呼吸
+import React from 'react';
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { PageCam2D, CamKey2D } from '../../_fixtures/PageCam2D';
+import { EASE, FONT, Grain, ramp } from '../../_fixtures/Polish';
+import { Dust, LOOKS, alpha } from '../../_fixtures/Look';
+import layout from '../../_textures/live-layout.json';
+
+export const SPOTLIGHT_HERO_CARD_DURATION = 172;
+
+const L = LOOKS.graphite;
+const GOLD = L.accent2; // 香槟金：光束 / 马克条 / 落地光
+const BEAM_CORE = 'rgba(255,250,238,0.98)';
+const LAMP = '255,238,212'; // 钨丝暖白
+const PATCH = 'oklch(97.5% 0.008 82)';
+
+const PAGE_H = layout.projects.pageH;
+const MAIN = 3;
+const CARD = layout.projects.cards[MAIN];
+const MCX = CARD.x + CARD.w / 2; // ≈ 960
+const MCY = CARD.y + CARD.h / 2; // 772
+const RADIUS = 16;
+
+// —— 节拍 ——
+const LOCK = 34;
+const PUSH0 = 40;
+const PUSH1 = 58;
+const RISE0 = 56;
+const RISE1 = 66;
+const RESEAT0 = 124;
+const LAND = 142;
+
+const CAM_KEYS: CamKey2D[] = [
+  { frame: 0, cx: 960, cy: 600, zoom: 0.8, rotX: 0, rotY: 0, rotZ: 0, persp: 1200 },
+  { frame: PUSH0, cx: 960, cy: 600, zoom: 0.8, rotX: 0, rotY: 0, rotZ: 0, persp: 1200 },
+  { frame: PUSH1, cx: MCX - 105, cy: MCY - 10, zoom: 2.6, rotX: 8, rotY: 34, rotZ: 2, persp: 1200 },
+  { frame: SPOTLIGHT_HERO_CARD_DURATION, cx: MCX - 105, cy: MCY - 10, zoom: 2.6, rotX: 8, rotY: 34, rotZ: 2, persp: 1200 },
+];
+const PUSH_EASE = Easing.bezier(0.35, 0, 0.2, 1);
+const POP_EASE = Easing.bezier(0.2, 1.25, 0.3, 1);
+const RESEAT_EASE = Easing.bezier(0.4, 0, 0.3, 1.05);
+
+const clampOpt = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 页面相机的纯函数版（与 PageCam2D 同一套插值与 3D 坐标数学），供注记层复用同一台相机
+const camAt = (frame: number) => {
+  let a = CAM_KEYS[0];
+  let b = CAM_KEYS[CAM_KEYS.length - 1];
+  for (let i = 0; i < CAM_KEYS.length - 1; i++) {
+    if (frame >= CAM_KEYS[i].frame && frame <= CAM_KEYS[i + 1].frame) { a = CAM_KEYS[i]; b = CAM_KEYS[i + 1]; break; }
+  }
+  const t = a.frame === b.frame ? 1 : interpolate(frame, [a.frame, b.frame], [0, 1], { ...clampOpt, easing: PUSH_EASE });
+  const m = (x?: number, y?: number) => (x ?? 0) + ((y ?? 0) - (x ?? 0)) * t;
+  return { cx: m(a.cx, b.cx), cy: m(a.cy, b.cy), zoom: m(a.zoom, b.zoom), rotX: m(a.rotX, b.rotX), rotY: m(a.rotY, b.rotY), rotZ: m(a.rotZ, b.rotZ), persp: m(a.persp, b.persp) };
+};
+const NoteCam: React.FC<{ frame: number; children: React.ReactNode }> = ({ frame, children }) => {
+  const c = camAt(frame);
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', pointerEvents: 'none' }}>
+      <div style={{ position: 'absolute', inset: 0, perspective: `${c.persp * c.zoom}px`, perspectiveOrigin: '960px 540px' }}>
+        <div style={{
+          position: 'absolute', width: 1920, height: PAGE_H, zoom: c.zoom, transformOrigin: `${c.cx}px ${c.cy}px`, transformStyle: 'preserve-3d',
+          transform: `translate(${960 / c.zoom - c.cx}px, ${540 / c.zoom - c.cy}px) rotateY(${c.rotY}deg) rotateX(${c.rotX}deg) rotateZ(${c.rotZ}deg)`,
+        }}>
+          {children}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const SpotlightHeroCard: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // --- 开灯：亮 → 回闪 → 稳（舞台灯推闸） ---
+  const lamp = interpolate(frame, [1, 3, 4, 6], [0, 1, 0.62, 1], clampOpt);
+
+  // --- 光池游走（屏幕空间 %）：3 个中间站，站间短停 → 锁定卡心 → 随推进移到画面中 ---
+  const ST = [4, 10, 13, 19, 22, 28, LOCK, PUSH1];
+  const spotX = interpolate(frame, ST, [24, 24, 72, 72, 38, 38, 50, 60], { ...clampOpt, easing: EASE.smooth });
+  const spotY = interpolate(frame, ST, [30, 30, 40, 40, 62, 62, 64, 55], { ...clampOpt, easing: EASE.smooth });
+  const poolBase = interpolate(frame, [22, LOCK, PUSH1], [400, 300, 470], { ...clampOpt, easing: EASE.swift });
+  const pulse = interpolate(frame, [LOCK, LOCK + 4, LOCK + 10], [0, 0.06, 0], clampOpt);
+  const breathe = 1 + 0.015 * Math.sin((frame - LAND) / 14) * ramp(frame, LAND, 20, EASE.out);
+  const poolRx = poolBase * (1 + pulse) * breathe;
+  const poolRy = poolBase * interpolate(frame, [PUSH0, PUSH1], [0.8, 0.92], clampOpt) * (1 + pulse) * breathe;
+  const dark = interpolate(frame, [0, LOCK, PUSH1], [0.9, 0.92, 0.94], clampOpt); // 光池外压暗
+  // 锁定后：屏幕空间的圆光池 → 页面空间的"卡形光"（同一台相机、卡形软孔）。卡在 z 上高于这层暗场，
+  // 所以卡面从边到边全亮、原色对比；衰减只发生在卡外。推进期间两套灯交叉过渡。
+  const cardLight = ramp(frame, LOCK + 4, PUSH1 - LOCK - 4, EASE.smooth);
+  const holdBreath = 1 + 0.012 * Math.sin((frame - LAND) / 14) * ramp(frame, LAND, 20, EASE.out);
+
+  // --- 卡：rise → hover → reseat ---
+  const rise = interpolate(frame, [RISE0, RISE1], [0, 1], { ...clampOpt, easing: POP_EASE });
+  const reseat = interpolate(frame, [RESEAT0, LAND], [0, 1], { ...clampOpt, easing: RESEAT_EASE });
+  const lift = rise * (1 - reseat);
+  const bob = Math.sin(((frame - RISE1) / 40) * Math.PI * 2) * 4 * lift;
+  const z = 110 * lift + bob;
+  const landed = frame >= LAND;
+  const press = interpolate(frame, [LAND - 4, LAND - 1, LAND], [1, 0.997, 1], clampOpt);
+  // 投影：光从上方偏右来 → 影子落向左下，随高度变大变虚
+  const shadow = `${-10 * lift}px ${10 * lift}px ${12 + 12 * lift}px rgba(10,8,6,${0.35 * lift}), ${-36 * lift}px ${48 * lift}px ${90 * lift}px rgba(10,8,6,${0.42 * lift})`;
+
+  const slotVis = Math.min(1, rise * 2) * (1 - reseat);
+  const landPulse = interpolate(frame, [LAND - 4, LAND, LAND + 14], [0, 1, 0], clampOpt);
+  const slotEdge = Math.min(1, 0.45 * (1 - reseat)) + landPulse * 0.5;
+
+  // --- 轮廓光束两圈 ---
+  const beam1Prog = interpolate(frame, [68, 82], [0, 1], { ...clampOpt, easing: EASE.linear });
+  const beam1On = frame >= 67 && frame <= 83;
+  const beam2Prog = interpolate(frame, [88, 108], [0, 1], { ...clampOpt, easing: EASE.swift });
+  const beam2On = frame >= 87 && frame <= 109;
+  const beamTrail = interpolate(frame, [108, 122], [0.4, 0], clampOpt);
+  const bw = CARD.w + 6;
+  const bh = CARD.h + 6;
+
+  const hiresIn = interpolate(frame, [PUSH0, PUSH0 + 6], [0, 1], clampOpt);
+  const rimOn = 0.5 * Math.min(1, lift + ramp(frame, PUSH0, 16, EASE.linear));
+
+  // --- 注记 ---
+  const noteIn = ramp(frame, 70, 14, EASE.out);
+  const noteSettle = interpolate(frame, [RESEAT0 - 4, LAND], [0, 1], { ...clampOpt, easing: RESEAT_EASE });
+  const noteZ = 4 + (88 + Math.sin(((frame - 70) / 44) * Math.PI * 2) * 3) * (1 - noteSettle);
+  const hl = ramp(frame, 84, 12, EASE.swift);
+
+  // --- 体积光柱：光源在画面上方偏右，打到光池 ---
+  const px = (spotX / 100) * 1920;
+  const py = (spotY / 100) * 1080;
+  const sx = px + 420;
+  const sy = -720;
+  const coneW = poolRx * 0.6;
+  const cone = `${sx - 26}px ${sy}px, ${sx + 26}px ${sy}px, ${px + coneW}px ${py}px, ${px - coneW}px ${py}px`;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: L.bg[2] }}>
+      <PageCam2D src="textures/live/projects-full.png" pageH={PAGE_H} keys={CAM_KEYS} ease={PUSH_EASE} bg={L.bg[1]}>
+        {/* 倾斜平面近端（下缘）的一线轮廓光 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 8, background: 'rgba(255,240,220,0.8)', filter: 'blur(6px)', opacity: rimOn, pointerEvents: 'none' }} />
+
+        {/* 页面空间暗场：整页压暗，只在卡位挖一个卡形软孔（紧孔 σ22 + 一圈 15% 的宽溢光 σ60）；translateZ(1) 垫在卡之下 */}
+        {cardLight > 0.001 ? (
+          <svg width={1920} height={PAGE_H} style={{ position: 'absolute', left: 0, top: 0, transform: 'translateZ(1px)', opacity: cardLight, pointerEvents: 'none' }}>
+            <defs>
+              <filter id="shc-tight" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="22" /></filter>
+              <filter id="shc-wide" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="60" /></filter>
+              <mask id="shc-hole" maskUnits="userSpaceOnUse" x={0} y={0} width={1920} height={PAGE_H}>
+                <rect x={0} y={0} width={1920} height={PAGE_H} fill="white" />
+                <rect x={CARD.x - 60} y={CARD.y - 50} width={CARD.w + 120} height={CARD.h + 100} rx={70} fill="#262626" filter="url(#shc-wide)" />
+                <rect x={CARD.x - 14} y={CARD.y - 14} width={CARD.w + 28} height={CARD.h + 28} rx={RADIUS + 14} fill="black" filter="url(#shc-tight)" />
+              </mask>
+            </defs>
+            <rect x={0} y={0} width={1920} height={PAGE_H} fill="rgb(14,12,10)" fillOpacity={Math.min(0.97, 0.94 * holdBreath)} mask="url(#shc-hole)" />
+          </svg>
+        ) : null}
+
+        <div style={{ transformStyle: 'preserve-3d' }}>
+          {/* 卡起飞后的原位补丁 + 香槟色呼吸描边 */}
+          {slotVis > 0.02 || landPulse > 0.02 ? (
+            <div style={{
+              position: 'absolute', left: CARD.x - 2, top: CARD.y - 2, width: CARD.w + 4, height: CARD.h + 4, transform: 'translateZ(1.5px)',
+              background: slotVis > 0.02 ? PATCH : 'transparent', borderRadius: RADIUS,
+              boxShadow: `inset 0 0 26px rgba(150,110,40,${(0.14 * slotEdge).toFixed(3)})`, opacity: Math.max(slotVis, landPulse),
+            }}>
+              <div style={{ position: 'absolute', inset: 0, borderRadius: RADIUS, border: `1.5px solid ${GOLD}`, opacity: slotEdge, boxShadow: landPulse > 0.02 ? `0 0 ${(24 * landPulse).toFixed(1)}px ${alpha(GOLD, 0.8)}` : undefined }} />
+            </div>
+          ) : null}
+
+          {/* 悬浮的卡 */}
+          <div style={{
+            position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h,
+            transform: `translateZ(${(z + 2).toFixed(2)}px) scale(${press})`, transformOrigin: 'center center', transformStyle: 'preserve-3d',
+          }}>
+            <div style={{ position: 'absolute', inset: 0, borderRadius: RADIUS, overflow: 'hidden', boxShadow: landed ? 'none' : shadow }}>
+              <Img src={staticFile(`textures/live/${CARD.file}`)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }} />
+              <Img src={staticFile('textures/live/card4-hires.png')} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', opacity: hiresIn }} />
+              {/* 悬浮时卡面受光：右上角暖光 → 左下渐暗 */}
+              <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(200deg, rgba(${LAMP},0.35), rgba(${LAMP},0) 45%, rgba(20,16,10,0.08) 100%)`, opacity: lift, pointerEvents: 'none' }} />
+            </div>
+            <div style={{ position: 'absolute', inset: 0, borderRadius: RADIUS, // 轮廓光：一圈暖白发丝边 + 极淡外溢，让卡的轮廓在暗页上读得清（锁定后亮起）
+              boxShadow: `inset 0 0 0 1px rgba(255,255,255,${(0.7 * lift).toFixed(3)}), 0 0 0 1.5px rgba(255,236,205,${(0.7 * cardLight).toFixed(3)}), 0 0 44px rgba(255,214,160,${(0.18 * cardLight).toFixed(3)})`, pointerEvents: 'none' }} />
+
+            {/* 轮廓光束：SVG 圆角矩形，pathLength=1 的行进弧段 */}
+            {(beam1On || beam2On) && lift > 0.4 ? (
+              <svg width={bw} height={bh} viewBox={`0 0 ${bw} ${bh}`} style={{
+                position: 'absolute', left: -3, top: -3, overflow: 'visible', pointerEvents: 'none', opacity: beam1On ? 1 : 0.62,
+                filter: `drop-shadow(0 0 6px ${alpha(GOLD, 0.9)}) drop-shadow(0 0 18px rgba(255,236,200,0.55))`,
+              }}>
+                <rect x={2} y={2} width={bw - 4} height={bh - 4} rx={RADIUS} fill="none" stroke={GOLD} strokeWidth={beam1On ? 5 : 3.5} strokeLinecap="round"
+                  pathLength={1} strokeDasharray="0.16 1" strokeDashoffset={-(beam1On ? beam1Prog : beam2Prog)} />
+                <rect x={2} y={2} width={bw - 4} height={bh - 4} rx={RADIUS} fill="none" stroke={BEAM_CORE} strokeWidth={beam1On ? 2.5 : 1.75} strokeLinecap="round"
+                  pathLength={1} strokeDasharray="0.16 1" strokeDashoffset={-(beam1On ? beam1Prog : beam2Prog)} />
+              </svg>
+            ) : null}
+            {beamTrail > 0.01 ? (
+              <div style={{ position: 'absolute', inset: -3, borderRadius: RADIUS + 3, border: `1.5px solid ${GOLD}`, opacity: beamTrail, pointerEvents: 'none' }} />
+            ) : null}
+          </div>
+        </div>
+
+      </PageCam2D>
+
+      {/* —— 灯光（屏幕空间）——
+          ① 关灯：光池外 multiply 压暗到 ~14%（暖黑而非纯黑，保色相）；
+          ② 光池：钨丝暖白 soft-light 提亮中间调 + 极弱 screen 抬亮；
+          ③ 体积光柱 + 柱内浮尘（screen）。 */}
+      <AbsoluteFill style={{
+        // 近高斯的衰减：中心完全透明 → 边缘压到 ~10% 亮度；多段 stop 让光池边缘软而不是一圈硬边
+        background: `radial-gradient(${(poolRx * 1.35).toFixed(1)}px ${(poolRy * 1.35).toFixed(1)}px at ${spotX}% ${spotY}%, rgba(14,12,10,0) 0%, rgba(14,12,10,0) 26%, rgba(14,12,10,${(dark * 0.25).toFixed(3)}) 44%, rgba(14,12,10,${(dark * 0.62).toFixed(3)}) 62%, rgba(14,12,10,${(dark * 0.9).toFixed(3)}) 80%, rgba(14,12,10,${dark.toFixed(3)}) 100%)`,
+        mixBlendMode: 'multiply', pointerEvents: 'none', opacity: lamp * (1 - cardLight),
+      }} />
+      {/* 开灯前：整页压暗（灯推闸时由它和上一层交接） */}
+      <AbsoluteFill style={{ background: 'rgba(14,12,10,1)', mixBlendMode: 'multiply', opacity: 0.84 * (1 - lamp), pointerEvents: 'none' }} />
+      {/* 光池里的钨丝暖色（soft-light，低强度——白卡不被打爆） */}
+      <AbsoluteFill style={{
+        background: `radial-gradient(${(poolRx * 1.2).toFixed(1)}px ${(poolRy * 1.2).toFixed(1)}px at ${spotX}% ${spotY}%, rgba(${LAMP},0.24) 0%, rgba(${LAMP},0.12) 50%, rgba(${LAMP},0) 80%)`,
+        mixBlendMode: 'soft-light', pointerEvents: 'none', opacity: lamp * (1 - cardLight), // 锁定后退掉：卡上不叠任何泛光，文字保持原生对比
+      }} />
+      {/* 体积光柱：梯形 + 纵向渐变 + 大半径模糊；推进后光柱变淡（镜头离光源更近、柱身出画） */}
+      <AbsoluteFill style={{ mixBlendMode: 'screen', pointerEvents: 'none', opacity: lamp * (1 - 0.45 * ramp(frame, PUSH0, 18, EASE.smooth)) }}>
+        {/* 模糊放在外层、裁切放在内层：柱身边缘是软的 */}
+        <div style={{ position: 'absolute', inset: 0, filter: 'blur(28px)' }}>
+          <div style={{
+            position: 'absolute', inset: 0, clipPath: `polygon(${cone})`,
+            background: `linear-gradient(${(Math.atan2(py - sy, px - sx) * 180 / Math.PI - 90).toFixed(1)}deg, rgba(${LAMP},0.34) 0%, rgba(${LAMP},0.16) 60%, rgba(${LAMP},0.06) 100%)`,
+          }} />
+        </div>
+        <div style={{ position: 'absolute', inset: 0, clipPath: `polygon(${cone})` }}>
+          <Dust look={L} count={36} seed={4} drift={0.3} opacity={0.6} color="#fff1dc" />
+        </div>
+      </AbsoluteFill>
+      {/* 注记层：与页面同一台相机（camAt 复刻 PageCam2D 的坐标数学），但画在灯光层之上——
+          它是"自发光"的字，不被关灯的 multiply 压暗；暗色衬底负责把背后的邻卡字压下去 */}
+      <NoteCam frame={frame}>
+          {/* 3D 注记：卡左侧，同一 3D 空间、同一台相机；reseat 时一起落回页面 */}
+          {frame >= 70 ? (
+            <div style={{ transformStyle: 'preserve-3d', pointerEvents: 'none' }}>
+              {/* 注记投在页面上的软影（落回页面时收拢消失） */}
+              <div style={{
+                position: 'absolute', left: 520, top: 760, width: 240, height: 70, transform: 'translateZ(2px)',
+                background: 'radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55), transparent 70%)', filter: 'blur(12px)',
+                opacity: 0.5 * noteIn * (1 - noteSettle),
+              }} />
+              {/* 暗色衬底：注记压在邻卡文字上，没有衬底就和背后的字打架（Q11）；同一 3D 平面、同一台相机 */}
+              <div style={{
+                position: 'absolute', left: 400, top: 600, width: 380, height: 240, // 右缘止于卡左缘（x=781）之前，不压卡面
+                transform: `translateZ(${(noteZ - 1).toFixed(2)}px) translateY(${((1 - noteIn) * 26).toFixed(2)}px)`,
+                background: 'radial-gradient(ellipse 50% 50% at 52% 50%, rgba(16,14,12,0.97) 0%, rgba(16,14,12,0.9) 60%, rgba(16,14,12,0) 100%)',
+                filter: 'blur(6px)', opacity: noteIn,
+              }} />
+              <div style={{
+                position: 'absolute', left: 528, top: 662, width: 'max-content', whiteSpace: 'nowrap',
+                transform: `translateZ(${noteZ.toFixed(2)}px) translateY(${((1 - noteIn) * 26).toFixed(2)}px)`,
+                opacity: noteIn, filter: noteIn < 1 ? `blur(${((1 - noteIn) * 4).toFixed(2)}px)` : undefined,
+                fontFamily: FONT.sans, letterSpacing: '-0.035em', lineHeight: 1.1,
+              }}>
+                <div style={{ fontSize: 34, fontWeight: 760, color: '#f6f3ec', textShadow: '0 2px 18px rgba(0,0,0,0.6)' }}>Your product,</div>
+                <div style={{ position: 'relative', display: 'inline-block', marginTop: 2 }}>
+                  <div style={{ position: 'absolute', left: -6, top: '8%', bottom: '2%', width: `calc(${hl.toFixed(4)} * (100% + 12px))`, background: GOLD, borderRadius: 4 }} />
+                  <div style={{ position: 'relative', fontSize: 34, fontWeight: 760, color: hl > 0.55 ? '#14110c' : '#f6f3ec' }}>in motion.</div>
+                </div>
+              </div>
+            </div>
+          ) : null}
+      </NoteCam>
+      <Grain opacity={0.07} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx

@@ -0,0 +1,183 @@
+// stroke-segment-build —— 断笔成字（《异形》式）：标题拆成十几段互不相连的笔画，乱序逐段点亮，
+// 前 70% 读不出字，最后几段"钥匙段"落位的瞬间意义"啪"地成立。
+//
+// 第二轮重设计（极光夜 · 霓虹灯牌）：
+// - look = aurora。"SHIP" 重画成 400px 高的单线几何字（S 用两段反向弧，P 有圆弧碗），拆成 16 根
+//   互不相连的霓虹灯管（灯管之间留电极缝），挂在一面深紫墙上。每根灯管"点亮"是霓虹起辉：
+//   亮—灭—亮—半亮—亮 的 7f 抖闪，之后以 0.58 亮度稳住；揭晓前整块灯牌处于"半亮碎片"态。
+// - 节奏「疏 → 密 → 屏息 → 一、二、三 → 轰」：前 13 段的起点按 ease-out 分布（间隔 9f 越来越密到 3f），
+//   然后 14f 屏息（只有灯管电流的微弱嗡动），最后 3 根钥匙段（S 脊、H 横、P 碗底）以 7f/6f 的拍子落下，
+//   末段落位帧整块灯牌电流涌起：全部灯管 0.58→1 并冲到 1.25 再回落、灯牌自身的宽泛光涌起一次、墙面与地面被照亮。
+// - 空间：墙面的环境光 = 已点亮灯管数（物理：灯越多墙越亮）；下方是一块光亮地面，倒映灯牌下半截
+//   （模糊 + 渐隐）+ 一条地面光带；整个镜头 1→1.035 极缓推近。
+// - 揭晓后才浮出副题（不提前泄底）：video-shotcraft 字标（全小写）● ONE PROMPT, ONE FILM。
+//
+// 时间表（30fps，共 165f）：
+//   0–12    暗墙 + 极淡的墙面光（开场不是死黑）
+//   12–72   前 13 段乱序点亮，间隔 9f → 3f（越来越快）
+//   72–86   屏息 14f：什么都不新增，只有灯管嗡动
+//   86/93/99 三根钥匙段：S 脊 → H 横 → P 碗底
+//   105     末段起辉完毕 = 揭晓：电流涌起 + 泛光 + 墙/地亮起
+//   113–129 副题升起
+//   129–165 hold：灯牌稳定发光，镜头极缓推近
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';
+import { EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, stagger } from '../../_fixtures/Look';
+import { BRAND } from '../../_fixtures/Brand';
+
+export const STROKE_SEGMENT_BUILD_DURATION = 165;
+
+const L = LOOKS.aurora;
+const TUBE = '#ff5cab'; // 灯管本色（霓虹粉）
+const GLOW = L.accent2; // 泛光
+const CORE = '#fff2f8'; // 白热芯
+
+// —— 字形：每字 260×400，字间 70；单线几何字，笔画线宽 30 ——
+const LW = 260;
+const LH = 400;
+const ADV = LW + 70;
+const WORD_W = ADV * 3 + LW; // 1250
+const OX = (1920 - WORD_W) / 2;
+const OY = 190;
+const SW = 30;
+
+type Seg = { d: string; key?: boolean };
+const at = (k: number) => (x: number) => x + ADV * k;
+const S = at(0);
+const H = at(1);
+const I = at(2);
+const P = at(3);
+const SEGS: Seg[] = [
+  // S —— 6 段（两段反向弧拆开）
+  { d: `M ${S(228)} 92 C ${S(214)} 44 ${S(176)} 20 ${S(130)} 20` }, // 0 顶钩
+  { d: `M ${S(130)} 20 C ${S(72)} 20 ${S(34)} 54 ${S(34)} 104` }, // 1 左上弧
+  { d: `M ${S(34)} 104 C ${S(34)} 156 ${S(78)} 178 ${S(130)} 196` }, // 2 上脊
+  { d: `M ${S(130)} 196 C ${S(186)} 214 ${S(228)} 240 ${S(228)} 296`, key: true }, // 3 下脊（钥匙）
+  { d: `M ${S(228)} 296 C ${S(228)} 348 ${S(186)} 380 ${S(130)} 380` }, // 4 右下弧
+  { d: `M ${S(130)} 380 C ${S(80)} 380 ${S(42)} 356 ${S(30)} 306` }, // 5 尾钩
+  // H —— 4 段
+  { d: `M ${H(34)} 20 L ${H(34)} 196` }, // 6 左竖上
+  { d: `M ${H(34)} 204 L ${H(34)} 380` }, // 7 左竖下
+  { d: `M ${H(226)} 20 L ${H(226)} 380` }, // 8 右竖
+  { d: `M ${H(58)} 200 L ${H(202)} 200`, key: true }, // 9 中横（钥匙）
+  // I —— 2 段
+  { d: `M ${I(130)} 20 L ${I(130)} 196` }, // 10 上
+  { d: `M ${I(130)} 204 L ${I(130)} 380` }, // 11 下
+  // P —— 4 段
+  { d: `M ${P(34)} 20 L ${P(34)} 196` }, // 12 竖上
+  { d: `M ${P(34)} 204 L ${P(34)} 380` }, // 13 竖下
+  { d: `M ${P(58)} 20 L ${P(140)} 20 C ${P(196)} 20 ${P(228)} 56 ${P(228)} 108` }, // 14 碗顶
+  { d: `M ${P(228)} 108 C ${P(228)} 160 ${P(196)} 196 ${P(140)} 196 L ${P(58)} 196`, key: true }, // 15 碗底（钥匙）
+];
+
+// 乱序表：前 13 段跨字乱跳（读不出），钥匙段（S 下脊 / H 中横 / P 碗底）压到最后
+const ORDER = [14, 5, 8, 10, 0, 13, 6, 1, 11, 4, 12, 7, 2, 3, 9, 15];
+const FIRST = 12;
+const SPAN = 60; // 前 13 段起点分布在 12–72
+const KEY_AT = [86, 93, 99]; // 屏息 14f 后的三拍
+const STRIKE = 7; // 单根起辉时长
+const REVEAL = KEY_AT[2] + 6; // 105
+const startOf = (rank: number) => (rank < 13 ? FIRST + stagger(rank, 13, SPAN, EASE.out) : KEY_AT[rank - 13]);
+
+// 霓虹起辉：亮—灭—亮—半亮—亮 → 稳在 0.58（揭晓后到 1）
+const strike = (f: number, s: number) =>
+  interpolate(f, [s, s + 1, s + 2, s + 3, s + 4, s + 5, s + STRIKE], [0, 1, 0.12, 0.95, 0.4, 1, 0.58], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+// 确定性"电流嗡动"：极小的亮度起伏（每根相位不同）
+const hum = (f: number, i: number) => 1 + 0.035 * Math.sin(f * 0.9 + i * 2.3) * Math.sin(f * 0.37 + i);
+
+// 揭晓的"泛光一次"不另画光斑，而是让灯牌自己的宽泛光随电流涌起一下（形状就是字，Q4 只给主角）
+const Sign: React.FC<{ frame: number; surge: number; reveal: number; idPrefix: string }> = ({ frame, surge, reveal, idPrefix }) => {
+  const lit = SEGS.map((seg, i) => {
+    const s = startOf(ORDER.indexOf(i));
+    if (frame < s) return null; // 未亮段不渲染（真静止 / 不泄底）
+    const b = strike(frame, s);
+    const settled = frame >= s + STRIKE;
+    const level = settled ? 0.58 + 0.42 * reveal : b;
+    return { i, d: seg.d, b: level * (settled ? hum(frame, i) : 1) * (1 + 0.25 * surge) };
+  }).filter((x): x is NonNullable<typeof x> => x !== null);
+  // 电极缝：每根灯管两端各留 4% 不画
+  const dash = { pathLength: 1, strokeDasharray: '0.92 1', strokeDashoffset: -0.04 } as const;
+  return (
+    <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
+      <defs>
+        <filter id={`${idPrefix}w`} x="-20%" y="-40%" width="140%" height="180%"><feGaussianBlur stdDeviation="22" /></filter>
+        <filter id={`${idPrefix}n`} x="-20%" y="-40%" width="140%" height="180%"><feGaussianBlur stdDeviation="6" /></filter>
+      </defs>
+      <g transform={`translate(${OX} ${OY})`} fill="none" strokeLinecap="round" strokeLinejoin="round">
+        {/* 宽泛光（墙上的光晕） */}
+        <g filter={`url(#${idPrefix}w)`}>
+          {lit.map((g) => <path key={g.i} d={g.d} stroke={GLOW} strokeWidth={SW + 46} opacity={Math.min(1, 0.4 * g.b + 0.4 * surge)} {...dash} />)}
+        </g>
+        {/* 近泛光（灯管周围的辉） */}
+        <g filter={`url(#${idPrefix}n)`}>
+          {lit.map((g) => <path key={g.i} d={g.d} stroke={TUBE} strokeWidth={SW + 12} opacity={Math.min(1, 0.75 * g.b)} {...dash} />)}
+        </g>
+        {/* 灯管本体 + 白热芯 */}
+        {lit.map((g) => <path key={g.i} d={g.d} stroke={TUBE} strokeWidth={SW} opacity={Math.min(1, 0.35 + 0.65 * g.b)} {...dash} />)}
+        {lit.map((g) => <path key={g.i} d={g.d} stroke={CORE} strokeWidth={SW * 0.32} opacity={Math.min(1, g.b)} {...dash} />)}
+      </g>
+    </svg>
+  );
+};
+
+export const StrokeSegmentBuild: React.FC = () => {
+  const frame = useCurrentFrame();
+  const litCount = ORDER.reduce((n, _, rank) => n + (frame >= startOf(rank) + 1 ? 1 : 0), 0);
+  // 揭晓：灯管 0.72 → 1；电流涌起（冲到 1.25 再回落）
+  const reveal = ramp(frame, REVEAL, 8, EASE.snappy);
+  const surge = interpolate(frame, [REVEAL, REVEAL + 3, REVEAL + 22], [0, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: EASE.out });
+  const pulse = 1 + 0.02 * surge;
+  const ambient = 0.12 + 0.5 * (litCount / SEGS.length) + 0.35 * reveal + 0.3 * surge; // 墙面受光
+  const push = 1 + 0.035 * ramp(frame, 0, STROKE_SEGMENT_BUILD_DURATION, EASE.smooth);
+  const kicker = ramp(frame, REVEAL + 8, 16, EASE.out);
+
+  const FLOOR = 780; // 墙与地面交线
+  return (
+    <AbsoluteFill style={{ background: L.bg[2] }}>
+      <AbsoluteFill style={{ transform: `scale(${push})`, transformOrigin: '50% 45%' }}>
+        <Stage look={L} keyLight={{ x: 0.5, y: 0.0 }} fill={null} intensity={0.35} vignette={0.7}>
+          {/* 墙面：灯牌照亮的一团粉紫光（随点亮数增长） */}
+          <div style={{
+            position: 'absolute', left: 160, top: -40, width: 1600, height: 960, opacity: Math.min(1, ambient),
+            background: `radial-gradient(ellipse 50% 46% at 50% 46%, ${alpha(GLOW, 0.28)} 0%, ${alpha(L.light, 0.12)} 45%, ${alpha(L.light, 0)} 72%)`,
+          }} />
+          {/* 地面：更深一档 + 交线处一条受光带 */}
+          <div style={{ position: 'absolute', left: 0, right: 0, top: FLOOR, bottom: 0, background: `linear-gradient(180deg, ${alpha('#05030a', 0.55)} 0%, ${alpha('#05030a', 0.85)} 100%)` }} />
+          <div style={{
+            position: 'absolute', left: 260, width: 1400, top: FLOOR - 40, height: 120, opacity: Math.min(1, ambient * 0.9),
+            background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(GLOW, 0.3)} 0%, ${alpha(GLOW, 0)} 70%)`,
+          }} />
+        </Stage>
+
+        {/* 地面倒影：灯牌沿地面交线镜像、模糊、渐隐 */}
+        <div style={{
+          position: 'absolute', inset: 0, transform: `translateY(${2 * FLOOR}px) scaleY(-1)`, transformOrigin: '0 0', opacity: 0.42,
+          filter: 'blur(5px)', // 遮罩在镜像前的本地坐标里：本地 y≥FLOOR 会翻到墙上，必须全透明；越往上（离地越远）越淡
+          WebkitMaskImage: `linear-gradient(180deg, transparent ${FLOOR - 340}px, rgba(0,0,0,0.9) ${FLOOR - 40}px, #000 ${FLOOR - 1}px, transparent ${FLOOR}px)`,
+        }}>
+          <div style={{ position: 'absolute', inset: 0, transform: `scale(${pulse})`, transformOrigin: `960px ${OY + LH / 2}px` }}>
+            <Sign frame={frame} surge={surge} reveal={reveal} idPrefix="ssbr" />
+          </div>
+        </div>
+
+        {/* 灯牌 */}
+        <div style={{ position: 'absolute', inset: 0, transform: `scale(${pulse})`, transformOrigin: `960px ${OY + LH / 2}px` }}>
+          <Sign frame={frame} surge={surge} reveal={reveal} idPrefix="ssb" />
+        </div>
+
+        {/* 揭晓后的副题：只在落位之后出现 */}
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: OY + LH + 62, textAlign: 'center', fontFamily: FONT.sans,
+          fontSize: 32, fontWeight: 600, letterSpacing: '0.34em', color: L.ink2, opacity: kicker,
+          transform: `translateY(${((1 - kicker) * 14).toFixed(2)}px)`,
+        }}>
+          {/* 字标按品牌规范全小写、收窄字距；后半句沿用原副题的宽字距大写 */}
+          <span style={{ fontFamily: BRAND.font, fontWeight: 700, letterSpacing: '0.06em', color: L.ink }}>{BRAND.name}</span>
+          <span style={{ color: TUBE, margin: '0 0.5em 0 0.8em' }}>●</span> ONE PROMPT, ONE FILM
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};