dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SheenSweepRetry.tsx

@@ -0,0 +1,275 @@
+// sheen-sweep-retry —— 单点扫光（高标准重试）：深墨主角卡上一道斜向高光带缓扫一次，被圆角裁住，无声的加冕。
+//
+// 第二轮重设计（暖沙展台 · 钛黑会员卡发布）：
+// - look = sand（米色 · 赤陶）。主角从"灰底上的 PRO 小卡"换成一张 900×567 的钛黑金属卡（video-shotcraft 导演卡），
+//   卡面是拉丝钛（横向发丝纹）+ 激光蚀刻的单色「镜刻」标志与 video-shotcraft 字标 / 持卡人 / 非接图标 + 香槟金芯片，
+//   带 8 层叠出的金属厚边。卡在右侧 3D 斜放（rotateY 朝向左侧文字栏、rotateX 微仰），左栏是编辑式标题
+//   「Cinematic, / by default.」。
+// - 扫光有物理动机：卡缓缓"转向光源"（rotateY 21°→14°）的同一时段，高光带掠过卡面——不是贴上去的特效，
+//   而是转角带来的反射。四约束照旧：单点（只扫主角卡）、圆角裁剪、只扫一次、扫前扫后无光效层。
+// - 光带三层：宽柔光（0.14）+ 窄亮芯（0.5）screen 叠在钛黑上；光带经过处，拉丝纹与蚀刻字被"照出来"
+//   （固定在卡面上的亮版副本，用随光带移动的同一条 115° 遮罩揭开），卡的上沿发丝线同步亮一下。
+// - 空间：Stage 左上主光 + 沙色地面；卡下两层软投影（接触影 + 远影）随入场高度收紧，不在 3D 层里。
+//
+// 时间表（30fps，共 150f）：
+//   0–36    卡入场：从下方 120px 处升起 + 转到 21°（弹簧 damping 24，慢、重、无回弹的奢侈感）；投影晚 4f 收紧
+//   6–44    左栏：眉题字距收拢 → 标题两行从线下升起（间隔 7f）→ 正文淡入上浮
+//   44–58   hold：卡静置，观众先看清卡面
+//   58–90   主动作：卡转向光源（smooth in-out，到 96f）+ 高光带扫过一次（32f，swift）
+//   92–108  余波：CTA 胶囊升起
+//   108–150 hold：卡极缓漂移（rotateY 再转 1°，ease-out 收住），尾段干净海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const SHEEN_SWEEP_RETRY_DURATION = 150;
+
+const L = LOOKS.sand;
+
+const W = 900;
+const H = 567; // ISO 卡比例 1.586
+const R = 38;
+const CX = 1262; // 卡心
+const CY = 520;
+
+const SWEEP_START = 58;
+const SWEEP_END = 90;
+const TURN_END = 96;
+
+const ENGRAVE = '#57534d'; // 蚀刻：比钛黑底亮两档的暖灰（静置时也读得出字标）
+const LIT = '#efe6d8'; // 光带下的蚀刻反光：暖白
+
+// 拉丝钛：横向发丝纹（两组不同周期叠出不规则感）
+const BRUSH =
+  'repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px),' +
+  'repeating-linear-gradient(180deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 7px)';
+
+// 蚀刻标志：激光雕刻按规范用单色版（取景框与斜切同色），标志本身不加发光 / 投影
+const Mark: React.FC<{ color: string; size?: number }> = ({ color, size = 66 }) => (
+  <ShotcraftMark size={size} frameColor={color} cutColor={color} />
+);
+
+const Contactless: React.FC<{ color: string }> = ({ color }) => (
+  <svg width={46} height={46} viewBox="0 0 24 24" style={{ display: 'block' }}>
+    {[4.5, 8, 11.5].map((r, i) => (
+      <path key={i} d={`M${6 + i * 3.2} ${12 - r * 0.7}a${r} ${r} 0 0 1 0 ${r * 1.4}`} fill="none" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
+    ))}
+  </svg>
+);
+
+// 卡面内容（蚀刻层）：tone = 字色；lit = 光带下的亮版（只换颜色与阴影）
+const Face: React.FC<{ tone: string; lit?: boolean }> = ({ tone, lit }) => {
+  // 蚀刻感：下沿 1px 亮、上沿 1px 暗（刻进去的槽）；亮版换成发光
+  const etch = lit ? `0 0 14px ${alpha(LIT, 0.5)}` : '0 1px 0 rgba(255,255,255,0.10), 0 -1px 0 rgba(0,0,0,0.6)';
+  return (
+    <div style={{ position: 'absolute', inset: 0, padding: '52px 60px 50px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', color: tone }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <Mark color={tone} />
+        <div style={{ ...type(42, 620), fontFamily: BRAND.font, letterSpacing: '0.01em', textShadow: etch }}>{BRAND.name}</div>
+        <div style={{ marginLeft: 'auto', filter: lit ? `drop-shadow(0 0 8px ${alpha(LIT, 0.5)})` : undefined }}>
+          <Contactless color={tone} />
+        </div>
+      </div>
+      <div style={{ flex: 1 }} />
+      <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+        <div>
+          <div style={{ ...type(22, 600, { caps: true }), letterSpacing: '0.3em', opacity: 0.8, textShadow: etch }}>Director</div>
+          <div style={{ ...type(36, 500, { mono: true }), letterSpacing: '0.16em', marginTop: 12, textShadow: etch }}>A. MORENO</div>
+        </div>
+        <div style={{ marginLeft: 'auto', ...type(30, 700, { caps: true }), letterSpacing: '0.34em', textShadow: etch }}>Studio</div>
+      </div>
+    </div>
+  );
+};
+
+// 香槟金芯片：拉丝金属 + 触点分割线
+const Chip: React.FC = () => (
+  <div
+    style={{
+      position: 'absolute', left: 60, top: 212, width: 116, height: 88, borderRadius: 16, overflow: 'hidden',
+      background: 'linear-gradient(135deg, #e9d3a6 0%, #b8955c 42%, #8c6a39 70%, #d9bd86 100%)',
+      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5)',
+    }}
+  >
+    <svg width={116} height={88} viewBox="0 0 116 88" style={{ position: 'absolute', inset: 0 }}>
+      <g stroke="rgba(70,48,18,0.55)" strokeWidth={1.4} fill="none">
+        <path d="M0 30H38M0 58H38M78 30H116M78 58H116M38 0V88M78 0V88" />
+        <rect x={38} y={22} width={40} height={44} rx={9} />
+      </g>
+    </svg>
+  </div>
+);
+
+export const SheenSweepRetry: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 卡入场：慢弹簧，无回弹 ——
+  const enter = springAt(frame, 0, { damping: 24, stiffness: 70, mass: 1.1 });
+  const shadowIn = springAt(frame, 4, { damping: 24, stiffness: 70, mass: 1.1 }); // 投影晚 4f
+  // —— 转向光源：与扫光同段 ——
+  const turn = ramp(frame, SWEEP_START - 4, TURN_END - SWEEP_START + 4, EASE.smooth);
+  const drift = ramp(frame, TURN_END, 150 - TURN_END, EASE.out);
+  const rotY = mix(36, 21, enter) - 7 * turn - 1.5 * drift;
+  const rotX = mix(16, 9, enter) - 1.5 * turn;
+  const lift = mix(120, 0, enter) - 6 * drift;
+  const scale = mix(0.94, 1, enter);
+  const appear = ramp(frame, 0, 8, EASE.out);
+
+  // —— 扫光：只一次，条件挂载 ——
+  const sweepOn = frame >= SWEEP_START && frame <= SWEEP_END;
+  const p = ramp(frame, SWEEP_START, SWEEP_END - SWEEP_START, EASE.swift);
+  // 光带中心从卡左外 0.45W 走到卡右外 0.45W；遮罩/光带宽 2W，中心在其 50% 处
+  const bandC = mix(-0.45 * W, 1.45 * W, p);
+  const bandX = bandC - W;
+  const bandMask = `linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%)`;
+  const topX = bandC + ((H / 2) * Math.cos((65 * Math.PI) / 180)) / Math.sin((115 * Math.PI) / 180);
+
+  const cta = ramp(frame, 92, 16, EASE.snappy);
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', fontFamily: FONT.sans }}>
+      <Stage look={L} keyLight={{ x: 0.3, y: 0.08 }} fill={{ x: 0.9, y: 0.95 }} horizon={0.86} intensity={1}>
+        {/* 展台地面：下 1/4 微微压暗的桌面 + 远处一条柔和的桌沿 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 820, bottom: 0, background: `linear-gradient(180deg, ${alpha(L.shadow, 0)} 0%, ${alpha(L.shadow, 0.08)} 100%)` }} />
+      </Stage>
+
+      {/* 卡下投影：接触影（小而实）+ 远影（大而虚），随入场高度收紧 */}
+      <div
+        style={{
+          position: 'absolute', left: CX - W * 0.42 + 40, top: CY + H * 0.44 + mix(60, 0, shadowIn), width: W * 0.84, height: 70,
+          borderRadius: '50%', background: alpha(L.shadow, mix(0.08, 0.34, shadowIn)), filter: 'blur(26px)', opacity: appear,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute', left: CX - W * 0.5 + 90, top: CY + H * 0.3, width: W, height: 220,
+          borderRadius: '50%', background: alpha(L.shadow, mix(0.05, 0.2, shadowIn)), filter: 'blur(70px)', opacity: appear,
+        }}
+      />
+
+      {/* 主角卡：3D 斜放 */}
+      <div style={{ position: 'absolute', inset: 0, perspective: 2400, perspectiveOrigin: `${CX}px ${CY - 120}px` }}>
+        <div
+          style={{
+            position: 'absolute', left: CX - W / 2, top: CY - H / 2, width: W, height: H, opacity: appear,
+            transformStyle: 'preserve-3d',
+            transform: `translateY(${lift.toFixed(2)}px) rotateX(${rotX.toFixed(3)}deg) rotateY(${rotY.toFixed(3)}deg) scale(${scale.toFixed(4)})`,
+          }}
+        >
+          {/* 金属厚边：8 层叠出约 6px 厚度，越往后越暗 */}
+          {Array.from({ length: 8 }, (_, i) => (
+            <div
+              key={i}
+              style={{
+                position: 'absolute', inset: 0, borderRadius: R,
+                transform: `translateZ(${(-(i + 1) * 0.8).toFixed(1)}px)`,
+                background: i < 2 ? '#8d877e' : mix(0, 1, i / 7) > 0.5 ? '#2a2826' : '#5c5852',
+              }}
+            />
+          ))}
+          {/* 正面 */}
+          <div
+            style={{
+              position: 'absolute', inset: 0, borderRadius: R, overflow: 'hidden', // 圆角裁剪：一切光都被卡边裁住
+              background: 'linear-gradient(140deg, #2d2b29 0%, #1b1a19 42%, #121110 72%, #1d1c1a 100%)',
+              boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1.5px 0 rgba(255,255,255,0.16)',
+            }}
+          >
+            <div style={{ position: 'absolute', inset: 0, backgroundImage: BRUSH, opacity: 0.6 }} />
+            {/* 静态受光：左上主光方向 */}
+            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 70% 90% at 12% 0%, rgba(255,240,220,0.09) 0%, rgba(255,240,220,0) 62%)' }} />
+            <Chip />
+            <Face tone={ENGRAVE} />
+
+            {sweepOn && (
+              <>
+                {/* 光带下：拉丝纹被照亮（固定在卡面，遮罩随光带走） */}
+                <div
+                  style={{
+                    position: 'absolute', inset: 0, backgroundImage: BRUSH.replace(/0\.05\)/g, '0.22)'), mixBlendMode: 'screen',
+                    WebkitMaskImage: bandMask, maskImage: bandMask, WebkitMaskSize: `${2 * W}px 100%`, maskSize: `${2 * W}px 100%`,
+                    WebkitMaskPosition: `${bandX.toFixed(1)}px 0`, maskPosition: `${bandX.toFixed(1)}px 0`,
+                    WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
+                  }}
+                />
+                {/* 光带下：蚀刻字反光 */}
+                <div
+                  style={{
+                    position: 'absolute', inset: 0,
+                    WebkitMaskImage: bandMask, maskImage: bandMask, WebkitMaskSize: `${2 * W}px 100%`, maskSize: `${2 * W}px 100%`,
+                    WebkitMaskPosition: `${bandX.toFixed(1)}px 0`, maskPosition: `${bandX.toFixed(1)}px 0`,
+                    WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
+                  }}
+                >
+                  <Face tone={LIT} lit />
+                </div>
+                {/* 宽柔光 + 窄亮芯：screen 叠在钛黑上 */}
+                <div
+                  style={{
+                    position: 'absolute', top: 0, left: bandX, width: 2 * W, height: H, mixBlendMode: 'screen', pointerEvents: 'none',
+                    background:
+                      'linear-gradient(115deg, transparent 36%, rgba(255,244,228,0.06) 43%, rgba(255,244,228,0.14) 47.5%, rgba(255,248,238,0.5) 50%, rgba(255,244,228,0.14) 52.5%, rgba(255,244,228,0.06) 57%, transparent 64%)',
+                  }}
+                />
+                {/* 上沿发丝线受光 */}
+                <div
+                  style={{
+                    position: 'absolute', left: 0, top: 0, right: 0, height: 2,
+                    background: `linear-gradient(90deg, transparent ${(topX - 170).toFixed(1)}px, rgba(255,250,240,0.85) ${topX.toFixed(1)}px, transparent ${(topX + 170).toFixed(1)}px)`,
+                  }}
+                />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 左栏：编辑式标题 */}
+      <div style={{ position: 'absolute', left: 150, top: 256, width: 640 }}>
+        <div
+          style={{
+            ...type(24, 700, { caps: true }), color: L.accent, opacity: ramp(frame, 6, 18, EASE.out),
+            letterSpacing: `${mix(0.5, 0.28, ramp(frame, 6, 26, EASE.snappy)).toFixed(3)}em`, display: 'flex', alignItems: 'center', gap: 16,
+          }}
+        >
+          <span style={{ width: 10, height: 10, borderRadius: 5, background: L.accent, display: 'inline-block' }} />
+          {BRAND.name}
+        </div>
+        <div style={{ marginTop: 34 }}>
+          <TextReveal
+            text={'Cinematic,\nby default.'}
+            by="line"
+            variant="rise"
+            start={12}
+            each={24}
+            gap={7}
+            style={{ ...type(118, 760), letterSpacing: '-0.045em', lineHeight: 1.06, color: L.ink }}
+          />
+        </div>
+        <div
+          style={{
+            marginTop: 40, ...type(34, 450), lineHeight: 1.38, color: L.ink2,
+            opacity: ramp(frame, 30, 18, EASE.out), transform: `translateY(${mix(14, 0, ramp(frame, 30, 22, EASE.snappy)).toFixed(1)}px)`,
+          }}
+        >
+          Shot recipe cards for your agent.
+          <br />
+          From screenshot to showreel.
+        </div>
+        <div
+          style={{
+            marginTop: 48, display: 'inline-flex', alignItems: 'center', gap: 14, padding: '18px 30px', borderRadius: 999,
+            background: L.ink, color: L.surface, ...type(30, 600),
+            boxShadow: `0 10px 26px -10px ${alpha(L.shadow, 0.5)}`,
+            opacity: cta, transform: `translateY(${mix(22, 0, cta).toFixed(1)}px)`,
+          }}
+        >
+          Make your first film
+          <span style={{ color: '#f0a07c' }}>→</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SpotlightSweepReveal.tsx

@@ -0,0 +1,229 @@
+// spotlight-sweep-reveal —— 聚光扫字：暗场里几乎不可见的标题，被一盏摆动的追光扫亮，光到哪哪亮。
+//
+// 第二轮重设计（剧场首演夜 · 天鹅绒幕布）：
+// - look = custom「velvet」：酒红黑天鹅绒幕布 + 钨丝暖白追光 + 香槟金点缀（库里没有的剧场色）。
+//   标题是 220px 衬线「Craft the shot.」（video-shotcraft 品牌短句，roman + italic 混排，剧院海报感），
+//   全亮后收在 video-shotcraft 字标上——一支宣传片的首映夜。
+// - 光是物理的：灯头在画外正上方；追光像钟摆——光斑沿一条下凹的弧线摆（中心最低），两个来回后阻尼收拢，
+//   x 与速度同时归零停在正中（不是纯 sin 急刹）。光斑照到哪里，哪里的字（亮版副本 + 柔晕）和
+//   幕布褶皱（亮版天鹅绒）一起被揭开——暗场里常驻的只有 0.07 的字影和几乎看不见的幕布。
+// - 开灯有"钨丝预热"闪两下（确定性闪烁表）；停稳后光圈像追光灯的 iris 一样张开铺满整行标题 =
+//   全亮定格（扩散 out-cubic、光锥消散 linear，解耦判例），之后留一层顶光暖幕 + 光束里的浮尘让 hold 活着。
+// - 空间：幕布（远景，褶皱竖纹）→ 标题（中景）→ 舞台台口地板（近景，台沿高光 + 地面光斑反射）。
+//
+// 时间表（30fps，共 170f）：
+//   0–4     暗场：幕布与字影几乎不可见（第一帧就有台沿与顶光余光）
+//   4–10    开灯：钨丝预热闪烁两下后稳定
+//   8–121   主动作：追光从左侧起摆，两个半来回（周期 50f），后 1.5 个来回阻尼收拢，121f 停在正中
+//   121–141 iris 张开：光圈 360→1080px（out-cubic），标题全亮；光锥 20f 线性收成柔和顶光
+//   128–152 跟随：眉题字距收拢、副标题与品牌行淡入上浮
+//   152–170 hold：顶光暖幕 + 浮尘缓漂，干净海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, Vignette, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { SERIF, alpha, type } from '../../_fixtures/Look';
+import { ShotcraftWordmark } from '../../_fixtures/Brand';
+
+export const SPOTLIGHT_SWEEP_REVEAL_DURATION = 170;
+
+// 自定义 look「velvet」
+const V = {
+  bg0: '#1a0a0d', bg1: '#0f0507', bg2: '#070203',
+  velvet: '#5a1622', velvetDeep: '#22080c',
+  warm: '#ffe6c2', // 钨丝暖白
+  ink: '#f8efe2',
+  gold: '#e3bd7f',
+  ink2: '#c9b39d',
+};
+
+const CX = 960;
+const CY = 470; // 标题中线
+const AMP = 600; // 摆幅
+const PERIOD = 50;
+const SWING0 = 8; // 起摆
+const SWING_END = SWING0 + PERIOD * 2.25; // 121：θ 从 -π/2 走到 4π，sin=0 落在正中
+const IRIS_END = SWING_END + 20; // 141
+const LAMP_Y = -160;
+const FLOOR_Y = 868; // 台沿
+const R0 = 360; // 摆动期光圈半径
+const outCubic = bezier(0.215, 0.61, 0.355, 1);
+
+const rnd = (i: number) => {
+  const s = Math.sin(i * 91.7 + 13.1) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+// 光斑位置：钟摆。θ 从 -π/2（最左）起，第一来回满幅，之后包络 smooth 收到 0（x 与速度同时归零）
+const spotAt = (f: number) => {
+  const sf = Math.min(Math.max(f, SWING0), SWING_END);
+  const th = -Math.PI / 2 + (2 * Math.PI * (sf - SWING0)) / PERIOD;
+  const env = 1 - ramp(sf, SWING0 + PERIOD * 0.75, SWING_END - SWING0 - PERIOD * 0.75, EASE.smooth);
+  const u = Math.sin(th) * env; // -1..1
+  return { x: CX + AMP * u, y: CY + 26 - 44 * u * u }; // 下凹弧：中心最低
+};
+
+// 钨丝预热闪烁（4–10f）
+const FLICKER = [0, 0.55, 0.15, 0.8, 0.45, 1];
+const lampOn = (f: number) => (f < 4 ? 0 : f >= 10 ? 1 : FLICKER[Math.min(5, f - 4)]);
+
+const Title: React.FC<{ color: string; style?: React.CSSProperties }> = ({ color, style }) => (
+  <div
+    style={{
+      position: 'absolute', left: 0, right: 0, top: CY - 130, height: 260, display: 'flex', alignItems: 'center', justifyContent: 'center',
+      ...style,
+    }}
+  >
+    <div style={{ fontFamily: SERIF, fontSize: 220, fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, color, whiteSpace: 'nowrap' }}>
+      Craft the <span style={{ fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.02em' }}>shot.</span>
+    </div>
+  </div>
+);
+
+// 天鹅绒幕布：不等宽竖褶（三组周期叠加）+ 顶部挂杆暗、下摆略亮
+const CURTAIN =
+  `repeating-linear-gradient(90deg, rgba(0,0,0,0.55) 0px, rgba(0,0,0,0) 46px, rgba(255,210,200,0.10) 70px, rgba(0,0,0,0) 96px, rgba(0,0,0,0.55) 132px),` +
+  `repeating-linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0.3) 210px, rgba(0,0,0,0) 330px),` +
+  `linear-gradient(180deg, ${V.velvetDeep} 0%, ${V.velvet} 55%, #43101a 100%)`;
+
+const Curtain: React.FC<{ opacity: number; style?: React.CSSProperties }> = ({ opacity, style }) => (
+  <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: FLOOR_Y, backgroundImage: CURTAIN, opacity, ...style }} />
+);
+
+export const SpotlightSweepReveal: React.FC = () => {
+  const f = useCurrentFrame();
+  const on = lampOn(f);
+  const { x, y } = spotAt(f);
+
+  // iris 张开 + 全亮（扩散 out-cubic）；光锥收成柔和顶光（linear）
+  const iris = ramp(f, SWING_END, IRIS_END - SWING_END, outCubic);
+  const coneFade = 1 - 0.7 * ramp(f, SWING_END, IRIS_END - SWING_END, EASE.linear);
+  const radius = mix(R0, 1080, iris);
+  const ry = mix(R0 * 0.92, 480, iris);
+  const breathe = 1 + 0.04 * Math.sin(f / 17) * ramp(f, IRIS_END, 20, EASE.smooth);
+
+  const spotMask = `radial-gradient(ellipse ${radius.toFixed(1)}px ${ry.toFixed(1)}px at ${x.toFixed(1)}px ${y.toFixed(1)}px, #000 0%, rgba(0,0,0,0.92) 42%, rgba(0,0,0,0.35) 72%, transparent 100%)`;
+  const maskStyle: React.CSSProperties = { WebkitMaskImage: spotMask, maskImage: spotMask };
+
+  // 光锥：灯头窄口 → 光斑左右切点
+  const topHalf = 40;
+  const poolHalf = mix(R0 * 1.05, 1300, iris);
+  const coneBottom = y + mix(R0 * 0.8, 420, iris);
+  const cone = `${CX - topHalf},${LAMP_Y} ${CX + topHalf},${LAMP_Y} ${x + poolHalf},${coneBottom} ${x - poolHalf},${coneBottom}`;
+
+  // 光束浮尘：沿光锥轴向分布，缓慢上浮 + 横漂（确定性）
+  const motes = Array.from({ length: 56 }, (_, i) => {
+    const u = rnd(i);
+    const v = rnd(i + 100) - 0.5;
+    const drift = ((f * (0.35 + rnd(i + 200) * 0.5)) % 160) / 160;
+    const uu = (u + 1 - drift * 0.4) % 1;
+    const yy = mix(LAMP_Y + 120, coneBottom - 40, uu);
+    const k = (yy - LAMP_Y) / (coneBottom - LAMP_Y);
+    const half = mix(topHalf, poolHalf, k);
+    const axisX = mix(CX, x, k);
+    const xx = axisX + v * half * 1.6 + Math.sin(f / 23 + i) * 7;
+    const r = 0.9 + rnd(i + 300) * 1.8;
+    const tw = 0.35 + 0.65 * Math.abs(Math.sin(f / (11 + rnd(i + 400) * 9) + i));
+    return { xx, yy, r, a: (0.16 + rnd(i + 500) * 0.4) * tw };
+  });
+
+  const kicker = ramp(f, SWING_END + 7, 22, EASE.snappy);
+  const sub = ramp(f, SWING_END + 13, 22, EASE.snappy);
+
+  return (
+    <AbsoluteFill style={{ background: `linear-gradient(180deg, ${V.bg0} 0%, ${V.bg1} 60%, ${V.bg2} 100%)`, overflow: 'hidden', fontFamily: FONT.sans }}>
+      {/* 远景：幕布常驻极暗 */}
+      <Curtain opacity={0.16} />
+      {/* 顶光余光：灯头口漏下来的一点暖光（常驻，第一帧就有） */}
+      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 30% 22% at 50% 0%, ${alpha(V.warm, 0.1)} 0%, ${alpha(V.warm, 0)} 100%)` }} />
+
+      {/* 幕布被照亮的部分：亮版幕布，随光斑遮罩 */}
+      <div style={{ position: 'absolute', inset: 0, opacity: on * breathe, ...maskStyle }}>
+        <Curtain opacity={0.95} />
+        {/* 暖光染色 */}
+        <div style={{ position: 'absolute', inset: 0, background: alpha('#ff9a6a', 0.08), mixBlendMode: 'screen' }} />
+      </div>
+
+      {/* 台口地板：近景 */}
+      <div style={{ position: 'absolute', left: 0, right: 0, top: FLOOR_Y, bottom: 0, background: 'linear-gradient(180deg, #1c0d0c 0%, #0b0505 100%)' }} />
+      <div style={{ position: 'absolute', left: 0, right: 0, top: FLOOR_Y, height: 2, background: `linear-gradient(90deg, transparent, ${alpha(V.warm, 0.14)}, transparent)` }} />
+      {/* 地面光斑：追光落到台面的那一小块 */}
+      <div
+        style={{
+          position: 'absolute', inset: 0, opacity: on * coneFade * 0.9,
+          background: `radial-gradient(ellipse ${(poolHalf * 0.9).toFixed(0)}px 70px at ${x.toFixed(1)}px ${FLOOR_Y + 60}px, ${alpha(V.warm, 0.22)} 0%, ${alpha(V.warm, 0.06)} 55%, ${alpha(V.warm, 0)} 100%)`,
+        }}
+      />
+
+      {/* 字影：暗场里常驻的 0.07 */}
+      <Title color={V.ink} style={{ opacity: 0.07 }} />
+
+      {/* 光锥：柔边体积光 + 浮尘 */}
+      <div style={{ position: 'absolute', inset: 0, opacity: on * coneFade }}>
+        <svg viewBox="0 0 1920 1080" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
+          <defs>
+            <linearGradient id="ssr-beam" x1="0" y1={LAMP_Y} x2="0" y2={coneBottom} gradientUnits="userSpaceOnUse">
+              <stop offset="0" stopColor={V.warm} stopOpacity="0.26" />
+              <stop offset="0.6" stopColor={V.warm} stopOpacity="0.07" />
+              <stop offset="1" stopColor={V.warm} stopOpacity="0" />
+            </linearGradient>
+            <filter id="ssr-soft" x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="18" />
+            </filter>
+            <clipPath id="ssr-clip">
+              <polygon points={cone} />
+            </clipPath>
+          </defs>
+          <polygon points={cone} fill="url(#ssr-beam)" filter="url(#ssr-soft)" />
+          <g clipPath="url(#ssr-clip)">
+            {motes.map((m, i) => (
+              <circle key={i} cx={m.xx} cy={m.yy} r={m.r} fill={V.warm} opacity={m.a} />
+            ))}
+          </g>
+        </svg>
+      </div>
+
+      {/* 墙上光斑：暖白椭圆，硬一点的芯 + 长软边 */}
+      <div
+        style={{
+          position: 'absolute', inset: 0, opacity: on * mix(1, 0.55, iris) * breathe,
+          background: `radial-gradient(ellipse ${(radius * 1.2).toFixed(0)}px ${(ry * 1.1).toFixed(0)}px at ${x.toFixed(1)}px ${y.toFixed(1)}px, ${alpha(V.warm, 0.16)} 0%, ${alpha(V.warm, 0.07)} 48%, ${alpha(V.warm, 0)} 100%)`,
+          mixBlendMode: 'screen',
+        }}
+      />
+
+      {/* 亮版标题：随光斑遮罩；底下垫一层同遮罩柔晕（被照亮的字边微溢光） */}
+      <div style={{ position: 'absolute', inset: 0, opacity: on, ...maskStyle }}>
+        <Title color={V.warm} style={{ filter: 'blur(16px)', opacity: 0.5 }} />
+        <Title color={V.ink} />
+      </div>
+
+      {/* 眉题 + 副标题（全亮后入场） */}
+      <div
+        style={{
+          position: 'absolute', left: 0, right: 0, top: CY - 210, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 22,
+          opacity: kicker, ...type(24, 650, { caps: true }), letterSpacing: `${mix(0.62, 0.36, kicker).toFixed(3)}em`, color: V.gold,
+        }}
+      >
+        <span style={{ width: mix(0, 70, kicker), height: 1, background: alpha(V.gold, 0.6) }} />
+        Tonight · World premiere
+        <span style={{ width: mix(0, 70, kicker), height: 1, background: alpha(V.gold, 0.6) }} />
+      </div>
+      <div
+        style={{
+          position: 'absolute', left: 0, right: 0, top: CY + 170, textAlign: 'center',
+          opacity: sub, transform: `translateY(${mix(18, 0, sub).toFixed(1)}px)`,
+        }}
+      >
+        <div style={{ ...type(44, 450), color: V.ink2 }}>
+          Cinematic product videos, crafted by your agent.
+        </div>
+        <div style={{ marginTop: 22, display: 'flex', justifyContent: 'center', opacity: ramp(f, SWING_END + 22, 18, EASE.out) }}>
+          <ShotcraftWordmark size={30} tone="dark" color={V.ink} markScale={1.7} gap={14} />
+        </div>
+      </div>
+
+      <Vignette strength={0.62} inner={0.36} color="#050102" />
+      <Grain opacity={0.09} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};