dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/effects/fui-hud-moves/ReticleLockOn.tsx

@@ -0,0 +1,164 @@
+// reticle-lock-on —— 准星咬合（钢铁侠 HUD / 安德的游戏）
+// FakeDashboard 静置。四个 L 形角标组成的取景框从画外飞入（大框），
+// 超调回弹后收缩贴紧目标卡片四角"咔"地咬合定格；咬合帧卡片微亮 +
+// 上方弹一行小标签。画面不冻结，是运动中的捕获。
+// f0–14 面板静置；f14–24 飞入；f20–46 收缩（含过冲回弹）；f46 咬合；
+// 标签 f48–58 弹出；之后静止 ≥30f（90f 总长）。
+//
+// 质感升级：补导出时长（工作台原先从源码猜成 24f，只演到飞入一半）；目标框改用 fixture 真实
+// 卡片几何（524×454，原 425 高差了 29px 咬不住下沿）；角标从 10px 实心黑块改为 5px 圆头强调色
+// 笔画 + 白色描边衬底（任何底色上都清楚）+ 中心十字刻度；飞入段按速度做斜向运动模糊；
+// 收缩改为与飞入重叠、不对称缓动的连续过冲（不再每个关键帧都停一下）；咬合帧角标一次"咔"的
+// 收紧脉冲，目标微亮做成裁进圆角的顶亮渐变 + 强调色描边，其余画面轻压暗聚焦；标签换成出版级
+// 深色胶囊（状态点 + 卡名 + 等宽锁定编号）；整段相机极缓推向目标，"在流动中点名"。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../../_fixtures/Fixtures';
+import { EASE, FONT, Grain, SpeedBlur, mix, ramp } from '../../_fixtures/Polish';
+
+export const RETICLE_LOCK_ON_DURATION = 90; // 3s：飞入 → 咬合 → 标签 → 静止 ≥1s
+
+// 目标：variant A 网格第 2 张卡（第一行中间）。fixture 几何：卡 524×454 @ x=808, y=108
+const CARD_X = 808;
+const CARD_Y = 108;
+const CARD_W = 524;
+const CARD_H = 454;
+const PAD = 16; // 咬合后角标与卡的呼吸距
+
+const TCX = CARD_X + CARD_W / 2;
+const TCY = CARD_Y + CARD_H / 2;
+
+const FLY_IN = 14; // 飞入开始
+const FLY_END = 24; // 飞入结束（大框就位）
+const SHRINK0 = 20; // 收缩起点（与飞入尾段重叠 4f，动作连贯不停顿）
+const UNDER = 40; // 收过头（0.94×）的时刻
+const LOCK_END = 46; // 咬合帧
+const LABEL0 = LOCK_END + 2;
+const LABEL_END = LOCK_END + 12;
+
+const ARM = 58; // L 臂长
+const THICK = 5; // L 笔画粗
+const INK = G.accent; // 角标色：唯一强调色
+
+const clamp = { extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const };
+
+// 飞入位移（px）：整框从右下画外冲进来，ease-out cubic
+const flyAt = (f: number) => {
+  const t = interpolate(f, [FLY_IN, FLY_END], [0, 1], { easing: Easing.out(Easing.cubic), ...clamp });
+  return { x: (1 - t) * 1100, y: (1 - t) * 620 };
+};
+// 收缩倍率：2.2 → 0.94（swift 不对称缓动，冲过头）→ 1（ease-out 回弹落定）
+const shrinkAt = (f: number) =>
+  f < UNDER ? mix(2.2, 0.94, ramp(f, SHRINK0, UNDER - SHRINK0, EASE.swift)) : mix(0.94, 1, ramp(f, UNDER, LOCK_END - UNDER, EASE.out));
+
+export const ReticleLockOn: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const fly = flyAt(frame);
+  const fly0 = flyAt(frame - 0.5);
+  const fly1 = flyAt(frame + 0.5);
+  const shrink = shrinkAt(frame);
+  // 咬合"咔"：锁定瞬间角标再向内收紧 6px 后弹回（4f）
+  const bite = interpolate(frame, [LOCK_END, LOCK_END + 1, LOCK_END + 5], [0, 1, 0], clamp);
+  const hw = (CARD_W / 2 + PAD) * shrink - 6 * bite;
+  const hh = (CARD_H / 2 + PAD) * shrink - 6 * bite;
+
+  // 咬合帧：卡片微亮（快闪 0.55 后停在 0.28；裁进卡片圆角）
+  const glow = interpolate(frame, [LOCK_END, LOCK_END + 3, LOCK_END + 10], [0, 0.55, 0.28], clamp);
+  // 聚焦：目标之外轻压暗（锁定后 10f 内到 0.10）
+  const focus = interpolate(frame, [LOCK_END - 2, LOCK_END + 10], [0, 1], { easing: Easing.out(Easing.cubic), ...clamp });
+
+  // 标签：咬合后从左上角标上方弹出（scale back 过冲 + 淡入）
+  const labelT = interpolate(frame, [LABEL0, LABEL_END], [0, 1], { easing: Easing.out(Easing.back(1.8)), ...clamp });
+
+  // 相机：全程极缓推向目标（1 → 1.035），smooth in-out，无起止速度突变
+  const cam = mix(1, 1.035, ramp(frame, 0, RETICLE_LOCK_ON_DURATION - 1, EASE.smooth));
+
+  const showReticle = frame >= FLY_IN;
+  const locked = frame >= LOCK_END;
+  const reticleOp = interpolate(frame, [FLY_IN, FLY_IN + 3], [0, 1], clamp);
+
+  // 四个 L 角：位置 = 中心 ± (hw, hh)，各自镜像
+  const corners = [
+    { x: TCX - hw, y: TCY - hh, sx: 1, sy: 1 },
+    { x: TCX + hw, y: TCY - hh, sx: -1, sy: 1 },
+    { x: TCX - hw, y: TCY + hh, sx: 1, sy: -1 },
+    { x: TCX + hw, y: TCY + hh, sx: -1, sy: -1 },
+  ];
+  // L 笔画：白色衬底（外扩 2px）+ 强调色芯，圆头
+  const stroke = (w: number, h: number, under: boolean): React.CSSProperties => ({
+    position: 'absolute', left: under ? -2 : 0, top: under ? -2 : 0,
+    width: w + (under ? 4 : 0), height: h + (under ? 4 : 0), borderRadius: 4,
+    background: under ? 'rgba(255,255,255,0.92)' : INK,
+    boxShadow: under ? '0 2px 6px rgba(16,18,40,0.18)' : 'none',
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam})`, transformOrigin: `${TCX}px ${TCY}px` }}>
+        <FakeDashboard variant="A" />
+        {/* 聚焦压暗：目标卡外一圈巨型 box-shadow（目标处镂空、圆角一致） */}
+        {focus > 0 && (
+          <div style={{
+            position: 'absolute', left: CARD_X, top: CARD_Y, width: CARD_W, height: CARD_H, borderRadius: 14,
+            boxShadow: `0 0 0 3000px rgba(16,18,28,${(0.1 * focus).toFixed(3)})`, pointerEvents: 'none',
+          }} />
+        )}
+        {/* 咬合微亮层：条件渲染，锁定前不存在；顶亮底淡的渐变裁进圆角 + 强调色细描边 */}
+        {locked && (
+          <div style={{
+            position: 'absolute', left: CARD_X, top: CARD_Y, width: CARD_W, height: CARD_H, borderRadius: 14,
+            overflow: 'hidden', pointerEvents: 'none',
+            boxShadow: `0 0 0 1.5px rgba(91,99,211,${(0.55 * focus).toFixed(3)}), 0 18px 48px -16px rgba(91,99,211,${(0.35 * focus).toFixed(3)})`,
+          }}>
+            <div style={{
+              position: 'absolute', inset: 0, opacity: glow,
+              background: 'linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.35) 100%)',
+            }} />
+          </div>
+        )}
+        {showReticle && (
+          <SpeedBlur vx={fly1.x - fly0.x} vy={fly1.y - fly0.y} amount={0.3} max={22}>
+            <div style={{ position: 'absolute', left: 0, top: 0, transform: `translate(${fly.x}px, ${fly.y}px)`, opacity: reticleOp }}>
+              {corners.map((c, i) => (
+                <div key={i} style={{ position: 'absolute', left: c.x, top: c.y, transform: `scale(${c.sx}, ${c.sy})`, transformOrigin: '0 0' }}>
+                  {/* L 形角标：横臂 + 竖臂（先衬底后芯） */}
+                  <div style={stroke(ARM, THICK, true)} />
+                  <div style={stroke(THICK, ARM, true)} />
+                  <div style={stroke(ARM, THICK, false)} />
+                  <div style={stroke(THICK, ARM, false)} />
+                </div>
+              ))}
+              {/* 中心十字刻度：飞行中可见，锁定后淡出（准星→取景框的语义交接） */}
+              {[0, 1].map((k) => (
+                <div key={k} style={{
+                  position: 'absolute', left: TCX - (k ? 1.5 : 14), top: TCY - (k ? 14 : 1.5), width: k ? 3 : 28, height: k ? 28 : 3,
+                  borderRadius: 2, background: INK, opacity: 0.8 * (1 - focus), boxShadow: '0 0 0 2px rgba(255,255,255,0.85)',
+                }} />
+              ))}
+            </div>
+          </SpeedBlur>
+        )}
+        {/* 小标签：左上角标正上方弹出（落在顶栏空白区，不压邻卡标题） */}
+        {frame >= LABEL0 && (
+          <div style={{
+            position: 'absolute', left: TCX - hw + 2, top: TCY - hh - 70,
+            transform: `scale(${labelT})`, transformOrigin: '0 100%', opacity: Math.min(1, labelT * 1.5),
+            display: 'flex', alignItems: 'center', gap: 14, whiteSpace: 'nowrap',
+            background: 'linear-gradient(180deg, #23252c 0%, #17181d 100%)', color: '#fff', fontFamily: FONT.sans,
+            padding: '10px 16px 10px 14px', borderRadius: 12,
+            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(0,0,0,0.25), 0 2px 4px rgba(16,18,24,0.18), 0 16px 32px -10px rgba(16,18,24,0.45)',
+          }}>
+            <div style={{ width: 12, height: 12, borderRadius: 6, background: '#8a91ff', boxShadow: '0 0 0 4px rgba(138,145,255,0.22)' }} />
+            <span style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.015em' }}>Top pages</span>
+            <span style={{
+              fontFamily: FONT.mono, fontSize: 18, fontWeight: 500, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.55)',
+              padding: '4px 8px', borderRadius: 6, background: 'rgba(255,255,255,0.07)',
+            }}>LOCK 02</span>
+          </div>
+        )}
+      </div>
+      <Grain opacity={0.035} />
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/FlylineArc.tsx

@@ -0,0 +1,175 @@
+// flyline-arc —— 飞线连接
+// 暗场版 FakeDashboard A 压暗当底，左上卡→右下卡一条贝塞尔弧线"打"过去（22f, out-cubic 生长），
+// 亮点头部领跑、亮头暗尾拖尾；到达帧目标卡描边脉冲点亮。随后第二条线接力打到上中卡。
+// 收尾真静止：全部动画在 f86 前结束，之后所有元素冻结。
+//
+// 质感升级：本卡定位是暗场段落（md「库内第一张整卡住在暗场」），底图换 FakeDashboard 深色版并
+// 压暗 0.65 + 暗角，飞线成为前景层；线体从"白线 + 深灰衬底"改为暗场版"白芯 + 两层靛蓝辉光"，
+// butt 端分段消除珠串；光头加彗尾亮段与靛蓝光晕；起点亮起一个锚点、落点留下一个节点；
+// 卡脉冲在暗场里改为提亮（强调色描边 + 外辉光 + 极淡卡面提亮），落点同帧一圈冲击环；颗粒防色带。
+import React, { useId } from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../../_fixtures/Fixtures';
+import { Grain, Vignette } from '../../_fixtures/Polish';
+
+export const FLYLINE_ARC_DURATION = 140; // ~4.7s：动画 f86 前结束，末 54f 真静止
+
+type Pt = { x: number; y: number };
+
+// 手写 cubic bezier 采样
+const bez = (p0: Pt, p1: Pt, p2: Pt, p3: Pt, t: number): Pt => {
+  const u = 1 - t;
+  return {
+    x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
+    y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y,
+  };
+};
+
+const N = 100; // 采样段数
+const GLOW = '128,138,255'; // 飞线辉光色（与暗场 dashboard 的强调色同族）
+
+// 卡片几何（FakeDashboard variant A 实测网格）
+const CARD_LT = { x: 256, y: 108, w: 524, h: 454, cx: 518, cy: 335 }; // 左上
+const CARD_RB = { x: 1360, y: 590, w: 524, h: 454, cx: 1622, cy: 817 }; // 右下
+const CARD_TM = { x: 808, y: 108, w: 524, h: 454, cx: 1070, cy: 335 }; // 上中
+
+const clampX = { extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const };
+
+// 一条飞线：靛蓝辉光衬底 + 亮头暗尾白芯分段 + 光头领跑（条件挂载）
+const Flyline: React.FC<{
+  frame: number;
+  start: number; // 生长起始帧
+  haloId: string; // 光头径向渐变 ID（父组件按实例生成）
+  p0: Pt; p1: Pt; p2: Pt; p3: Pt;
+}> = ({ frame, start, haloId, p0, p1, p2, p3 }) => {
+  const DUR = 22;
+  if (frame < start) return null;
+  const e = interpolate(frame, [start, start + DUR], [0, 1], { easing: Easing.out(Easing.cubic), ...clampX });
+  const growing = frame < start + DUR;
+  // 到达后 10f 内尾部亮度抹匀（ease-out）→ 之后完全静止
+  const settle = interpolate(frame, [start + DUR, start + DUR + 10], [0, 1], { easing: Easing.out(Easing.quad), ...clampX });
+  // 起点锚：生长前 6f 亮起
+  const anchor = interpolate(frame, [start, start + 6], [0, 1], { easing: Easing.out(Easing.cubic), ...clampX });
+
+  const pts: Pt[] = [];
+  const nDrawn = Math.max(2, Math.ceil(e * N) + 1);
+  for (let i = 0; i < nDrawn; i++) {
+    const t = Math.min(i / N, e);
+    pts.push(bez(p0, p1, p2, p3, t));
+  }
+  const head = bez(p0, p1, p2, p3, e);
+  pts[pts.length - 1] = head;
+
+  const poly = pts.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+
+  // 亮头暗尾：每段按"离头距离"给 opacity；到达后 settle 抹匀到 1。butt 端，相邻段不叠加出珠串
+  const segs = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const tSeg = Math.min(i / N, e) / Math.max(e, 0.001); // 0 尾 → 1 头
+    const grad = 0.3 + 0.7 * tSeg * tSeg;
+    const op = grad + (1 - grad) * settle;
+    segs.push(
+      <line
+        key={i}
+        x1={pts[i].x} y1={pts[i].y} x2={pts[i + 1].x} y2={pts[i + 1].y}
+        stroke="#f6f6ff" strokeWidth={3.5} strokeLinecap="butt" strokeOpacity={op}
+      />
+    );
+  }
+  const comet = pts.slice(Math.max(0, pts.length - 9)).map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+
+  return (
+    <g>
+      {/* 起点锚 */}
+      <circle cx={p0.x} cy={p0.y} r={9 * anchor} fill={`rgba(${GLOW},0.25)`} />
+      <circle cx={p0.x} cy={p0.y} r={4.5 * anchor} fill="#ffffff" />
+      {/* 辉光衬底：宽幅低透明 + 次宽中透明两层 */}
+      <polyline points={poly} fill="none" stroke={`rgb(${GLOW})`} strokeWidth={18} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.1 + 0.04 * settle} />
+      <polyline points={poly} fill="none" stroke="rgb(150,160,255)" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.24} />
+      {segs}
+      {/* 光头 + 彗尾：仅生长期挂载，摘罩即真静止 */}
+      {growing && (
+        <g>
+          <polyline points={comet} fill="none" stroke="#ffffff" strokeWidth={6} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.55} />
+          <circle cx={head.x} cy={head.y} r={40} fill={`url(#${haloId})`} />
+          <circle cx={head.x} cy={head.y} r={7} fill="#ffffff" />
+        </g>
+      )}
+      {/* 落点节点：到达后常驻 */}
+      {!growing && (
+        <g>
+          <circle cx={p3.x} cy={p3.y} r={11} fill={`rgba(${GLOW},0.22)`} />
+          <circle cx={p3.x} cy={p3.y} r={5} fill="#ffffff" />
+        </g>
+      )}
+    </g>
+  );
+};
+
+// 目标卡脉冲：暗场里提亮——强调色描边 + 外辉光 + 极淡卡面提亮；落点同帧一圈冲击环 —— 条件挂载
+const CardPulse: React.FC<{
+  frame: number;
+  at: number; // 触发帧
+  rect: { x: number; y: number; w: number; h: number; cx: number; cy: number };
+}> = ({ frame, at, rect }) => {
+  if (frame < at) return null;
+  // 扩散(起升)用 out-cubic 6f，消散 12f 到残余 0.25（被点亮的卡保持轻微描边，交代"已连接"）
+  const amp =
+    frame <= at + 6
+      ? interpolate(frame, [at, at + 6], [0, 1], { easing: Easing.out(Easing.cubic), ...clampX })
+      : interpolate(frame, [at + 6, at + 18], [1, 0.25], { easing: Easing.out(Easing.quad), ...clampX });
+  const ring = interpolate(frame, [at, at + 14], [0, 1], { easing: Easing.out(Easing.cubic), ...clampX });
+  return (
+    <g>
+      <defs>
+        <filter id={`pulse-glow-${at}`} x="-20%" y="-20%" width="140%" height="140%">
+          <feGaussianBlur stdDeviation={10} />
+        </filter>
+      </defs>
+      <rect x={rect.x} y={rect.y} width={rect.w} height={rect.h} rx={14} fill="none" stroke={`rgb(${GLOW})`} strokeWidth={8}
+        strokeOpacity={0.5 * amp} filter={`url(#pulse-glow-${at})`} />
+      <rect x={rect.x} y={rect.y} width={rect.w} height={rect.h} rx={14} fill={`rgba(200,206,255,${(0.05 * amp).toFixed(3)})`} />
+      <rect x={rect.x + 0.75} y={rect.y + 0.75} width={rect.w - 1.5} height={rect.h - 1.5} rx={13.5} fill="none"
+        stroke="#c9ceff" strokeWidth={1.5} strokeOpacity={0.9 * amp} />
+      {ring < 1 && (
+        <circle cx={rect.cx} cy={rect.cy} r={12 + 80 * ring} fill="none" stroke="#c9ceff"
+          strokeWidth={2.5 * (1 - ring) + 0.5} strokeOpacity={0.75 * (1 - ring)} />
+      )}
+    </g>
+  );
+};
+
+export const FlylineArc: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 渐变 ID 按实例生成，多实例同场不串引（useId 的 «:» 在 url() 里非法，需清洗）
+  const haloId = `headHalo-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  // 时间轴：线1 生长 10–32f → 卡RB脉冲 32–50f；线2 生长 46–68f → 卡TM脉冲 68–86f
+  // f86 后全静止（140f 总长 → 静止 54f ≥ 35f）
+  const L1 = { p0: { x: CARD_LT.cx, y: CARD_LT.cy }, p1: { x: 818, y: 60 }, p2: { x: 1322, y: 380 }, p3: { x: CARD_RB.cx, y: CARD_RB.cy } };
+  const L2 = { p0: { x: CARD_RB.cx, y: CARD_RB.cy }, p1: { x: 1760, y: 560 }, p2: { x: 1360, y: 150 }, p3: { x: CARD_TM.cx, y: CARD_TM.cy } };
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', background: '#0b0c10', overflow: 'hidden' }}>
+      {/* 背景：深色 dashboard 压暗 0.65，常量、不动画——让飞线成为前景层 */}
+      <div style={{ filter: 'brightness(0.65) saturate(0.9)' }}>
+        <FakeDashboard variant="A" tone="dark" />
+      </div>
+      <Vignette strength={0.5} inner={0.45} color="#030408" />
+      <svg width={1920} height={1080} viewBox="0 0 1920 1080" style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}>
+        <defs>
+          <radialGradient id={haloId}>
+            <stop offset="0%" stopColor="rgba(255,255,255,0.6)" />
+            <stop offset="30%" stopColor="rgba(170,178,255,0.3)" />
+            <stop offset="100%" stopColor="rgba(128,138,255,0)" />
+          </radialGradient>
+        </defs>
+        <CardPulse frame={frame} at={32} rect={CARD_RB} />
+        <CardPulse frame={frame} at={68} rect={CARD_TM} />
+        <Flyline frame={frame} start={10} haloId={haloId} {...L1} />
+        <Flyline frame={frame} start={46} haloId={haloId} {...L2} />
+      </svg>
+      <Grain opacity={0.07} blend="soft-light" />
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx

@@ -0,0 +1,197 @@
+// glow-orb-ambient｜暗场光斑呼吸——三团大光斑有机漂移，中央卡的边缘随最近的光斑靠近而泛光。
+//
+// 第二轮重设计（深海潮汐 · 磨砂玻璃卡）：
+// - look = custom「abyss」：带青色相的深海黑底，三团光斑 = 潮青（主光）/ 深海蓝 / 一小团珊瑚（唯一暖色点缀）。
+//   光斑不再是 blur(100px) 的灰团，而是 1200 / 1000 / 760px 的多段径向渐变（screen 叠加，不用实时模糊）。
+// - 主角是一张 1100×600 的磨砂玻璃卡（backdrop 模糊 + 提饱和）：光斑从卡后游过时，颜色真的透过玻璃
+//   染进卡面——卡和光斑"认识"彼此不再只靠外发光。外缘辉光取最近光斑的颜色与距离，另有一道发丝线宽的
+//   定向轮廓光，角度跟着主导光斑转、只在受光一侧亮。
+// - 内容是 video-shotcraft 的成片预览卡（品牌轮由助眠 app「Nocta」换来）：镜刻标志 + 字标、160px 标题
+//   「Launch film」、36px 卖点说明、64 根随潮汐缓慢起伏的音轨波形条 + 64px 等宽剩余时间（每秒跳一次）——
+//   画面在呼吸，但都是慢动作。
+// - 节奏：快入场、长呼吸、缓收敛。卡片 8–34f 由虚到实升起（snappy），字逐行跟进；光斑与声波共享一条
+//   "潮汐时间"，115–145f 按 out-sine 减速收敛（起始斜率 = 1，速度连续），之后真静止 25f。
+//
+// 时间表（30fps，共 170f）：
+//   0–24     光斑从暗处亮起（第 1 帧就有微光）
+//   8–34     卡片升起：translateY 48→0、scale 0.96→1、淡入
+//   18–56    卡内文字：标题逐字 blur 揭示（18f 起）→ 说明（32f）→ 声波条从左到右长出（36–60f）
+//   0–115    正常速度漂移（周期 96–150f 交叉不等，振幅合计 ≥ 260px）
+//   115–145  潮汐时间 out-sine 收敛冻结；镜头 1→1.03 极缓推进同步落定
+//   145–170  真静止 hold
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, Vignette, ramp } from '../../_fixtures/Polish';
+import { TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const GLOW_ORB_AMBIENT_DURATION = 170; // ~5.7s：亮起 → 漂移 → 115–145f 收敛 → 末 25f 真静止
+
+// 自定义 look「abyss」：深海青黑 + 潮青 / 深海蓝 / 珊瑚
+const C = {
+  bg: ['#071a1e', '#041114', '#02090b'],
+  ink: '#eefaf7', ink2: '#a3c2bd', ink3: '#5f807b',
+  teal: '#1fd1b2', blue: '#2f6bff', coral: '#ff7059',
+};
+
+const W = 1920;
+const H = 1080;
+const CX = W / 2;
+const CY = H / 2 + 10;
+const CARD_W = 1100;
+const CARD_H = 600;
+
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+const TAU = Math.PI * 2;
+
+type Orb = { size: number; peak: number; c: string; bx: number; by: number; p1: number; p2: number; ax: number; ay: number; seed: number };
+const ORBS: Orb[] = [
+  { size: 1200, peak: 0.55, c: C.teal, bx: 560, by: 360, p1: 118, p2: 150, ax: 300, ay: 200, seed: 1 },
+  { size: 1000, peak: 0.5, c: C.blue, bx: 1420, by: 660, p1: 132, p2: 96, ax: 280, ay: 190, seed: 2 },
+  { size: 760, peak: 0.42, c: C.coral, bx: 1240, by: 220, p1: 104, p2: 142, ax: 300, ay: 160, seed: 3 },
+];
+
+const orbPos = (o: Orb, t: number) => {
+  const f1 = h(o.seed * 7 + 1) * TAU, f2 = h(o.seed * 7 + 2) * TAU, f3 = h(o.seed * 7 + 3) * TAU, f4 = h(o.seed * 7 + 4) * TAU;
+  return {
+    x: o.bx + o.ax * (0.62 * Math.sin((TAU * t) / o.p1 + f1) + 0.38 * Math.sin((TAU * t) / o.p2 + f2)),
+    y: o.by + o.ay * (0.6 * Math.sin((TAU * t) / o.p2 + f3) + 0.4 * Math.sin((TAU * t) / o.p1 + f4)),
+  };
+};
+
+// 潮汐时间：0–115 与帧同速；115–145 out-sine 减速（A = 60/π 使起始斜率 = 1，速度连续）；之后冻结
+const T0 = 115, TS = 30;
+const tide = (f: number) => (f <= T0 ? f : T0 + (2 * TS / Math.PI) * Math.sin((Math.PI / 2) * Math.min(1, (f - T0) / TS)));
+
+// 声波条高度（潮汐时间的纯函数 → 收敛时一起停）
+const BARS = 64;
+const barH = (i: number, t: number) => {
+  const x = i / (BARS - 1);
+  const env = 0.35 + 0.65 * Math.sin(Math.PI * Math.min(1, x * 1.05)) ** 0.8;
+  const w = 0.5 + 0.28 * Math.sin(i * 0.42 + t / 9) + 0.16 * Math.sin(i * 1.13 - t / 14) + 0.06 * Math.sin(i * 2.7 + t / 5);
+  return Math.max(0.08, env * w);
+};
+
+
+export const GlowOrbAmbient: React.FC = () => {
+  const f = useCurrentFrame();
+  const t = tide(f);
+
+  const orbIn = 0.35 + 0.65 * ramp(f, 0, 24, EASE.out);
+  const cardIn = ramp(f, 8, 26, EASE.snappy);
+  const cam = 1 + 0.03 * ramp(f, 0, 145, EASE.smooth);
+
+  const pos = ORBS.map((o) => orbPos(o, t));
+
+  // 卡缘：最近光斑距离 → 辉光强度（按峰值加权取 max）；主导光斑决定轮廓光方向与颜色
+  let glowK = 0, lead = 0;
+  ORBS.forEach((o, i) => {
+    const d = Math.hypot(pos[i].x - CX, pos[i].y - CY);
+    const p = Math.min(1, Math.max(0, (760 - d) / 520));
+    const g = p * (o.peak / 0.55);
+    if (g > glowK) { glowK = g; lead = i; }
+  });
+  const leadC = ORBS[lead].c;
+  const lp = pos[lead];
+  const ang = (Math.atan2(lp.x - CX, -(lp.y - CY)) * 180) / Math.PI;
+  const gAng = (ang + 180).toFixed(1); // 渐变 0% 落在朝光一侧
+
+  // 剩余时间：每秒跳一次（一支 ~45s 的发布片，收敛后停在 00:38）
+  const secs = 42 - Math.floor(Math.min(f, 145) / 30);
+  const mm = String(Math.floor(secs / 60)).padStart(2, '0');
+  const ss = String(secs % 60).padStart(2, '0');
+
+  const barsIn = (i: number) => ramp(f, 36 + i * 0.36, 14, EASE.snappy);
+
+  return (
+    <AbsoluteFill style={{ background: `linear-gradient(180deg, ${C.bg[0]} 0%, ${C.bg[1]} 55%, ${C.bg[2]} 100%)`, overflow: 'hidden' }}>
+      <AbsoluteFill style={{ transform: `scale(${cam})`, transformOrigin: `${CX}px ${CY}px` }}>
+        {/* 光斑：多段径向渐变（不做实时 blur），screen 叠加 */}
+        {ORBS.map((o, i) => (
+          <div key={i} style={{
+            position: 'absolute', left: pos[i].x - o.size / 2, top: pos[i].y - o.size / 2, width: o.size, height: o.size, borderRadius: '50%',
+            background: `radial-gradient(circle closest-side, ${alpha(o.c, o.peak)} 0%, ${alpha(o.c, o.peak * 0.62)} 22%, ${alpha(o.c, o.peak * 0.3)} 48%, ${alpha(o.c, o.peak * 0.1)} 72%, ${alpha(o.c, 0)} 100%)`,
+            opacity: orbIn, mixBlendMode: 'screen',
+          }} />
+        ))}
+        {/* 远景细点阵（随镜头一起推，给深度一个参照） */}
+        <div style={{
+          position: 'absolute', inset: -40, opacity: 0.5,
+          backgroundImage: `radial-gradient(circle, ${alpha('#cffff4', 0.12)} 1.2px, transparent 1.6px)`, backgroundSize: '40px 40px',
+          WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 85%)', maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 85%)',
+        }} />
+
+        {/* 主角：磨砂玻璃卡 */}
+        <div style={{
+          position: 'absolute', left: CX - CARD_W / 2, top: CY - CARD_H / 2, width: CARD_W, height: CARD_H, borderRadius: 44,
+          // 注意：玻璃卡的祖先不能带 filter / opacity<1（会成为 backdrop root，玻璃里看不到光斑）——
+          // 入场的透明度放在玻璃层自身，外层只做 transform
+          transform: `translateY(${(1 - cardIn) * 48}px) scale(${0.96 + 0.04 * cardIn})`,
+          boxShadow: `0 0 ${(90 * glowK).toFixed(1)}px ${(8 * glowK).toFixed(1)}px ${alpha(leadC, 0.32 * glowK)}, 0 50px 120px -30px rgba(0,0,0,0.85)`,
+        }}>
+          <div style={{
+            position: 'absolute', inset: 0, borderRadius: 44, overflow: 'hidden', opacity: Math.min(1, cardIn * 1.3),
+            background: 'linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 45%, rgba(255,255,255,0.05) 100%)',
+            backdropFilter: 'blur(44px) saturate(1.5)', WebkitBackdropFilter: 'blur(44px) saturate(1.5)',
+            boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1.5px 0 rgba(255,255,255,0.18)',
+          }}>
+            {/* 卡面受光余晖：主导光斑方向一侧 */}
+            <div style={{ position: 'absolute', inset: 0, opacity: 0.7 * glowK, background: `linear-gradient(${gAng}deg, ${alpha(leadC, 0.16)} 0%, ${alpha(leadC, 0)} 55%)` }} />
+
+            {/* 顶栏 */}
+            <div style={{ position: 'absolute', left: 64, right: 64, top: 56, display: 'flex', alignItems: 'center', gap: 18, opacity: ramp(f, 14, 14, EASE.out) }}>
+              <ShotcraftMark size={56} tone="dark" />
+              <div style={{ ...type(36, 650), fontFamily: BRAND.font, letterSpacing: '0.03em', color: C.ink }}>{BRAND.name}</div>
+              <div style={{
+                marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12, padding: '10px 22px', borderRadius: 40,
+                background: 'rgba(255,255,255,0.07)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.1)', ...type(32, 550), color: C.ink2,
+              }}>
+                <div style={{ width: 12, height: 12, borderRadius: 6, background: C.teal, boxShadow: `0 0 12px ${C.teal}` }} />
+                Now playing
+              </div>
+            </div>
+
+            {/* 标题 + 说明 */}
+            <div style={{ position: 'absolute', left: 60, top: 150 }}>
+              <TextReveal text="Launch film" by="char" variant="blur" start={18} each={20} gap={2.2} style={{ ...type(160, 650), letterSpacing: '-0.045em', color: C.ink }} />
+            </div>
+            <div style={{ position: 'absolute', left: 66, top: 334 }}>
+              <TextReveal text="Beat-synced cuts · film-grade SFX" by="word" variant="blur" start={32} each={16} gap={2.5} style={{ ...type(36, 450), color: C.ink2 }} />
+            </div>
+
+            {/* 声波条 + 剩余时间 */}
+            <div style={{ position: 'absolute', left: 66, bottom: 64, width: 700, height: 96, display: 'flex', alignItems: 'center', gap: 5 }}>
+              {Array.from({ length: BARS }, (_, i) => {
+                const k = barsIn(i);
+                const played = i < 22;
+                return (
+                  <div key={i} style={{
+                    width: 6, height: Math.max(6, 96 * barH(i, t) * k), borderRadius: 3,
+                    background: played ? C.ink : alpha(C.ink, 0.28), opacity: k,
+                  }} />
+                );
+              })}
+            </div>
+            <div style={{ position: 'absolute', right: 64, bottom: 58, textAlign: 'right', opacity: ramp(f, 40, 16, EASE.out) }}>
+              <div style={{ fontFamily: FONT.mono, fontSize: 64, fontWeight: 500, color: C.ink, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
+                {mm}:{ss}
+              </div>
+              <div style={{ ...type(28, 500, { caps: true }), letterSpacing: '0.14em', color: C.ink3, marginTop: 12 }}>Remaining</div>
+            </div>
+          </div>
+          {/* 定向轮廓光：发丝线宽渐变边，只在朝向主导光斑的一侧亮 */}
+          <div style={{
+            position: 'absolute', inset: 0, borderRadius: 44, padding: 1.5, boxSizing: 'border-box', pointerEvents: 'none', opacity: cardIn,
+            background: `linear-gradient(${gAng}deg, ${alpha(leadC, 0.2 + 0.75 * glowK)} 0%, rgba(255,255,255,${(0.14 * glowK).toFixed(3)}) 35%, rgba(255,255,255,0) 62%)`,
+            WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude',
+          }} />
+        </div>
+      </AbsoluteFill>
+      <Vignette strength={0.5} inner={0.4} color="#010506" />
+      <Grain opacity={0.1} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};