dsh-drawai 0.3.4 → 0.4.0

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

@@ -0,0 +1,260 @@
+// 金田透视急停（kanada-perspective-snap）——金田伊功式夸张透视入场：卡片以鱼眼级透视姿态贴着镜头
+// 从左侧甩进画面中心，透视随减速从短焦收敛到长焦，落定瞬间"啪"地弹平（rotateY 过冲再回零）。
+//
+// 第二轮重设计（极光夜 · 发布片首映卡）：
+// - look = aurora（紫黑 · 紫 · 粉）。主角是一支用 video-shotcraft 拍的发布片首映卡（1000×580）：左半是程序化插画
+//   （霓虹黄昏天空 + 条纹落日 + 城市剪影 + 水面倒影），右半是 92px 片名「Launch Film」、片子信息与 Watch now 按钮。
+//   顶部一条 168px 低透明大字带「FRAME MOTION ✦ CRAFT THE SHOT」（品牌短句）做海报底，缓慢反向漂移（视差）。
+// - 甩入 18f（2→20f）：translateX −1350→0 + 轻微下弧、rotate3d(0.5,1,0.1) 62°→0、scale 1.8→1、
+//   perspective 260→1800px，全部 EASE.snappy（先猛后缓的急停）；按 x 速度给水平 SpeedBlur + 身后 7 条粉白速度线。
+// - "啪"在过冲：16–20f rotateY 冲到 +6°，20f 起弹簧（damping 16）回零；同帧 2f 震屏 8px、
+//   一圈动漫集中线（48 道细楔形从画框边缘指向卡心）8f 内向外退散——金田流的"定格一拍"。
+// - 跟随：卡内文字比卡片晚 3f 落定（片名带 −10° skew 收正的"拖影"），落定后字幕逐词升起。
+//
+// 时间表（30fps，共 120f）：
+//   0–2     预备：舞台光、背景大字已在，卡片近角在左缘外
+//   2–20    透视甩入（主动作 18f）
+//   16–26   rotateY 过冲 +6° → 弹簧回零；20f 震屏 2f + 集中线 8f
+//   23–36   跟随：卡内文字晚一拍滑入落定、片名 skew 收正
+//   34–56   字幕「Premieres Friday · shot with video-shotcraft」逐词升起
+//   56–120  hold：极缓推镜 1→1.025、背景大字慢漂
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, springAt } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const KANADA_PERSPECTIVE_SNAP_DURATION = 120;
+
+const L = LOOKS.aurora;
+const PINK = L.accent2;
+const T0 = 2; // 甩入起点
+const SNAP = 20; // 落定帧
+const CW = 1000;
+const CH = 580;
+const CX = (1920 - CW) / 2; // 460
+const CY = 236;
+
+// 确定性伪随机
+const rnd = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+const progAt = (f: number) => ramp(f, T0, SNAP - T0, EASE.snappy);
+// 姿态（透视 / 扭转 / 缩放）比位移晚收：卡片"扭着"冲到位，最后几帧才被拍平——金田流的关键
+const TWIST = bezier(0.62, 0, 0.3, 1);
+const twistAt = (f: number) => ramp(f, T0, SNAP - T0 - 2, TWIST);
+const txAt = (f: number) => mix(-1350, 0, progAt(f));
+const tyAt = (f: number) => 120 * Math.sin((1 - progAt(f)) * Math.PI * 0.5) * (1 - progAt(f)); // 轻微下弧
+
+// 速度线（相对卡片中心 y、长度系数、粗细）
+const STREAKS = [-250, -170, -90, -20, 60, 140, 230].map((y, i) => ({ y, len: 0.7 + rnd(i + 3) * 0.6, w: 2 + rnd(i + 11) * 3 }));
+// 集中线：48 道细楔形
+const FOCUS = Array.from({ length: 48 }, (_, i) => ({
+  a: (i / 48) * Math.PI * 2 + (rnd(i * 3.3) - 0.5) * 0.09,
+  w: 0.006 + rnd(i * 5.1) * 0.014, // 楔形角宽（弧度）
+  r0: 560 + rnd(i * 7.7) * 220, // 内端半径
+}));
+// 城市剪影：确定性楼宇
+const TOWERS = Array.from({ length: 16 }, (_, i) => ({ x: i * 36 - 6, w: 30 + rnd(i * 2.1) * 18, h: 50 + rnd(i * 4.7) ** 1.4 * 150 }));
+
+const Artwork: React.FC = () => (
+  <svg width={560} height={CH} viewBox={`0 0 560 ${CH}`} style={{ position: 'absolute', left: 0, top: 0 }}>
+    <defs>
+      <linearGradient id="kps-sky" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" stopColor="#1d0b3d" />
+        <stop offset="0.38" stopColor="#5b1f78" />
+        <stop offset="0.6" stopColor="#ff5fa2" />
+        <stop offset="0.7" stopColor="#ffb36b" />
+      </linearGradient>
+      <linearGradient id="kps-sun" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" stopColor="#fff1a8" />
+        <stop offset="0.55" stopColor="#ffb15e" />
+        <stop offset="1" stopColor="#ff4f9a" />
+      </linearGradient>
+      <linearGradient id="kps-water" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" stopColor="#ff7aa8" stopOpacity="0.55" />
+        <stop offset="1" stopColor="#14082a" stopOpacity="1" />
+      </linearGradient>
+      <mask id="kps-stripes">
+        <rect x={0} y={0} width={560} height={CH} fill="#fff" />
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <rect key={i} x={0} y={300 + i * 18 + i * i * 1.2} width={560} height={3 + i * 2.2} fill="#000" />
+        ))}
+      </mask>
+    </defs>
+    <rect x={0} y={0} width={560} height={CH} fill="url(#kps-sky)" />
+    {/* 高空星点 */}
+    {Array.from({ length: 30 }, (_, i) => (
+      <circle key={i} cx={rnd(i * 9.1) * 560} cy={rnd(i * 3.7 + 1) * 180} r={0.8 + rnd(i * 1.3) * 1.6} fill="#fff" opacity={0.4 + rnd(i * 6.2) * 0.5} />
+    ))}
+    {/* 条纹落日 */}
+    <circle cx={280} cy={330} r={150} fill="url(#kps-sun)" mask="url(#kps-stripes)" />
+    <circle cx={280} cy={330} r={190} fill="none" stroke="#ffd3a1" strokeOpacity={0.18} strokeWidth={30} />
+    {/* 城市剪影 + 零星亮窗 */}
+    {TOWERS.map((t, i) => (
+      <g key={i}>
+        <rect x={t.x} y={410 - t.h} width={t.w} height={t.h} fill={i % 3 === 0 ? '#2a0f45' : '#1b0a30'} />
+        {Array.from({ length: Math.floor(t.h / 26) }, (_, k) =>
+          rnd(i * 13 + k * 3.1) > 0.62 ? (
+            <rect key={k} x={t.x + 6 + (k % 2) * 10} y={410 - t.h + 10 + k * 24} width={5} height={8} fill={rnd(i + k) > 0.5 ? '#ff8fc0' : '#ffd27a'} opacity={0.85} />
+          ) : null,
+        )}
+      </g>
+    ))}
+    {/* 水面倒影 */}
+    <rect x={0} y={410} width={560} height={CH - 410} fill="url(#kps-water)" />
+    {Array.from({ length: 9 }, (_, i) => (
+      <rect key={i} x={170 + rnd(i * 2.7) * 40 - i * 4} y={424 + i * 15} width={220 - i * 18 + rnd(i) * 30} height={3} rx={1.5} fill="#ffd7a0" opacity={0.55 - i * 0.05} />
+    ))}
+  </svg>
+);
+
+export const KanadaPerspectiveSnap: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const p = progAt(frame);
+  const tw = twistAt(frame);
+  const persp = mix(260, 1800, tw); // 短焦鱼眼 → 长焦收平
+  const angle3d = mix(62, 0, tw); // rotate3d(0.5,1,0.1)
+  const scale = mix(1.8, 1, mix(p, tw, 0.5));
+  const tx = txAt(frame);
+  const ty = tyAt(frame);
+  const vx = frame < SNAP + 2 ? txAt(frame + 0.5) - txAt(frame - 0.5) : 0;
+
+  // rotateY 过冲：16–20f 冲到 +6°，20f 起弹簧回零（一次可见回弹）
+  const rotY = frame < SNAP ? 6 * ramp(frame, 15, 5, EASE.swift) : 6 * (1 - springAt(frame, SNAP, { damping: 16, stiffness: 260 }));
+
+  // 落定震屏：20f 起 8px，2f 衰减（之后恒为 0）
+  const shakeAmp = frame >= SNAP && frame < SNAP + 3 ? 8 * (1 - (frame - SNAP) / 3) : 0;
+  const shakeX = shakeAmp * (rnd(frame * 7 + 1) * 2 - 1);
+  const shakeY = shakeAmp * (rnd(frame * 13 + 2) * 2 - 1);
+
+  // 阴影：飞行期拉长斜影 → 落定收为静置投影
+  const air = 1 - ramp(frame, T0, SNAP - T0 + 4, EASE.out);
+  const cardShadow =
+    `0 ${(2 + air * 8).toFixed(1)}px ${(6 + air * 14).toFixed(1)}px ${alpha('#05010d', 0.5 - air * 0.2)}, ` +
+    `${(air * 90).toFixed(1)}px ${(40 + air * 50).toFixed(1)}px ${(90 + air * 40).toFixed(1)}px -20px ${alpha('#05010d', 0.75)}, ` +
+    `0 0 0 1px ${alpha('#d9c6ff', 0.14)}`;
+
+  // 速度线：长度 ∝ 速度，减速到 ~5px/帧时淡没
+  const streakA = ramp(Math.abs(vx), 5, 40, EASE.linear);
+
+  // 集中线：落定帧起 8f，内端半径向外退、整体淡出
+  const fT = (frame - SNAP) / 9;
+  const focusOn = fT >= 0 && fT < 1;
+
+  // 跟随：卡内文字晚 3f 落定
+  const follow = ramp(frame, SNAP + 3, 13, EASE.snappy);
+  const skew = mix(-10, 0, follow);
+
+  // 背景大字：视差慢漂 + 甩入时被"带"一下
+  const bgX = -40 * ramp(frame, 0, 120, EASE.linear) - 60 * (1 - ramp(frame, 0, SNAP + 6, EASE.out));
+  const push = 1 + 0.025 * ramp(frame, SNAP, 100, EASE.swift);
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.18 }} fill={{ x: 0.14, y: 0.92 }} horizon={0.83} />
+      <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: -400, top: 28, transform: `translateX(${bgX.toFixed(1)}px)`,
+          font: `900 168px ${FONT.sans}`, letterSpacing: '-0.035em', lineHeight: 1, color: alpha('#c9b6ff', 0.085), whiteSpace: 'nowrap',
+          opacity: ramp(frame, 0, 10, EASE.out),
+        }}>
+          FRAME MOTION <span style={{ color: alpha(PINK, 0.22) }}>✦</span> CRAFT THE SHOT <span style={{ color: alpha(PINK, 0.22) }}>✦</span> FRAME MOTION
+        </div>
+
+        {/* 集中线 */}
+        {focusOn && (
+          <svg width={1920} height={1080} style={{ position: 'absolute', left: 0, top: 0, opacity: (1 - fT) * 0.9 }}>
+            {FOCUS.map((l, i) => {
+              const r0 = l.r0 + EASE.out(fT) * 420;
+              const r1 = 1500;
+              const cx = 960;
+              const cy = CY + CH / 2;
+              const pts = [
+                [cx + Math.cos(l.a - l.w) * r1, cy + Math.sin(l.a - l.w) * r1],
+                [cx + Math.cos(l.a) * r0, cy + Math.sin(l.a) * r0],
+                [cx + Math.cos(l.a + l.w) * r1, cy + Math.sin(l.a + l.w) * r1],
+              ];
+              return <polygon key={i} points={pts.map((q) => q.map((v) => v.toFixed(1)).join(',')).join(' ')} fill={i % 4 === 0 ? PINK : '#f3ecff'} opacity={i % 4 === 0 ? 0.75 : 0.5} />;
+            })}
+          </svg>
+        )}
+
+        {/* 速度线（卡片身后，水平拖尾） */}
+        {streakA > 0.001 &&
+          STREAKS.map((s, i) => {
+            const len = Math.min(1400, Math.abs(vx) * 9 * s.len);
+            const x1 = CX + tx + 120;
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: x1 - len, top: CY + CH / 2 + ty + s.y * mix(1.5, 1, p) - s.w / 2, width: len, height: s.w, borderRadius: s.w,
+                background: `linear-gradient(90deg, ${alpha(i % 3 === 0 ? PINK : '#f3ecff', 0)} 0%, ${alpha(i % 3 === 0 ? PINK : '#f3ecff', 0.7)} 100%)`,
+                opacity: streakA,
+              }} />
+            );
+          })}
+
+        {/* 透视容器 + 卡片 */}
+        <SpeedBlur vx={vx} amount={0.2} max={26}>
+          <div style={{ position: 'absolute', left: CX, top: CY, width: CW, height: CH, perspective: `${persp.toFixed(1)}px`, perspectiveOrigin: '30% 50%' }}>
+            <div style={{
+              position: 'absolute', inset: 0,
+              transform: `translate(${tx.toFixed(2)}px, ${ty.toFixed(2)}px) scale(${scale.toFixed(4)}) rotate3d(0.5, 1, 0.1, ${angle3d.toFixed(3)}deg) rotateY(${rotY.toFixed(3)}deg)`,
+              transformOrigin: '20% 50%',
+            }}>
+              <div style={{ position: 'absolute', inset: 0, borderRadius: 30, overflow: 'hidden', background: '#170f2a', boxShadow: cardShadow }}>
+                <Artwork />
+                {/* 插画与信息区的过渡 */}
+                <div style={{ position: 'absolute', left: 470, top: 0, width: 98, height: CH, background: `linear-gradient(90deg, ${alpha('#170f2a', 0)} 0%, #170f2a 100%)` }} />
+                {/* 信息区：晚一拍落定 */}
+                <div style={{
+                  position: 'absolute', left: 600, top: 0, width: 360, height: CH, fontFamily: FONT.sans, color: L.ink,
+                  transform: `translateX(${mix(-36, 0, follow).toFixed(2)}px)`, opacity: mix(0.4, 1, follow),
+                }}>
+                  <div style={{ position: 'absolute', top: 76, left: 0, height: 44, padding: '0 16px', borderRadius: 10, background: PINK, color: '#1a0614', display: 'flex', alignItems: 'center', font: `800 22px ${FONT.mono}`, letterSpacing: '0.1em' }}>
+                    PREMIERE
+                  </div>
+                  {/* 出品方标志：与 PREMIERE 签同排右对齐 */}
+                  <ShotcraftMark size={44} tone="dark" style={{ position: 'absolute', top: 76, right: 0 }} />
+                  <div style={{ position: 'absolute', top: 150, left: -4, font: `880 92px ${FONT.sans}`, letterSpacing: '-0.05em', lineHeight: 0.92, transform: `skewX(${skew.toFixed(2)}deg)`, transformOrigin: '0 100%' }}>
+                    Launch
+                    <br />
+                    Film
+                  </div>
+                  <div style={{ position: 'absolute', top: 338, left: 0, font: `600 30px ${FONT.sans}`, color: L.ink2, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
+                    Your product, in motion.
+                  </div>
+                  <div style={{ position: 'absolute', top: 382, left: 0, font: `500 26px ${FONT.mono}`, color: L.ink3, letterSpacing: '0.04em' }}>60 SEC · 16:9 · 1080P</div>
+                  <div style={{ position: 'absolute', top: 452, left: 0, display: 'flex', gap: 14 }}>
+                    <div style={{ height: 64, padding: '0 28px', borderRadius: 32, background: '#f7f2ff', color: '#140a24', display: 'flex', alignItems: 'center', gap: 12, font: `750 28px ${FONT.sans}`, letterSpacing: '-0.01em', boxShadow: `0 10px 30px -10px ${alpha(PINK, 0.7)}` }}>
+                      <svg width={20} height={22} viewBox="0 0 20 22"><path d="M2 2 L18 11 L2 20 Z" fill="#140a24" /></svg>
+                      Watch now
+                    </div>
+                    <div style={{ width: 64, height: 64, borderRadius: 32, border: `2px solid ${alpha('#f7f2ff', 0.3)}`, display: 'flex', alignItems: 'center', justifyContent: 'center', font: `400 36px ${FONT.sans}`, color: L.ink }}>+</div>
+                  </div>
+                </div>
+                {/* 顶缘内高光 */}
+                <div style={{ position: 'absolute', inset: 0, borderRadius: 30, boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.12)', pointerEvents: 'none' }} />
+              </div>
+            </div>
+          </div>
+        </SpeedBlur>
+
+        {/* 字幕：落定后逐词升起 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: CY + CH + 64, textAlign: 'center', font: `600 44px ${FONT.sans}`, letterSpacing: '-0.02em', color: L.ink }}>
+          <TextReveal text="Premieres Friday" by="word" variant="rise" start={34} each={16} gap={4} />
+          <span style={{ color: L.ink3 }}>
+            <TextReveal text="  ·  shot with " by="word" variant="rise" start={40} each={16} gap={4} />
+          </span>
+          <span style={{ color: PINK }}>
+            <TextReveal text={BRAND.name} by="word" variant="rise" start={46} each={16} gap={4} />
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

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

@@ -0,0 +1,263 @@
+// 比分砸落入场（score-slam）——体育转播比分弹窗式 slam：比分卡从镜头前 2.6 倍大小加速砸到屏心，
+// 落点帧同帧起爆三件套（冲击环 + 碎片火花 + 震屏），砸落带一次压缩过冲回弹落定。
+//
+// 第二轮重设计（石墨夜场 · 杯赛终场比分）：
+// - look = graphite（近单色暗场，香槟金点缀）。舞台是夜场球场：画面顶缘四盏泛光灯 0–7f 依次"啪"地亮起
+//   （带下射光锥与雾），远处看台是一层虚化暖色光点。主角是一张 1240×400 的终场比分卡：
+//   两队徽章 + 队名（主队 Shotcraft 用 video-shotcraft 标志作队徽，客队 Keyframes）、220px 粗体 tabular 比分「3 – 2」、
+//   顶部金色「FULL TIME · 90+4′」签、底部赛事信息行。
+// - 节奏「悬 — 砸 — 炸 — 落 — 读」：0–9f 卡片悬在镜头前（2.75→2.6、虚化 10px、上提蓄力）→
+//   9–15f 六帧 ease-in 加速砸落（scale 2.6→0.965、rotate 5°→0、虚化归零）→ 15f 落点帧：
+//   冲击环（白芯 + 金辉，扩散 out-cubic、消散线性解耦）+ 14 片玻璃/金箔碎片抛物线飞散 + 16 道火花 +
+//   竖向偏置震屏 18px 指数衰减 5f + 2f 白闪 → 15–26f 弹簧回弹到 1。
+// - 跟随：两个比分数字晚 3f / 6f 各自"二次落地"（1.16→1 弹簧），胜方数字下划金线擦出；
+//   FULL TIME 签从卡顶滑出；之后标题「Shotcraft lifts the Cup.」逐词升起、副句（评价语）淡入。
+//
+// 时间表（30fps，共 135f）：
+//   0–9     预备：泛光灯依次亮起；比分卡悬在镜头前虚化、缓慢上提
+//   9–15    砸落（主动作 6f，ease-in）
+//   15–31   落点三件套：环 16f / 碎片 20f / 火花 10f / 震屏 5f / 白闪 2f
+//   15–26   卡片压缩回弹；18f、21f 比分数字二次落地；24f FULL TIME 签滑出；28f 胜方金线
+//   36–64   标题逐词升起 + 副句淡入
+//   64–135  hold：泛光灯极缓呼吸、推镜 1→1.02，余波全部归零
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Stage, TextReveal, alpha, springAt } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const SCORE_SLAM_DURATION = 135;
+
+const L = LOOKS.graphite;
+const GOLD = L.accent2;
+const IMPACT = 15; // 落点帧
+const SLAM0 = 9; // 砸落起点
+const CW = 1240;
+const CH = 400;
+const CX = 960;
+const CY = 500; // 卡片中心
+const EASE_IN_QUAD = bezier(0.55, 0.085, 0.68, 0.53);
+
+const rnd = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+// 碎片：多边形玻璃 / 金箔片，抛物线（先飞出再下坠）+ 自旋 + 翻面
+const SHARDS = Array.from({ length: 14 }, (_, i) => {
+  const ang = (i / 14) * Math.PI * 2 + (rnd(i + 3) - 0.5) * 0.5;
+  return {
+    ang, dist: 280 + rnd(i + 11) * 300, size: 22 + rnd(i + 23) * 26, spin: (rnd(i + 31) - 0.5) * 620,
+    gold: i % 3 === 0, poly: [0, 1, 2, 3].map((k) => `${(50 + Math.cos(k * 1.7 + i) * (30 + rnd(i * 4 + k) * 20)).toFixed(0)}% ${(50 + Math.sin(k * 1.7 + i) * (30 + rnd(i * 5 + k) * 20)).toFixed(0)}%`).join(', '),
+  };
+});
+const SPARKS = Array.from({ length: 16 }, (_, i) => ({
+  ang: (i / 16) * Math.PI * 2 + (rnd(i + 61) - 0.5) * 0.4, dist: 360 + rnd(i + 71) * 320, len: 40 + rnd(i + 81) * 50,
+}));
+const LIGHTS = [250, 600, 1320, 1670];
+
+const Crest: React.FC<{ code: React.ReactNode; filled: boolean }> = ({ code, filled }) => (
+  <div style={{
+    width: 108, height: 108, borderRadius: 54, display: 'flex', alignItems: 'center', justifyContent: 'center',
+    background: filled ? 'linear-gradient(180deg, #f6f5f1, #cfcdc6)' : 'transparent',
+    border: filled ? 'none' : `3px solid ${alpha(L.ink, 0.55)}`,
+    boxShadow: filled ? `0 8px 20px -8px #000, inset 0 -3px 0 ${alpha('#000', 0.12)}` : 'none',
+    font: `850 30px ${FONT.sans}`, letterSpacing: '0.02em', color: filled ? '#141416' : L.ink,
+  }}>
+    {code}
+  </div>
+);
+
+export const ScoreSlam: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 卡片：0–9 悬停蓄力（2.75→2.6、上提），9–15 加速砸落到 0.965，15 起弹簧回 1 ——
+  const hover = ramp(frame, 0, SLAM0, EASE.smooth);
+  const drop = ramp(frame, SLAM0, IMPACT - SLAM0, EASE_IN_QUAD);
+  const preScale = mix(2.75, 2.6, hover);
+  const settle = springAt(frame, IMPACT, { damping: 14, stiffness: 260 });
+  const scale = frame < IMPACT ? mix(preScale, 0.965, drop) : mix(0.965, 1, settle);
+  const rot = mix(5, 0, drop);
+  const dy = frame < IMPACT ? mix(-40 - 30 * hover, 0, drop) : 0;
+  const cardOp = ramp(frame, 0, 6, EASE.out) * mix(0.6, 1, drop); // 悬停期半透，背后泛光灯亮起看得见
+  const height01 = Math.min(1, Math.max(0, (scale - 1) / 1.75));
+  const dof = height01 * 10; // 离镜头越近越虚
+  const cardShadow =
+    `0 ${(2 + height01 * 14).toFixed(1)}px ${(6 + height01 * 24).toFixed(1)}px ${alpha('#000', 0.5 - height01 * 0.25)}, ` +
+    `0 ${(40 + height01 * 80).toFixed(1)}px ${(90 + height01 * 120).toFixed(1)}px -20px ${alpha('#000', 0.85 - height01 * 0.3)}, ` +
+    `inset 0 1px 0 ${alpha('#ffffff', 0.14)}, inset 0 0 0 1px ${alpha('#ffffff', 0.09)}`;
+
+  // —— 震屏：落点帧起 5f，18px 指数衰减，偏竖向（第一帧向下砸）——
+  let shakeX = 0;
+  let shakeY = 0;
+  if (frame >= IMPACT && frame < IMPACT + 5) {
+    const t = frame - IMPACT;
+    const amp = 18 * Math.exp(-t * 0.85);
+    shakeX = amp * 0.4 * (rnd(frame * 7 + 1) * 2 - 1);
+    shakeY = amp * (t === 0 ? 1 : rnd(frame * 13 + 2) * 2 - 1);
+  }
+  const flash = frame >= IMPACT && frame < IMPACT + 3 ? [0.22, 0.12, 0.04][frame - IMPACT] : 0;
+
+  // —— 冲击环：扩散 out-cubic，消散走线性帧时间（解耦，否则刚扩开就淡没）——
+  const ringT = ramp(frame, IMPACT, 16, EASE.snappy);
+  const ringLin = ramp(frame, IMPACT, 16, EASE.linear);
+  const ringOn = frame >= IMPACT && frame < IMPACT + 16;
+  const ringD = mix(120, 1500, ringT);
+  const ringOp = ringLin < 0.6 ? mix(1, 0.65, ringLin / 0.6) : mix(0.65, 0, (ringLin - 0.6) / 0.4);
+  const ringW = mix(9, 1.5, ringT);
+
+  // —— 碎片 20f / 火花 10f ——
+  const shT = ramp(frame, IMPACT, 20, EASE.out);
+  const shLin = ramp(frame, IMPACT, 20, EASE.linear);
+  const shOn = frame >= IMPACT && frame < IMPACT + 20;
+  const spT = ramp(frame, IMPACT, 10, bezier(0.1, 0.9, 0.2, 1));
+  const spLin = ramp(frame, IMPACT, 10, EASE.linear);
+  const spOn = frame >= IMPACT && frame < IMPACT + 10;
+
+  // —— 跟随：比分数字二次落地、FULL TIME 签、胜方金线 ——
+  const digitPop = (start: number) => (frame < start ? 0 : springAt(frame, start, { damping: 13, stiffness: 300 }));
+  const d1 = digitPop(IMPACT + 3);
+  const d2 = digitPop(IMPACT + 6);
+  const tag = ramp(frame, IMPACT + 9, 12, EASE.snappy);
+  const underline = ramp(frame, IMPACT + 13, 14, EASE.snappy);
+
+  const push = 1 + 0.02 * ramp(frame, IMPACT, 120, EASE.swift);
+  const breathe = 0.92 + 0.08 * Math.sin(frame / 22);
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: -0.05 }} fill={null} intensity={0.8} horizon={0.8}>
+        {/* 远处看台：虚化暖色光点 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 640, height: 440, filter: 'blur(3px)' }}>
+          <Dust look={L} count={60} seed={7} drift={0.08} opacity={0.55} color="#f2d9a8" />
+        </div>
+      </Stage>
+
+      {/* 泛光灯：0–7f 依次亮起（亮 → 闪暗 → 亮），下射光锥 + 雾 */}
+      {LIGHTS.map((x, i) => {
+        const t0 = i * 2;
+        const on = frame < t0 ? 0 : frame < t0 + 1 ? 1 : frame < t0 + 2 ? 0.35 : 1;
+        const o = on * breathe;
+        return (
+          <React.Fragment key={i}>
+            <div style={{
+              position: 'absolute', left: x - 380, top: -40, width: 760, height: 1100, opacity: o,
+              background: `radial-gradient(ellipse 34% 100% at 50% 0%, ${alpha('#fff4dc', 0.13)} 0%, ${alpha('#fff4dc', 0.05)} 45%, ${alpha('#fff4dc', 0)} 80%)`,
+            }} />
+            <div style={{
+              position: 'absolute', left: x - 160, top: -150, width: 320, height: 300, borderRadius: '50%', opacity: o,
+              background: `radial-gradient(circle, ${alpha('#ffffff', 0.95)} 0%, ${alpha('#fff1d2', 0.45)} 18%, ${alpha('#fff1d2', 0)} 66%)`,
+            }} />
+          </React.Fragment>
+        );
+      })}
+
+      <div style={{ position: 'absolute', inset: -40, transform: `translate(${shakeX.toFixed(2)}px, ${shakeY.toFixed(2)}px)` }}>
+        <div style={{ position: 'absolute', inset: 40, transform: `scale(${push.toFixed(5)})` }}>
+          {/* 冲击环：柔辉（金）+ 白芯细环 */}
+          {ringOn && (
+            <>
+              <div style={{
+                position: 'absolute', left: CX - ringD / 2, top: CY - ringD / 2, width: ringD, height: ringD, borderRadius: '50%', opacity: ringOp,
+                boxShadow: `0 0 ${(30 + ringT * 40).toFixed(0)}px ${(6 + ringT * 8).toFixed(0)}px ${alpha(GOLD, 0.35)}, inset 0 0 ${(30 + ringT * 40).toFixed(0)}px ${alpha(GOLD, 0.22)}`,
+              }} />
+              <div style={{
+                position: 'absolute', left: CX - ringD / 2, top: CY - ringD / 2, width: ringD, height: ringD, borderRadius: '50%', opacity: ringOp,
+                border: `${ringW.toFixed(2)}px solid ${alpha('#fffaf0', 0.95)}`, boxSizing: 'border-box',
+              }} />
+            </>
+          )}
+
+          {/* 火花：沿径向拉长的细亮线 */}
+          {spOn && SPARKS.map((s, i) => {
+            const r = 160 + s.dist * spT;
+            const len = s.len * (1 - spLin) + 6;
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: CX + Math.cos(s.ang) * r - len / 2, top: CY + Math.sin(s.ang) * r * 0.8 - 2, width: len, height: 4, borderRadius: 2,
+                background: `linear-gradient(90deg, ${alpha('#fff3d6', 0)}, #fffaf0)`, transform: `rotate(${((s.ang * 180) / Math.PI).toFixed(1)}deg)`,
+                opacity: 1 - spLin, boxShadow: `0 0 10px ${alpha(GOLD, 0.8)}`,
+              }} />
+            );
+          })}
+
+          {/* 比分卡 */}
+          <div style={{
+            position: 'absolute', left: CX - CW / 2, top: CY - CH / 2, width: CW, height: CH, borderRadius: 34,
+            background: `linear-gradient(180deg, #1f2024 0%, ${L.surface} 100%)`, boxShadow: cardShadow, opacity: cardOp,
+            transform: `translateY(${dy.toFixed(2)}px) rotate(${rot.toFixed(3)}deg) scale(${scale.toFixed(4)})`,
+            filter: dof > 0.4 ? `blur(${dof.toFixed(2)}px)` : undefined, fontFamily: FONT.sans, color: L.ink,
+          }}>
+            {/* 顶缘金色发丝光 */}
+            <div style={{ position: 'absolute', left: 120, right: 120, top: 0, height: 2, background: `linear-gradient(90deg, ${alpha(GOLD, 0)}, ${alpha(GOLD, 0.8)}, ${alpha(GOLD, 0)})` }} />
+            {/* FULL TIME 签：从卡顶滑出 */}
+            <div style={{ position: 'absolute', left: 0, right: 0, top: -26, display: 'flex', justifyContent: 'center', overflow: 'hidden', height: 60 }}>
+              <div style={{
+                height: 52, padding: '0 24px', borderRadius: 26, background: GOLD, color: '#17130a', display: 'flex', alignItems: 'center',
+                font: `800 24px ${FONT.mono}`, letterSpacing: '0.12em', transform: `translateY(${mix(64, 0, tag).toFixed(2)}px)`,
+                boxShadow: `0 10px 30px -10px ${alpha(GOLD, 0.8)}`,
+              }}>
+                FULL TIME · 90+4′
+              </div>
+            </div>
+            {/* 主队 */}
+            <div style={{ position: 'absolute', left: 70, top: 88, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, width: 220 }}>
+              <Crest code={<ShotcraftMark size={64} tone="light" />} filled />
+              <div style={{ font: `750 44px ${FONT.sans}`, letterSpacing: '-0.03em' }}>{BRAND.short}</div>
+            </div>
+            {/* 客队 */}
+            <div style={{ position: 'absolute', right: 70, top: 88, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, width: 220 }}>
+              <Crest code="KEY" filled={false} />
+              <div style={{ font: `750 44px ${FONT.sans}`, letterSpacing: '-0.03em', color: L.ink2, whiteSpace: 'nowrap' }}>Keyframes</div>
+            </div>
+            {/* 比分 */}
+            <div style={{ position: 'absolute', left: 0, right: 0, top: 58, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 56, font: `860 220px ${FONT.sans}`, letterSpacing: '-0.05em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
+              <div style={{ position: 'relative', transform: `scale(${mix(1.16, 1, d1).toFixed(4)})` }}>
+                3
+                <div style={{ position: 'absolute', left: 6, right: 6, bottom: -6, height: 8, borderRadius: 4, background: GOLD, transformOrigin: '0 50%', transform: `scaleX(${underline.toFixed(4)})`, boxShadow: `0 0 18px ${alpha(GOLD, 0.6)}` }} />
+              </div>
+              <div style={{ width: 54, height: 12, borderRadius: 6, background: alpha(L.ink, 0.35) }} />
+              <div style={{ transform: `scale(${mix(1.16, 1, d2).toFixed(4)})`, color: L.ink2 }}>2</div>
+            </div>
+            {/* 赛事信息行 */}
+            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 34, textAlign: 'center', font: `600 26px ${FONT.mono}`, letterSpacing: '0.14em', color: L.ink3 }}>
+              MOTION CUP FINAL · BUILT ON REMOTION
+            </div>
+          </div>
+
+          {/* 碎片（画在卡上方，像从撞击面崩出） */}
+          {shOn && SHARDS.map((d, i) => {
+            const dx = Math.cos(d.ang) * d.dist * shT;
+            const dyy = Math.sin(d.ang) * d.dist * 0.75 * shT + 260 * shLin * shLin; // 先飞出再下坠
+            const s = d.size * (1 - 0.55 * shLin);
+            const flip = Math.abs(Math.cos(shLin * Math.PI * 1.6 + i));
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: CX + Math.cos(d.ang) * 300 + dx - s / 2, top: CY + Math.sin(d.ang) * 120 + dyy - s / 2, width: s, height: s,
+                clipPath: `polygon(${d.poly})`,
+                background: d.gold ? `linear-gradient(135deg, #8a6a2a, ${GOLD} 45%, #fff3cf 55%, #9c7a34)` : `linear-gradient(135deg, ${alpha('#ffffff', 0.9)}, ${alpha('#c9ccd4', 0.55)})`,
+                opacity: shLin < 0.7 ? 1 : 1 - (shLin - 0.7) / 0.3,
+                transform: `rotate(${(d.spin * shT).toFixed(1)}deg) scaleY(${Math.max(0.15, flip).toFixed(3)})`,
+                filter: i % 4 === 0 ? 'blur(2px)' : undefined,
+              }} />
+            );
+          })}
+
+          {/* 标题 + 副句 */}
+          <div style={{ position: 'absolute', left: 0, right: 0, top: CY + CH / 2 + 92, textAlign: 'center', font: `800 84px ${FONT.sans}`, letterSpacing: '-0.04em', color: L.ink, lineHeight: 1 }}>
+            <TextReveal text="Shotcraft lifts the" by="word" variant="rise" start={36} each={16} gap={4} />
+            <span style={{ color: GOLD }}>
+              <TextReveal text=" Cup." by="word" variant="rise" start={48} each={16} gap={4} />
+            </span>
+          </div>
+          <div style={{ position: 'absolute', left: 0, right: 0, top: CY + CH / 2 + 200, textAlign: 'center', font: `500 36px ${FONT.sans}`, color: L.ink2, letterSpacing: '-0.01em', opacity: ramp(frame, 52, 14, EASE.out), transform: `translateY(${mix(12, 0, ramp(frame, 52, 16, EASE.out)).toFixed(2)}px)` }}>
+            Camera moves I would have keyframed for a week.
+          </div>
+        </div>
+      </div>
+
+      {/* 落点白闪 */}
+      {flash > 0 && <div style={{ position: 'absolute', inset: 0, background: '#fffaf0', opacity: flash, mixBlendMode: 'screen' }} />}
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx

@@ -0,0 +1,123 @@
+// corner-spotlight-reveal —— 对标 clickup-30.mp4 41.5–44.6s：
+// 黑场上，左上角径向聚光从小到大扩张，把白色 video-shotcraft 镜头库界面逐步"点亮"，
+// 照到的区域显影、照不到的沉黑，最终全屏亮起。光即转场。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+
+const FONT = '"Avenir Next", "Helvetica Neue", Helvetica, sans-serif';
+
+// 灰阶镜头库界面（video-shotcraft 的 Shots 页，自绘，替代真 UI）
+const InboxPanel: React.FC = () => (
+  <div
+    style={{
+      width: 1920,
+      height: 1080,
+      background: '#f6f6f5',
+      fontFamily: FONT,
+      padding: '90px 120px',
+      boxSizing: 'border-box',
+      color: '#2c2c2c',
+    }}
+  >
+    <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
+      <div style={{ fontSize: 118, fontWeight: 700, letterSpacing: -2 }}>Shots</div>
+      <div
+        style={{
+          width: 0, height: 0, marginTop: 26,
+          borderLeft: '16px solid transparent',
+          borderRight: '16px solid transparent',
+          borderTop: '20px solid #3a3a3a',
+        }}
+      />
+    </div>
+    <div style={{ display: 'flex', gap: 64, marginTop: 90, fontSize: 44, color: '#555' }}>
+      <div style={{ background: '#e9e8f6', color: '#5b55c8', padding: '10px 34px', borderRadius: 14, fontWeight: 600 }}>All</div>
+      <div style={{ padding: '10px 0' }}>Camera</div>
+      <div style={{ padding: '10px 0' }}>Effects</div>
+      <div style={{ padding: '10px 0' }}>Data</div>
+      <div style={{ padding: '10px 0' }}>Outro</div>
+    </div>
+    {[0, 1, 2].map((row) => (
+      <div key={row} style={{ display: 'flex', alignItems: 'center', gap: 30, marginTop: row === 0 ? 96 : 64 }}>
+        <div style={{ width: 42, height: 42, border: '3px solid #c9c9c7', borderRadius: 10 }} />
+        <div style={{ width: 14, height: 14, borderRadius: 7, background: '#5b55c8' }} />
+        <div style={{ width: 56, height: 56, borderRadius: 28, background: '#efe4e2' }} />
+        <div>
+          <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
+            <div style={{ height: 22, width: 220 + ((row * 67) % 90), background: '#3f3f3f', borderRadius: 11 }} />
+            <div style={{ width: 8, height: 8, borderRadius: 4, background: '#bbb' }} />
+            <div style={{ height: 18, width: 260, background: '#c9c9c7', borderRadius: 9 }} />
+          </div>
+          <div style={{ display: 'flex', gap: 14, marginTop: 16 }}>
+            <div style={{ height: 18, width: 300, background: '#8f8bd8', borderRadius: 9, opacity: 0.75 }} />
+            <div style={{ height: 18, width: 340 - ((row * 91) % 120), background: '#d8d8d6', borderRadius: 9 }} />
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const CornerSpotlightReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 聚光半径扩张：全程匀速（用户裁决"整个过程要匀速"——严格 linear，无缓动）
+  // r+feather=1.85r 是光前沿；1.85*1300≈2400 恰在片尾盖满全屏对角，
+  // 保证扩张动作占满全片时长而不是前 1/3 就饱和
+  const r = interpolate(frame, [0, 100], [160, 1300], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 光心沿左上角匀速游移（linear）
+  const cx = interpolate(frame, [0, 96], [140, 420], { extrapolateRight: 'clamp' });
+  const cy = interpolate(frame, [0, 96], [90, 260], { extrapolateRight: 'clamp' });
+
+  // 软边宽度：扩张时边缘更羽化
+  const feather = r * 0.85;
+
+  // UI 轻微透视漂移（原片相机贴着界面缓推）
+  const drift = interpolate(frame, [0, 100], [0, 1]);
+  const scale = 1.75 - 0.28 * drift;
+  const tx = -40 + 70 * drift;
+  const ty = -30 + 50 * drift;
+
+  const mask = `radial-gradient(circle ${r + feather}px at ${cx}px ${cy}px, rgba(255,255,255,1) ${Math.max(
+    0,
+    ((r - feather * 0.25) / (r + feather)) * 100,
+  )}%, rgba(255,255,255,0) 100%)`;
+
+  return (
+    <AbsoluteFill style={{ background: '#000' }}>
+      <AbsoluteFill
+        style={{
+          WebkitMaskImage: mask,
+          maskImage: mask,
+          transform: `scale(${scale}) translate(${tx}px, ${ty}px) rotate(${-1.2 + 1.2 * drift}deg)`,
+          transformOrigin: '18% 12%',
+        }}
+      >
+        <InboxPanel />
+      </AbsoluteFill>
+      {/* 聚光自身的白热光晕（叠在界面上方，光心最亮） */}
+      <div
+        style={{
+          position: 'absolute',
+          left: cx - r * 0.7,
+          top: cy - r * 0.7,
+          width: r * 1.4,
+          height: r * 1.4,
+          borderRadius: '50%',
+          background: 'radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0.25) 45%, transparent 75%)',
+          filter: 'blur(26px)',
+          opacity: interpolate(frame, [0, 10, 60, 90], [0, 0.9, 0.55, 0], {
+            extrapolateRight: 'clamp',
+          }),
+          pointerEvents: 'none',
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+export const CORNER_SPOTLIGHT_REVEAL_DURATION = 130;