dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx

@@ -0,0 +1,315 @@
+// scanline-assemble-flyin — 扫描装配组件飞入：开场只有一张蓝图画板（网格 + 虚线槽位），一条扫描线自上而下
+// 匀速掠过；扫描线走到哪个槽位，该处组件就从画外飞入、过冲贴合进槽，落位瞬间四角闪出咬合角标——扫完整页恰好装完。
+//
+// 第二轮重设计（午夜蓝图 · AI 生成落地页）：
+// - look = midnight（深蓝 · 电光蓝 · 青）。画面是一张 1640×860 的蓝图画板：120px 主网格 + 24px 细网格、
+//   画板尺寸标注、每个组件的虚线槽位（带「NAV 1640×96」类小标）——第 1 帧就有完整的"施工图"，不是空黑屏。
+// - 扫描线是施工进度条：电光蓝光芯 + 身后被"刷出来"的页面底色（扫过之处蓝图变成真实页面表面）+ 网格余晖。
+// - 七个组件为镜头设计：video-shotcraft 的落地页——导航（镜刻标志 + 字标）、徽章、120px 两行 H1「Shoot the / launch film.」
+//  （渐变强调词）、正文、CTA、样片镜头卡（程序化银河：确定性星点 + 银河带 + 山脊剪影）、三项数据。各自从所在方位的画外飞入：
+//   位移 380–900px、±2–7° 起始旋转，EASE.overshoot 过冲贴合；飞行中按速度沿方向 SpeedBlur，落定清零。
+// - 落定后：槽位虚线消失、四角咬合角标 2→12f 闪现收掉；全部装完后蓝图网格退到 30%、银河卡亮起，
+//   状态行停表「BUILT IN 2.9 s」。全程 1.000→1.03 极缓推镜。
+//
+// 时间表（30fps，共 156f）：
+//   0–8     蓝图画板 + 槽位在场，状态行亮起
+//   8–92    扫描线匀速 −20→880（84f）；组件在扫描线越过槽位下缘时落位（飞行 14f 提前起飞，≥4f 间隔）：
+//           NAV ~19f · BADGE ~29f · H1 ~54f · BODY ~66f · MEDIA ~75f · CTA ~79f · STATS ~87f
+//   92–104  扫描线淡出；蓝图退场；银河卡亮起；状态行停表
+//   104–156 hold：完整落地页海报，极缓推镜
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, glow } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const SCANLINE_ASSEMBLE_FLYIN_DURATION = 156;
+
+const L = LOOKS.midnight;
+const MONO = FONT.mono;
+const AX = 140; // 画板（帧坐标）
+const AY = 150;
+const AW = 1640;
+const AH = 860;
+
+// 扫描线（画板坐标）：严格匀速
+const SCAN0 = 8;
+const SCAN1 = 92;
+const Y0 = -20;
+const Y1 = 880;
+const scanY = (f: number) => Y0 + (Y1 - Y0) * Math.min(1, Math.max(0, (f - SCAN0) / (SCAN1 - SCAN0)));
+const frameAtY = (y: number) => SCAN0 + ((y - Y0) / (Y1 - Y0)) * (SCAN1 - SCAN0);
+const FLIGHT = 14; // 飞行帧数（提前起飞，落位 = 扫描线越过槽位下缘）
+
+// ───────────── 组件飞入方案：box = 槽位（画板坐标），from = 画外起点位移，rot = 起始旋转 ─────────────
+type Plan = { key: string; name: string; box: [number, number, number, number]; from: [number, number]; rot: number; land: number };
+const PLAN: Plan[] = (() => {
+  const ps: Plan[] = [
+    { key: 'nav', name: 'NAV', box: [0, 0, AW, 96], from: [0, -260], rot: 0, land: 0 },
+    { key: 'badge', name: 'BADGE', box: [72, 150, 372, 56], from: [-620, -60], rot: -7, land: 0 },
+    { key: 'h1', name: 'H1', box: [72, 228, 820, 250], from: [-980, 90], rot: -4, land: 0 },
+    { key: 'body', name: 'BODY', box: [72, 508, 760, 96], from: [-860, 220], rot: -2, land: 0 },
+    { key: 'media', name: 'MEDIA', box: [940, 140, 628, 560], from: [900, 80], rot: 6, land: 0 },
+    { key: 'cta', name: 'CTA', box: [72, 640, 560, 76], from: [-120, 460], rot: 3, land: 0 },
+    { key: 'stats', name: 'STATS', box: [72, 752, 1496, 80], from: [140, 420], rot: -2, land: 0 },
+  ];
+  let prev = -99;
+  for (const p of [...ps].sort((a, b) => a.box[1] + a.box[3] - (b.box[1] + b.box[3]))) {
+    p.land = Math.max(frameAtY(p.box[1] + p.box[3]), prev + 4);
+    prev = p.land;
+  }
+  return ps;
+})();
+const P = Object.fromEntries(PLAN.map((p) => [p.key, p])) as Record<string, Plan>;
+const LAST_LAND = Math.max(...PLAN.map((p) => p.land));
+
+// 位姿（帧的纯函数，便于中心差分求速度）
+const poseAt = (p: Plan, f: number) => {
+  const a = ramp(f, p.land - FLIGHT, FLIGHT, EASE.overshoot); // 0→1，过冲 ~8% 再回落
+  return { a, x: mix(p.from[0], 0, a), y: mix(p.from[1], 0, a), r: mix(p.rot, 0, a) };
+};
+
+// ───────────── 确定性伪随机 ─────────────
+const rnd = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+const STARS = Array.from({ length: 150 }, (_, i) => ({
+  x: rnd(i * 3.1) * 628, y: rnd(i * 7.7 + 2) * 430, s: 0.8 + rnd(i * 5.3 + 9) ** 3 * 3.2, a: 0.35 + rnd(i * 2.9 + 4) * 0.65,
+}));
+// 银河带里的密集微星：沿 −32° 带轴分布，离轴距离取近似高斯（三个均匀数求和）
+const BAND = Array.from({ length: 320 }, (_, i) => {
+  const u = rnd(i * 4.3 + 17) * 900 - 140;
+  const off = (rnd(i * 1.7 + 3) + rnd(i * 2.3 + 5) + rnd(i * 3.7 + 7) - 1.5) * 70;
+  const ang = (-32 * Math.PI) / 180;
+  return { x: 336 + (u - 380) * Math.cos(ang) - off * Math.sin(ang), y: 222 + (u - 380) * Math.sin(ang) + off * Math.cos(ang), s: 0.5 + rnd(i * 6.1) * 1.1, a: 0.25 + rnd(i * 8.3) * 0.55 };
+});
+
+// ───────────── 组件内容 ─────────────
+const Nav: React.FC = () => (
+  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', padding: '0 72px', borderBottom: `1px solid ${L.line}`, fontFamily: FONT.sans }}>
+    {/* 镜刻标志（暗底反白版；svg 四周 16/128 留白，左移 7px 让可见框对齐 72）+ 字标 */}
+    <ShotcraftMark size={56} tone="dark" style={{ marginLeft: -7 }} />
+    <div style={{ marginLeft: 10, font: `700 32px ${BRAND.font}`, letterSpacing: '0.01em', color: L.ink, whiteSpace: 'nowrap' }}>{BRAND.name}</div>
+    <div style={{ marginLeft: 'auto', display: 'flex', gap: 44, font: `550 26px ${FONT.sans}`, color: L.ink2 }}>
+      <span>Recipes</span>
+      <span>Gallery</span>
+      <span>Docs</span>
+    </div>
+    <div style={{ marginLeft: 48, height: 52, padding: '0 26px', borderRadius: 26, background: alpha(L.ink, 0.08), border: `1px solid ${alpha(L.ink, 0.16)}`, display: 'flex', alignItems: 'center', font: `650 24px ${FONT.sans}`, color: L.ink }}>
+      Get the skill
+    </div>
+  </div>
+);
+
+const Badge: React.FC = () => (
+  <div style={{ position: 'absolute', left: 0, top: 0, height: 56, padding: '0 24px 0 18px', borderRadius: 28, display: 'flex', alignItems: 'center', gap: 14, background: alpha(L.accent2, 0.1), border: `1px solid ${alpha(L.accent2, 0.35)}`, font: `600 26px ${FONT.sans}`, color: L.ink, whiteSpace: 'nowrap' }}>
+    <span style={{ padding: '4px 10px', borderRadius: 8, background: L.accent2, color: L.onAccent, font: `750 20px ${MONO}`, letterSpacing: '0.06em' }}>NEW</span>
+    Motion workbench
+  </div>
+);
+
+const H1: React.FC = () => (
+  <div style={{ position: 'absolute', left: -4, top: 0, font: `820 120px ${FONT.sans}`, letterSpacing: '-0.048em', lineHeight: 1.02, color: L.ink, whiteSpace: 'nowrap' }}>
+    Shoot the
+    <br />
+    <span style={{ backgroundImage: `linear-gradient(90deg, ${L.accent} 0%, #9db8ff 55%, ${L.accent2} 100%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>launch film.</span>
+  </div>
+);
+
+const Body: React.FC = () => (
+  <div style={{ position: 'absolute', left: 0, top: 0, width: 760, font: `450 34px ${FONT.sans}`, lineHeight: 1.36, color: L.ink2, letterSpacing: '-0.012em' }}>
+    One prompt to a finished promo. Your agent lines up every cut for you.
+  </div>
+);
+
+const Cta: React.FC = () => (
+  <div style={{ position: 'absolute', left: 0, top: 0, display: 'flex', alignItems: 'center', gap: 34, fontFamily: FONT.sans }}>
+    <div style={{ height: 76, padding: '0 38px', borderRadius: 38, background: `linear-gradient(180deg, #7aa2ff 0%, ${L.accent} 100%)`, color: L.onAccent, display: 'flex', alignItems: 'center', font: `700 30px ${FONT.sans}`, letterSpacing: '-0.01em', boxShadow: `0 14px 34px -12px ${alpha(L.accent, 0.8)}, inset 0 1px 0 rgba(255,255,255,0.45)` }}>
+      Start shooting
+    </div>
+    <div style={{ font: `600 30px ${FONT.sans}`, color: L.ink, display: 'flex', alignItems: 'center', gap: 12 }}>
+      <svg width={30} height={30} viewBox="0 0 30 30"><circle cx={15} cy={15} r={13.5} fill="none" stroke={L.ink2} strokeWidth={2} /><path d="M12 9.5 L20.5 15 L12 20.5 Z" fill={L.ink} /></svg>
+      Watch the film
+    </div>
+  </div>
+);
+
+const Media: React.FC<{ lit: number }> = ({ lit }) => (
+  <div style={{ position: 'absolute', inset: 0, borderRadius: 26, overflow: 'hidden', background: 'linear-gradient(180deg, #070b1d 0%, #111a44 48%, #2a1d4a 74%, #0b0a18 100%)', boxShadow: `inset 0 0 0 1px ${alpha('#b4c6ff', 0.14)}, inset 0 1px 0 ${alpha('#ffffff', 0.12)}` }}>
+    {/* 银河带：斜向椭圆光 + 暖色核心 + 暗尘带 */}
+    <div style={{ position: 'absolute', left: -120, top: 30, width: 880, height: 300, transform: 'rotate(-32deg)', borderRadius: '50%', background: `radial-gradient(ellipse 50% 50% at 50% 50%, rgba(196,210,255,${(0.32 + 0.22 * lit).toFixed(3)}) 0%, rgba(150,170,255,0.12) 45%, rgba(150,170,255,0) 72%)` }} />
+    <div style={{ position: 'absolute', left: 140, top: 150, width: 380, height: 150, transform: 'rotate(-32deg)', borderRadius: '50%', background: `radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,206,170,${(0.28 + 0.25 * lit).toFixed(3)}) 0%, rgba(255,170,140,0) 70%)` }} />
+    <div style={{ position: 'absolute', left: 40, top: 150, width: 640, height: 46, transform: 'rotate(-32deg)', borderRadius: '50%', background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(8,8,24,0.5) 0%, rgba(8,8,24,0) 70%)' }} />
+    <svg width={628} height={560} style={{ position: 'absolute', left: 0, top: 0 }}>
+      {BAND.map((s, i) => (
+        <circle key={`b${i}`} cx={s.x} cy={s.y} r={s.s} fill={i % 5 ? '#e6ecff' : '#ffd9c2'} opacity={s.a * (0.7 + 0.3 * lit)} />
+      ))}
+      {STARS.map((s, i) => (
+        <circle key={i} cx={s.x} cy={s.y} r={s.s} fill="#ffffff" opacity={s.a * (0.75 + 0.25 * lit)} />
+      ))}
+      {/* 山脊剪影 + 轮廓光 */}
+      <path d="M0 470 L70 430 L120 446 L190 392 L250 428 L320 380 L380 420 L440 398 L520 440 L580 418 L628 436 L628 560 L0 560 Z" fill="#05060f" />
+      <path d="M0 470 L70 430 L120 446 L190 392 L250 428 L320 380 L380 420 L440 398 L520 440 L580 418 L628 436" fill="none" stroke={alpha('#9db8ff', 0.35)} strokeWidth={1.5} />
+    </svg>
+    <div style={{ position: 'absolute', left: 26, bottom: 24, padding: '8px 14px', borderRadius: 10, background: alpha('#0b1226', 0.7), border: `1px solid ${L.line}`, font: `600 22px ${MONO}`, color: L.ink2 }}>
+      SHOT 04 · 2.5D push-in · 120f
+    </div>
+  </div>
+);
+
+const Stats: React.FC = () => (
+  <div style={{ position: 'absolute', inset: 0, borderTop: `1px solid ${L.line}`, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', paddingTop: 18, paddingRight: 24 }}>
+    {[
+      ['1', 'prompt to a promo'],
+      ['30 fps', 'Remotion render'],
+      ['0', 'keyframes by hand'],
+    ].map(([n, l], i) => (
+      <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
+        <span style={{ font: `780 52px ${FONT.sans}`, letterSpacing: '-0.04em', color: i === 0 ? L.accent : L.ink, fontVariantNumeric: 'tabular-nums' }}>{n}</span>
+        <span style={{ font: `500 26px ${FONT.sans}`, color: L.ink2 }}>{l}</span>
+      </div>
+    ))}
+  </div>
+);
+
+// 落位咬合角标：槽位外扩 10px、臂长 22px 的电光蓝 L 角
+const SnapTicks: React.FC<{ w: number; h: number; o: number; g: number }> = ({ w, h, o, g }) => {
+  if (o <= 0.01) return null;
+  const a = 22;
+  const d = [
+    `M${-g} ${-g + a}V${-g}H${-g + a}`,
+    `M${w + g - a} ${-g}H${w + g}V${-g + a}`,
+    `M${w + g} ${h + g - a}V${h + g}H${w + g - a}`,
+    `M${-g + a} ${h + g}H${-g}V${h + g - a}`,
+  ].join('');
+  return (
+    <svg width={w} height={h} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', opacity: o, filter: `drop-shadow(0 0 6px ${alpha(L.accent, 0.9)})` }}>
+      <path d={d} fill="none" stroke="#a9c1ff" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+export const ScanlineAssembleFlyin: React.FC = () => {
+  const frame = useCurrentFrame();
+  const ly = scanY(frame);
+  const lineOn = ramp(frame, SCAN0 - 5, 6, EASE.out) * (1 - ramp(frame, SCAN1, 10, EASE.exit));
+  const done = ramp(frame, LAST_LAND + 4, 12, EASE.out);
+  const placed = PLAN.filter((p) => frame >= p.land).length;
+  const push = 1 + 0.03 * ramp(frame, 0, SCANLINE_ASSEMBLE_FLYIN_DURATION, EASE.swift);
+  const clock = Math.min(frame, LAST_LAND + 4) / 30; // 停表：装完那一刻定格
+  const lit = ramp(frame, LAST_LAND + 2, 20, EASE.out);
+  const blueprint = mix(1, 0.3, done);
+
+  const Fly: React.FC<{ p: Plan; children: React.ReactNode }> = ({ p, children }) => {
+    const pose = poseAt(p, frame);
+    const start = p.land - FLIGHT;
+    if (frame < start) return null;
+    const v0 = poseAt(p, frame - 0.5);
+    const v1 = poseAt(p, frame + 0.5);
+    const moving = frame < p.land + 4;
+    const [bx, by, bw, bh] = p.box;
+    const tick = ramp(frame, p.land + 1, 3, EASE.out) * (1 - ramp(frame, p.land + 5, 9, EASE.out));
+    const tickGap = 10 + 10 * (1 - ramp(frame, p.land + 1, 6, EASE.snappy)); // 角标从外 20px 咬进 10px
+    return (
+      <SpeedBlur vx={moving ? v1.x - v0.x : 0} vy={moving ? v1.y - v0.y : 0} amount={0.32} max={18}>
+        <div style={{
+          position: 'absolute', left: bx, top: by, width: bw, height: bh,
+          opacity: ramp(frame, start, 4, EASE.out),
+          transform: `translate(${pose.x.toFixed(2)}px, ${pose.y.toFixed(2)}px) rotate(${pose.r.toFixed(3)}deg)`,
+        }}>
+          {children}
+          {p.key !== 'nav' && <SnapTicks w={bw} h={bh} o={tick} g={tickGap} />}
+        </div>
+      </SpeedBlur>
+    );
+  };
+
+  // 网格（帧坐标全屏）：24px 细网格 + 120px 主网格，蓝图色
+  const grid = (c: string, cm: string) =>
+    `repeating-linear-gradient(0deg, ${cm} 0 1.5px, transparent 1.5px 120px), repeating-linear-gradient(90deg, ${cm} 0 1.5px, transparent 1.5px 120px), ` +
+    `repeating-linear-gradient(0deg, ${c} 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, ${c} 0 1px, transparent 1px 24px)`;
+  const lyF = AY + ly; // 扫描线帧坐标
+
+  return (
+    <AbsoluteFill>
+      <Stage look={L} keyLight={{ x: 0.62, y: 0.0 }} fill={{ x: 0.1, y: 0.95 }} intensity={0.85} />
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: '50% 52%' }}>
+        {/* ── 蓝图网格（装完后退到 30%）+ 扫描线身后被照亮的一段 ── */}
+        <div style={{ position: 'absolute', inset: -40, opacity: blueprint, background: grid(alpha('#8fb0ff', 0.045), alpha('#8fb0ff', 0.085)), backgroundPosition: '20px 30px' }} />
+        {lineOn > 0.01 && (
+          <div style={{
+            position: 'absolute', inset: -40, opacity: lineOn, background: grid(alpha(L.accent, 0.22), alpha('#a9c1ff', 0.4)), backgroundPosition: '20px 30px',
+            WebkitMaskImage: `linear-gradient(180deg, transparent ${lyF - 180 + 40}px, #000 ${lyF + 40}px, transparent ${lyF + 42}px)`,
+            maskImage: `linear-gradient(180deg, transparent ${lyF - 180 + 40}px, #000 ${lyF + 40}px, transparent ${lyF + 42}px)`,
+          }} />
+        )}
+
+        {/* ── 状态行（画板上方）── */}
+        <div style={{ position: 'absolute', left: AX, top: 66, width: AW, height: 48, display: 'flex', alignItems: 'center', font: `600 30px ${MONO}`, color: L.ink, opacity: ramp(frame, 0, 10, EASE.out) }}>
+          <span style={{ color: done > 0.5 ? L.accent2 : L.accent, letterSpacing: '0.06em', textShadow: done > 0.5 ? glow(L.accent2, 0.5) : 'none' }}>
+            {done > 0.5 ? '✓ BUILT' : '▸ BUILDING'}
+          </span>
+          <span style={{ marginLeft: 18, color: L.ink3, fontWeight: 500 }}>video-shotcraft / index</span>
+          <span style={{ marginLeft: 'auto', fontVariantNumeric: 'tabular-nums', letterSpacing: '0.04em' }}>
+            <span style={{ color: L.ink3, fontWeight: 500 }}>BLOCKS </span>
+            <span style={{ color: placed === PLAN.length ? L.accent2 : L.ink }}>{String(placed).padStart(2, '0')}</span>
+            <span style={{ color: L.ink3 }}> / {String(PLAN.length).padStart(2, '0')}</span>
+            <span style={{ color: L.ink3, fontWeight: 500, marginLeft: 34 }}>{clock.toFixed(1)} s</span>
+          </span>
+        </div>
+
+        {/* ── 画板 ── */}
+        <div style={{ position: 'absolute', left: AX, top: AY, width: AW, height: AH }}>
+          {/* 页面表面：扫描线扫过之处由蓝图"刷"成页面底色 */}
+          <div style={{
+            position: 'absolute', inset: 0, borderRadius: 28,
+            background: `linear-gradient(180deg, ${alpha('#101a36', 0.96)} 0%, ${alpha('#0b1328', 0.96)} 100%)`,
+            boxShadow: `0 40px 120px -40px ${alpha('#000208', 0.9)}, inset 0 0 0 1px ${alpha('#a9c1ff', 0.12)}, inset 0 1px 0 ${alpha('#ffffff', 0.08)}`,
+            WebkitMaskImage: `linear-gradient(180deg, #000 ${ly - 30}px, transparent ${ly + 2}px)`,
+            maskImage: `linear-gradient(180deg, #000 ${ly - 30}px, transparent ${ly + 2}px)`,
+          }} />
+          {/* 画板外框 + 尺寸标注（蓝图元素，装完后退场） */}
+          <div style={{ position: 'absolute', inset: 0, borderRadius: 28, border: `1.5px dashed ${alpha('#a9c1ff', 0.3)}`, opacity: blueprint }} />
+          <div style={{ position: 'absolute', left: 0, top: -30, width: AW, display: 'flex', alignItems: 'center', gap: 14, opacity: blueprint * 0.9, font: `500 20px ${MONO}`, color: alpha('#a9c1ff', 0.55) }}>
+            <div style={{ flex: 1, height: 1, background: alpha('#a9c1ff', 0.3) }} />1640<div style={{ flex: 1, height: 1, background: alpha('#a9c1ff', 0.3) }} />
+          </div>
+          {/* 槽位：虚线框 + 小标（纹理），组件落位时消失 */}
+          {PLAN.map((p) => {
+            const [bx, by, bw, bh] = p.box;
+            const o = (1 - ramp(frame, p.land - 2, 4, EASE.out)) * blueprint;
+            if (o <= 0.01) return null;
+            return (
+              <div key={p.key} style={{ position: 'absolute', left: bx, top: by, width: bw, height: bh, opacity: o, borderRadius: 12, border: `1.5px dashed ${alpha('#a9c1ff', 0.5)}`, background: alpha('#5b8cff', 0.06) }}>
+                <div style={{ position: 'absolute', left: 14, top: 10, font: `600 18px ${MONO}`, color: alpha('#a9c1ff', 0.75), letterSpacing: '0.08em' }}>
+                  {p.name} <span style={{ opacity: 0.6 }}>{bw}×{bh}</span>
+                </div>
+              </div>
+            );
+          })}
+
+          {/* 组件 */}
+          <Fly p={P.nav}><Nav /></Fly>
+          <Fly p={P.badge}><Badge /></Fly>
+          <Fly p={P.h1}><H1 /></Fly>
+          <Fly p={P.body}><Body /></Fly>
+          <Fly p={P.media}>
+            <div style={{ position: 'absolute', inset: 0, borderRadius: 26, boxShadow: `0 30px 80px -30px ${alpha('#000208', 0.95)}, 0 0 ${(60 * lit).toFixed(1)}px ${alpha(L.accent, 0.22 * lit)}` }} />
+            <Media lit={lit} />
+          </Fly>
+          <Fly p={P.cta}><Cta /></Fly>
+          <Fly p={P.stats}><Stats /></Fly>
+
+          {/* 扫描线：光芯 + 柔辉 + 两端渐隐（画板宽 + 两侧各出 60px） */}
+          {lineOn > 0.01 && (
+            <div style={{
+              position: 'absolute', left: -60, width: AW + 120, top: ly - 2, height: 4, opacity: lineOn,
+              background: 'linear-gradient(90deg, transparent 0%, #dfe8ff 8%, #ffffff 50%, #dfe8ff 92%, transparent 100%)',
+              boxShadow: `0 0 12px ${alpha(L.accent, 0.95)}, 0 0 36px ${alpha(L.accent, 0.6)}, 0 0 90px ${alpha(L.accent, 0.35)}`,
+            }} />
+          )}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ImpactBurstKit.tsx

@@ -0,0 +1,264 @@
+// 落点冲击套件（impact-burst-kit）——主卡从镜头前砸进页面里的空槽位，落点帧同帧起爆
+// 冲击环 + 碎屑迸发 + 震屏；冲击波前沿扫到左右邻卡的那一帧（按半径-距离反解 = 落点后 3f），
+// 早已驻场的邻卡被可见地向外推开、再阻尼弹回——"这一下震到了邻居"。
+//
+// 第二轮重设计（瓷白规格页 · Launch film 砸入）：
+// - look = porcelain（冷白 · 钴蓝）。页面是 video-shotcraft 的成片规格区：眉题标志 + 标题「One prompt to a finished promo.」，
+//   三张 470×600 规格卡——Teaser / Walkthrough 两张白卡开场就在，中间是一个虚线空槽；主角 Launch film 卡是深墨蓝底
+//   （全片唯一的暗面 = 视觉重心），112px 时长、钴蓝 CTA，落定后头顶弹出「DIRECTOR'S CUT」签。
+// - 节奏「悬 — 砸 — 震 — 传 — 落」：0–16f 主卡悬在槽位上方的镜头前（scale 1.55→1.6、上提 20px、景深虚化，
+//   槽位里的接触影随高度变实）→ 16–22f 六帧 ease-in 加速砸落 → 22f 落点帧：卡片压扁 3f 再弹簧回正 +
+//   钴蓝冲击环（白色压力盘打底，扩散 out-cubic / 消散线性解耦）+ 18 片碎屑 + 8px 震屏 4f →
+//   25f 环前沿过邻卡中心：邻卡外推 34px + 旋转 ±3.5°，包络 cos(t/2)·e^(−t/8)，40f 硬钳 0，推开那一下给水平拖影。
+// - 落定后 28f「DIRECTOR'S CUT」签弹簧弹出，邻卡 ~65f 归位，此后整版真静止（只留极缓推镜）。
+//
+// 时间表（30fps，共 140f）：
+//   0–16    邻卡驻场 ≥15f；主卡悬停蓄力（上提 + 放大 + 虚化），空槽可见
+//   16–22   砸落（主动作 6f，ease-in）
+//   22–38   落点：压扁回弹、冲击环 16f、碎屑 22f、震屏 4f
+//   25–65   邻卡被波及：外推 → 阻尼弹回 → 硬钳归零
+//   28–40   DIRECTOR'S CUT 签弹出
+//   65–140  hold（75f）
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, bezier, mix, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const IMPACT_BURST_KIT_DURATION = 140;
+
+const L = LOOKS.porcelain;
+const NAVY = '#0e1631';
+const CW = 470;
+const CH = 600;
+const GAP = 44;
+const X0 = (1920 - (CW * 3 + GAP * 2)) / 2; // 211
+const Y = 300;
+const CX = 960;
+const CY = Y + CH / 2; // 600
+const IMPACT = 22;
+const DROP0 = 16;
+// 冲击环半径 100→1100（16f out-cubic）。前沿到邻卡中心距 514px：(514−100)/1000=0.414 → p≈0.163 → 2.6f → 取 +3f
+const HIT = IMPACT + 3;
+const EASE_IN_CUBIC = bezier(0.55, 0.055, 0.675, 0.19);
+
+const rnd = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+// 碎屑：钴蓝碎片 + 白纸屑，上半球为主
+const BITS = Array.from({ length: 18 }, (_, i) => ({
+  ang: -Math.PI / 2 + (rnd(i + 1) - 0.5) * Math.PI * 1.75,
+  dist: 260 + rnd(i + 40) * 300,
+  size: 12 + rnd(i + 80) * 16,
+  blue: i % 3 !== 2,
+  spin: (rnd(i + 120) - 0.5) * 720,
+  ratio: 0.35 + rnd(i + 9) * 0.5,
+}));
+
+// 邻卡被推开的阻尼包络：t=0 瞬时到 1，余弦衰减，40f 后钳 0 保证真静止
+const pushEnv = (f: number) => {
+  const t = f - HIT;
+  if (t < 0 || t >= 40) return 0;
+  return Math.cos(t * 0.5) * Math.exp(-t / 8);
+};
+
+const Check: React.FC<{ c: string }> = ({ c }) => (
+  <svg width={30} height={30} viewBox="0 0 30 30" style={{ flex: 'none' }}>
+    <circle cx={15} cy={15} r={14} fill={alpha(c, 0.14)} />
+    <path d="M9 15.5 L13.2 19.5 L21 11" fill="none" stroke={c} strokeWidth={2.6} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+type Plan = { name: string; price: string; unit: string; blurb: string; feats: string[]; cta: string; hero?: boolean };
+// video-shotcraft 的三种成片规格：大数字是片长（演示值），主角是 Launch film
+const PLANS: Plan[] = [
+  { name: 'Teaser', price: '15s', unit: '9:16 social', blurb: 'For a social drop.', feats: ['Crash-zoom open', 'Beat-synced cuts', 'Logo sting'], cta: 'Cut a teaser' },
+  { name: 'Launch film', price: '60s', unit: '16:9 · 1080p', blurb: 'Your product, in motion.', feats: ['Real page captures', '2.5D camera moves', 'Film-grade SFX'], cta: 'Render launch film', hero: true },
+  { name: 'Walkthrough', price: '90s', unit: 'with voiceover', blurb: 'Every feature, shot by shot.', feats: ['Cursor flyovers', 'Callout zooms', 'JianYing export'], cta: 'Storyboard it' },
+];
+
+const PlanCard: React.FC<{ p: Plan }> = ({ p }) => {
+  const dark = !!p.hero;
+  const ink = dark ? '#f2f5ff' : L.ink;
+  const ink2 = dark ? '#a9b4d0' : L.ink2;
+  const acc = dark ? '#7d9bff' : L.accent;
+  return (
+    <div style={{ position: 'absolute', inset: 0, padding: '44px 44px 40px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', fontFamily: FONT.sans, color: ink }}>
+      <div style={{ font: `700 34px ${FONT.sans}`, letterSpacing: '-0.02em' }}>{p.name}</div>
+      <div style={{ marginTop: 6, font: `500 26px ${FONT.sans}`, color: ink2 }}>{p.blurb}</div>
+      <div style={{ marginTop: 30, display: 'flex', alignItems: 'baseline', gap: 12 }}>
+        <span style={{ font: `820 ${dark ? 112 : 100}px ${FONT.sans}`, letterSpacing: '-0.055em', lineHeight: 0.9, fontVariantNumeric: 'tabular-nums' }}>{p.price}</span>
+        <span style={{ font: `500 26px ${FONT.sans}`, color: ink2, whiteSpace: 'nowrap' }}>{p.unit}</span>
+      </div>
+      <div style={{ marginTop: dark ? 26 : 34, height: 1, background: dark ? 'rgba(160,190,255,0.16)' : L.line }} />
+      <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 20 }}>
+        {p.feats.map((f) => (
+          <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 16, font: `550 30px ${FONT.sans}`, letterSpacing: '-0.012em' }}>
+            <Check c={acc} />
+            {f}
+          </div>
+        ))}
+      </div>
+      <div style={{
+        marginTop: 'auto', height: 72, borderRadius: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', font: `680 28px ${FONT.sans}`, letterSpacing: '-0.01em',
+        background: dark ? `linear-gradient(180deg, #5b7dff, ${L.accent})` : 'transparent', color: dark ? '#ffffff' : ink,
+        border: dark ? 'none' : `2px solid ${alpha(L.ink, 0.14)}`,
+        boxShadow: dark ? `0 14px 30px -12px ${alpha(L.accent, 0.9)}, inset 0 1px 0 rgba(255,255,255,0.3)` : 'none',
+      }}>
+        {p.cta}
+      </div>
+    </div>
+  );
+};
+
+export const ImpactBurstKit: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ── 主卡（Launch film）：0–16 悬停蓄力 → 16–22 加速砸落 → 22 起压扁回弹
+  const wind = ramp(frame, 0, DROP0, EASE.smooth);
+  const drop = ramp(frame, DROP0, IMPACT - DROP0, EASE_IN_CUBIC);
+  const hoverScale = 1.55 + 0.05 * wind;
+  const hoverDy = -110 - 20 * wind;
+  const mScale = mix(hoverScale, 1, drop);
+  const mDy = mix(hoverDy, 0, drop);
+  const lift = Math.min(1, Math.max(0, (mScale - 1) / 0.6));
+  const dof = lift * 7;
+  const squash = frame < IMPACT ? 0 : frame < IMPACT + 3 ? ramp(frame, IMPACT, 3, EASE.out) : 1 - springAt(frame, IMPACT + 3, { damping: 12, stiffness: 320 });
+  const sx = mScale * (1 + 0.06 * squash);
+  const sy = mScale * (1 - 0.085 * squash);
+  const mOp = ramp(frame, 0, 5, EASE.out);
+
+  // ── 冲击环 + 压力盘
+  const ringP = ramp(frame, IMPACT, 16, EASE.snappy);
+  const ringLin = ramp(frame, IMPACT, 16, EASE.linear);
+  const ringOn = frame >= IMPACT && frame < IMPACT + 16;
+  const ringR = mix(100, 1100, ringP);
+  const ringOp = mix(0.95, 0, ringLin);
+  const ringW = mix(10, 1.5, ringP);
+
+  // ── 碎屑 22f
+  const pT = ramp(frame, IMPACT, 22, EASE.out);
+  const pLin = ramp(frame, IMPACT, 22, EASE.linear);
+  const pOn = frame >= IMPACT && frame < IMPACT + 22;
+
+  // ── 邻卡波及
+  const env = pushEnv(frame);
+  const pushX = 34 * env;
+  const pushRot = 3.5 * env;
+  const pushV = 34 * (pushEnv(frame + 0.5) - pushEnv(frame - 0.5));
+
+  // ── 震屏 4f，8px 衰减
+  let shakeX = 0;
+  let shakeY = 0;
+  if (frame >= IMPACT && frame < IMPACT + 4) {
+    const amp = 8 * (1 - (frame - IMPACT) / 4);
+    shakeX = (rnd(frame * 3.7) - 0.5) * 2 * amp;
+    shakeY = (frame === IMPACT ? 1 : (rnd(frame * 7.1 + 13) - 0.5) * 2) * amp;
+  }
+
+  const badge = frame < IMPACT + 6 ? 0 : springAt(frame, IMPACT + 6, { damping: 13, stiffness: 240 });
+  const push = 1 + 0.02 * ramp(frame, IMPACT, 118, EASE.swift);
+  const neighborShadow = `${softShadow(6 + Math.abs(env) * 26, { color: L.shadow })}, inset 0 0 0 1px ${alpha(L.ink, 0.07)}, inset 0 1px 0 #ffffff`;
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.12 }} fill={{ x: 0.5, y: 1.0 }} />
+      <div style={{ position: 'absolute', inset: 0, transform: `translate(${shakeX.toFixed(2)}px, ${shakeY.toFixed(2)}px) scale(${push.toFixed(5)})` }}>
+        {/* 页面标题区：本来就在 */}
+        <div style={{ position: 'absolute', left: X0, top: 104, fontFamily: FONT.sans, color: L.ink }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, font: `700 24px ${FONT.mono}`, letterSpacing: '0.06em', color: L.accent }}>
+            <ShotcraftMark size={34} tone="light" />
+            <span style={{ color: L.ink }}>{BRAND.name}</span>
+            <span>· formats</span>
+          </div>
+          <div style={{ marginTop: 14, font: `780 76px ${FONT.sans}`, letterSpacing: '-0.045em', lineHeight: 1 }}>One prompt to a finished promo.</div>
+        </div>
+
+        {/* 中间空槽：虚线槽位 + 随下落变实的接触影 */}
+        <div style={{ position: 'absolute', left: X0 + CW + GAP, top: Y, width: CW, height: CH, borderRadius: 30, border: `2px dashed ${alpha(L.accent, 0.3)}`, background: alpha(L.accent, 0.035), opacity: 1 - ramp(frame, IMPACT, 3, EASE.out) }} />
+        <div style={{
+          position: 'absolute', left: X0 + CW + GAP - 30, top: Y + CH - 60, width: CW + 60, height: 120, borderRadius: '50%',
+          background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.shadow, 0.22)} 0%, ${alpha(L.shadow, 0)} 70%)`,
+          opacity: frame < IMPACT ? mix(0.25, 1, drop) : 1 - ramp(frame, IMPACT, 4, EASE.out), transform: `scale(${mix(1.5, 1, drop).toFixed(3)})`,
+        }} />
+
+        {/* 左右邻卡：被冲击波推开再弹回 */}
+        {[0, 2].map((k) => {
+          const dir = k === 0 ? -1 : 1;
+          return (
+            <SpeedBlur key={k} vx={dir * pushV} amount={0.22} max={8}>
+              <div style={{
+                position: 'absolute', left: X0 + k * (CW + GAP), top: Y, width: CW, height: CH, borderRadius: 30, background: '#ffffff', boxShadow: neighborShadow,
+                transform: `translateX(${(dir * pushX).toFixed(2)}px) rotate(${(dir * pushRot).toFixed(3)}deg)`, transformOrigin: `50% 100%`,
+              }}>
+                <PlanCard p={PLANS[k]} />
+              </div>
+            </SpeedBlur>
+          );
+        })}
+
+        {/* 压力盘：落点一瞬的白色气浪（打底，让钴蓝环在亮底上读得出来） */}
+        {ringOn && (
+          <div style={{
+            position: 'absolute', left: CX - ringR * 0.9, top: CY - ringR * 0.9, width: ringR * 1.8, height: ringR * 1.8, borderRadius: '50%',
+            background: `radial-gradient(circle, ${alpha('#ffffff', 0)} 40%, ${alpha('#ffffff', 0.55 * (1 - ringLin))} 68%, ${alpha('#ffffff', 0)} 72%)`,
+          }} />
+        )}
+
+        {/* 主卡 Launch film */}
+        <div style={{
+          position: 'absolute', left: X0 + CW + GAP, top: Y + mDy, width: CW, height: CH, borderRadius: 30, opacity: mOp,
+          background: `linear-gradient(170deg, #1a2550 0%, ${NAVY} 55%, #0a1026 100%)`,
+          boxShadow: `0 ${(18 + lift * 60).toFixed(1)}px ${(50 + lift * 90).toFixed(1)}px -18px ${alpha('#0c1a3a', 0.55 - lift * 0.15)}, 0 0 0 1px ${alpha('#9db4ff', 0.18)}, inset 0 1px 0 ${alpha('#ffffff', 0.14)}`,
+          transform: `scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`, transformOrigin: '50% 100%',
+          filter: dof > 0.4 ? `blur(${dof.toFixed(2)}px)` : undefined,
+        }}>
+          {/* 顶部钴蓝辉光 */}
+          <div style={{ position: 'absolute', inset: 0, borderRadius: 30, overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', left: -80, right: -80, top: -260, height: 420, background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.accent, 0.45)} 0%, ${alpha(L.accent, 0)} 70%)` }} />
+          </div>
+          <PlanCard p={PLANS[1]} />
+          {/* DIRECTOR'S CUT 签：落定后弹出，骑在卡顶缘 */}
+          <div style={{ position: 'absolute', left: 0, right: 0, top: -24, display: 'flex', justifyContent: 'center' }}>
+            <div style={{
+              height: 48, padding: '0 22px', borderRadius: 24, background: L.accent, color: '#ffffff', display: 'flex', alignItems: 'center',
+              font: `800 22px ${FONT.mono}`, letterSpacing: '0.12em', transform: `scale(${badge.toFixed(4)})`, opacity: Math.min(1, badge * 2),
+              boxShadow: `0 10px 24px -8px ${alpha(L.accent, 0.8)}, inset 0 1px 0 rgba(255,255,255,0.35)`,
+            }}>
+              {"DIRECTOR'S CUT"}
+            </div>
+          </div>
+        </div>
+
+        {/* 碎屑（卡上方）：沿飞行方向按速度拉长 */}
+        {pOn && BITS.map((b, i) => {
+          const sp = Math.pow(1 - pT, 2 / 3);
+          const px = CX + Math.cos(b.ang) * (140 + b.dist * pT);
+          const py = CY - 40 + Math.sin(b.ang) * (140 + b.dist * pT) * 0.85 + 120 * pLin * pLin;
+          const s = b.size * (1 - 0.6 * pLin);
+          const stretch = 1 + Math.min(1.6, sp * 1.6);
+          return (
+            <div key={i} style={{ position: 'absolute', left: px - s / 2, top: py - (s * b.ratio) / 2, width: s, height: s * b.ratio, transform: `rotate(${((b.ang * 180) / Math.PI).toFixed(1)}deg) scaleX(${stretch.toFixed(3)})`, opacity: pLin < 0.65 ? 1 : 1 - (pLin - 0.65) / 0.35 }}>
+              <div style={{
+                position: 'absolute', inset: 0, borderRadius: 2,
+                background: b.blue ? L.accent : '#ffffff', boxShadow: b.blue ? `0 0 8px ${alpha(L.accent, 0.45)}` : `0 0 0 1px ${alpha(L.ink, 0.1)}, 0 3px 8px ${alpha(L.shadow, 0.25)}`,
+                transform: `rotate(${(b.spin * pT).toFixed(1)}deg)`,
+              }} />
+            </div>
+          );
+        })}
+
+        {/* 冲击环：钴蓝细环 + 柔辉，越扩越细 */}
+        {ringOn && (
+          <div style={{
+            position: 'absolute', left: CX - ringR, top: CY - ringR, width: ringR * 2, height: ringR * 2, borderRadius: '50%', boxSizing: 'border-box', opacity: ringOp,
+            border: `${ringW.toFixed(2)}px solid ${alpha(L.accent, 0.9)}`,
+            boxShadow: `0 0 ${(18 + ringP * 30).toFixed(0)}px ${alpha(L.accent, 0.35)}, inset 0 0 ${(18 + ringP * 30).toFixed(0)}px ${alpha(L.accent, 0.2)}`,
+          }} />
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};