dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/InvisibleCut.tsx

@@ -0,0 +1,272 @@
+// invisible-cut：前景遮挡隐形切——离镜头极近的失焦前景物贴脸横扫，糊满全屏的那一两帧里
+// 背景从 A 无痕硬切成 B，前景扫出画时观众以为还是同一镜。（invisible-cut + foreground-occlusion-swipe）
+//
+// 第二轮重设计（暖沙生活方式 · "点下预订，一晃就订好了"）：
+// - look = sand（米色 · 赤陶 · 靛蓝点缀），衬线标题 + 无衬线 UI；产品 = video-shotcraft 的成片渲染页。
+//   A：发布片镜头详情——左侧 860px 程序绘制的沙丘日落"镜头画面"（角标 = 镜刻标志 + 镜头号），右侧衬线大标题、
+//   镜头数/片长、规格与赤陶「Render」大按钮；B：渲染完成——左侧 168px 衬线「That's a wrap.」，右侧一张票根卡
+//   （顶部还是那张沙丘画面 = 视觉连续，打孔线、大号渲染编号、赤陶对勾印章）。因果是一条线：按下 Render → 一晃 → 片子出好了。
+//   版式左右互换，换景幅度大但不突兀。
+// - 遮挡物 = 贴着镜头掠过的失焦深棕前景（像镜头前走过一根立柱）：纯渐变绘制（中心实、两侧 340px 软边 = 失焦 +
+//   运动模糊的观感），前缘一道赤陶轮廓光读作"受光的物体"；前方 640px 软投影先扫过页面（近物遮光）。
+//   不用 CameraMotionBlur（12 倍采样太贵），软边渐变本身就是糊。
+// - 一条 take 的错觉：全程一条恒定方向的慢横移（内容 +40→−40px，smooth 缓动起止）贯穿切点；
+//   遮挡物同向但快 50 倍（近大远小的视差）；切前 A 被"带风"拖左 28px（ease-in），切后 B 从右 28px 回稳（ease-out 14f）。
+//
+// 时间表（30fps，共 110f）：
+//   0–24    A 静置（首帧即完整画面），横移极缓起步，照片里的日轮微微呼吸
+//   24–32   预备：Render 按钮按下（0.96 缩放 + 压暗 6f）→ 文案换成「Rendering…」
+//   32–46   遮挡物右→左扫过 14f（bezier 0.3,0,0.7,1）；39f 实心区盖满 1920，硬切 A→B
+//   39–53   B 从右回稳；46–64 印章弹簧落座、对勾描画；45–68 说明行与确认码错峰升起
+//   70–110  hold 40f：横移收尾、日轮呼吸
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, bezier, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, alpha, springAt, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const INVISIBLE_CUT_DURATION = 110;
+
+const S = LOOKS.sand;
+const PAD = 120;
+const PRESS = 24; // 按下 Render
+const SW_START = 32; // 遮挡物入画
+const SW_END = 46; // 遮挡物出画
+const CUT = 39; // 硬切：实心区盖满画幅的那一帧
+const SOFT = 340; // 遮挡物软边宽
+const CORE = 2600; // 遮挡物实心宽（> 1920，留出 >1 帧的全遮窗口）
+const OCC_W = CORE + SOFT * 2;
+const B_SHIFT = 40; // B 页排版右移量（抵消横移终点 −40）
+
+// 遮挡物左缘位置：从画右外 → 画左外
+const SWEEP_EASE = bezier(0.3, 0, 0.7, 1); // 起止有加减速、中段最快
+const occX = (f: number) => mix(1940, -OCC_W - 20, ramp(f, SW_START, SW_END - SW_START, SWEEP_EASE));
+
+// ───────────── 程序绘制的沙丘日落 ─────────────
+const Dunes: React.FC<{ w: number; h: number; f: number; id: string }> = ({ w, h, f, id }) => {
+  const breathe = 1 + 0.04 * Math.sin(f / 16);
+  return (
+    <svg width={w} height={h} viewBox="0 0 860 760" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
+      <defs>
+        <linearGradient id={`sky${id}`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#d98a5c" />
+          <stop offset="0.4" stopColor="#eeae78" />
+          <stop offset="0.6" stopColor="#f8d2a0" />
+        </linearGradient>
+        <radialGradient id={`sun${id}`} cx="0.5" cy="0.5" r="0.5">
+          <stop offset="0" stopColor="#ffe6bf" stopOpacity={0.85} />
+          <stop offset="0.4" stopColor="#ffd9a6" stopOpacity={0.45} />
+          <stop offset="1" stopColor="#ffd9a6" stopOpacity={0} />
+        </radialGradient>
+        <linearGradient id={`d1${id}`} x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#e09a63" />
+          <stop offset="1" stopColor="#c8743f" />
+        </linearGradient>
+        <linearGradient id={`d2${id}`} x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#c76b38" />
+          <stop offset="1" stopColor="#9c4724" />
+        </linearGradient>
+        <linearGradient id={`d3${id}`} x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stopColor="#8f3f1f" />
+          <stop offset="1" stopColor="#5e2611" />
+        </linearGradient>
+        <linearGradient id={`sh${id}`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#3a160a" stopOpacity={0} />
+          <stop offset="0.6" stopColor="#3a160a" stopOpacity={0} />
+          <stop offset="1" stopColor="#3a160a" stopOpacity={0.35} />
+        </linearGradient>
+      </defs>
+      <rect width={860} height={760} fill={`url(#sky${id})`} />
+      <circle cx={560} cy={400} r={190 * breathe} fill={`url(#sun${id})`} opacity={0.95} />
+      <circle cx={560} cy={400} r={56} fill="#fffbf2" />
+      {/* 远丘 */}
+      <path d="M0 440 C 140 400 260 420 380 440 C 520 462 640 410 860 420 L860 760 L0 760 Z" fill={`url(#d1${id})`} />
+      {/* 中丘：脊线左亮右暗 */}
+      <path d="M0 540 C 120 470 230 460 330 500 C 430 540 520 470 640 486 C 740 498 800 530 860 520 L860 760 L0 760 Z" fill={`url(#d2${id})`} />
+      {/* 脊线受光：沿中丘脊一道亮边 */}
+      <path d="M0 540 C 120 470 230 460 330 500 C 430 540 520 470 640 486" fill="none" stroke="#f3b27a" strokeWidth={3} opacity={0.55} />
+      {/* 近丘 */}
+      <path d="M0 650 C 160 590 300 600 430 640 C 560 680 700 600 860 620 L860 760 L0 760 Z" fill={`url(#d3${id})`} />
+      {/* 营地：三顶小帐篷剪影 + 一点暖灯 */}
+      {[0, 1, 2].map((i) => (
+        <g key={i} transform={`translate(${196 + i * 46} ${598 - i * 4})`}>
+          <path d="M0 0 L 18 -26 L 36 0 Z" fill="#3b1a0c" />
+          <circle cx={18} cy={-6} r={3.2} fill="#ffd38a" opacity={0.9} />
+        </g>
+      ))}
+      <rect width={860} height={760} fill={`url(#sh${id})`} />
+    </svg>
+  );
+};
+
+// ───────────── A：发布片镜头详情 ─────────────
+const PageA: React.FC<{ f: number }> = ({ f }) => {
+  const down = ramp(f, PRESS, 4, EASE.out) * (1 - ramp(f, PRESS + 5, 8, EASE.out));
+  const reserving = f >= PRESS + 4;
+  return (
+    <>
+      <div style={{
+        position: 'absolute', left: PAD, top: 160, width: 860, height: 760, borderRadius: 36, overflow: 'hidden',
+        boxShadow: `0 2px 4px ${alpha(S.shadow, 0.12)}, 0 40px 90px -30px ${alpha(S.shadow, 0.45)}`,
+      }}>
+        <Dunes w={860} h={760} f={f} id="a" />
+        <div style={{
+          position: 'absolute', left: 32, top: 32, height: 60, padding: '0 24px', borderRadius: 30, display: 'flex', alignItems: 'center', gap: 12,
+          background: 'rgba(255,248,238,0.86)', boxShadow: `0 8px 24px -8px ${alpha(S.shadow, 0.4)}`,
+          ...type(30, 650), color: S.ink,
+        }}>
+          <ShotcraftMark size={34} tone="light" /> Shot 03 <span style={{ color: S.ink2, fontWeight: 500 }}>· Golden hour</span>
+        </div>
+      </div>
+
+      <div style={{ position: 'absolute', left: 1064, top: 176, width: 736 }}>
+        <div style={{ ...type(28, 700, { caps: true }), letterSpacing: '0.14em', color: S.accent }}>Launch film · Final cut</div>
+        <div style={{ fontFamily: SERIF, fontSize: 92, fontWeight: 500, lineHeight: 1.0, letterSpacing: '-0.025em', color: S.ink, marginTop: 26 }}>
+          Direct the film.<br />Let the <i style={{ color: S.accent }}>agent</i><br />shoot it.
+        </div>
+        <div style={{ display: 'flex', marginTop: 44, borderTop: `1.5px solid ${S.line}`, borderBottom: `1.5px solid ${S.line}` }}>
+          {[['Shots', '12 cuts'], ['Length', '0:45 · 30fps']].map(([k, v], i) => (
+            <div key={k} style={{ flex: 1, padding: '22px 0', paddingLeft: i ? 32 : 0, borderLeft: i ? `1.5px solid ${S.line}` : undefined }}>
+              <div style={{ ...type(26, 600, { caps: true }), letterSpacing: '0.1em', color: S.ink3 }}>{k}</div>
+              <div style={{ ...type(40, 600), color: S.ink, marginTop: 6 }}>{v}</div>
+            </div>
+          ))}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginTop: 34 }}>
+          <span style={{ ...type(76, 700), color: S.ink }}>1080p</span>
+          <span style={{ ...type(32, 500), color: S.ink2 }}>h264 · beat-synced SFX</span>
+        </div>
+        <div style={{
+          marginTop: 34, height: 116, borderRadius: 58, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18,
+          background: `linear-gradient(180deg, #d0643a 0%, ${S.accent} 100%)`,
+          boxShadow: `inset 0 1px 0 rgba(255,255,255,0.3), 0 ${mix(18, 6, down)}px ${mix(40, 16, down)}px -12px ${alpha('#8a3414', 0.55)}`,
+          transform: `scale(${(1 - 0.04 * down).toFixed(4)})`, filter: down > 0.01 ? `brightness(${1 - 0.12 * down})` : undefined,
+          ...type(42, 650), color: S.onAccent,
+        }}>
+          {reserving && (
+            <span style={{
+              width: 30, height: 30, borderRadius: 15, border: `4px solid ${alpha(S.onAccent, 0.35)}`, borderTopColor: S.onAccent,
+              transform: `rotate(${(f - PRESS) * 24}deg)`, boxSizing: 'border-box',
+            }} />
+          )}
+          {reserving ? 'Rendering…' : 'Render'}
+        </div>
+      </div>
+    </>
+  );
+};
+
+// ───────────── B：渲染完成 ─────────────
+const PageB: React.FC<{ f: number }> = ({ f }) => {
+  const seal = springAt(f, CUT + 7, { damping: 13, stiffness: 190 });
+  const check = ramp(f, CUT + 12, 14, EASE.out);
+  const rows = [0, 1, 2].map((i) => ramp(f, CUT + 6 + i * 5, 18, EASE.snappy));
+  return (
+    <>
+      <div style={{ position: 'absolute', left: PAD, top: 214, width: 900 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16, ...type(28, 700, { caps: true }), letterSpacing: '0.14em', color: S.accent }}>
+          <span style={{ width: 14, height: 14, borderRadius: 7, background: S.accent }} />
+          Render complete
+        </div>
+        <div style={{ fontFamily: SERIF, fontSize: 168, fontWeight: 500, lineHeight: 0.94, letterSpacing: '-0.035em', color: S.ink, marginTop: 30 }}>
+          That’s a<br /><i style={{ color: S.accent }}>wrap.</i>
+        </div>
+        <div style={{ ...type(42, 500), color: S.ink2, marginTop: 52, lineHeight: 1.35, opacity: rows[0], transform: `translateY(${(1 - rows[0]) * 22}px)` }}>
+          Launch film · 12 shots, beat-synced,<br />crafted with {BRAND.name}
+        </div>
+        <div style={{ ...type(32, 500), color: S.ink3, marginTop: 30, opacity: rows[1], transform: `translateY(${(1 - rows[1]) * 22}px)` }}>
+          MP4 and JianYing project saved to your folder
+        </div>
+      </div>
+
+      {/* 票根卡 */}
+      <div style={{
+        position: 'absolute', left: 1140, top: 150, width: 660, height: 780, borderRadius: 34, overflow: 'hidden', background: S.surface,
+        boxShadow: `inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px ${alpha(S.shadow, 0.1)}, 0 44px 90px -30px ${alpha(S.shadow, 0.42)}`,
+      }}>
+        <div style={{ position: 'absolute', left: 0, top: 0, width: 660, height: 330, overflow: 'hidden' }}>
+          <Dunes w={660} h={330} f={f} id="b" />
+        </div>
+        {/* 打孔线 + 两侧半圆缺口 */}
+        <div style={{ position: 'absolute', left: 44, right: 44, top: 520, borderTop: `3px dashed ${alpha(S.ink3, 0.45)}` }} />
+        {[-26, 634].map((x) => (
+          <div key={x} style={{ position: 'absolute', left: x, top: 494, width: 52, height: 52, borderRadius: 26, background: S.bg[1], boxShadow: `inset 0 2px 6px ${alpha(S.shadow, 0.18)}` }} />
+        ))}
+        <div style={{ position: 'absolute', left: 52, top: 362, display: 'flex', justifyContent: 'space-between', width: 556 }}>
+          {[['Shots', '12'], ['Length', '0:45']].map(([k, v]) => (
+            <div key={k}>
+              <div style={{ ...type(24, 650, { caps: true }), letterSpacing: '0.12em', color: S.ink3 }}>{k}</div>
+              <div style={{ fontFamily: SERIF, fontSize: 64, fontWeight: 500, letterSpacing: '-0.02em', color: S.ink, marginTop: 4 }}>{v}</div>
+            </div>
+          ))}
+        </div>
+        <div style={{ position: 'absolute', left: 52, top: 570, opacity: rows[2], transform: `translateY(${(1 - rows[2]) * 20}px)` }}>
+          <div style={{ ...type(24, 650, { caps: true }), letterSpacing: '0.12em', color: S.ink3 }}>Render</div>
+          <div style={{ fontFamily: FONT.mono, fontSize: 64, fontWeight: 600, letterSpacing: '0.02em', color: S.ink, marginTop: 8 }}>SC-4821</div>
+          <div style={{ ...type(30, 500), color: S.ink2, marginTop: 14 }}>12 shots · 0:45 · 1080p</div>
+        </div>
+      </div>
+      {/* 赤陶印章：压在照片与票面交界处，弹簧落座 + 对勾描画 */}
+      <div style={{
+        position: 'absolute', left: 1640, top: 270, width: 150, height: 150,
+        transform: `rotate(${mix(-30, -8, seal)}deg) scale(${mix(1.8, 1, seal).toFixed(4)})`, opacity: Math.min(1, seal * 3),
+      }}>
+        <svg width={150} height={150} viewBox="0 0 150 150" style={{ overflow: 'visible', filter: `drop-shadow(0 14px 22px ${alpha('#7a2c10', 0.45)})` }}>
+          <circle cx={75} cy={75} r={70} fill={S.accent} />
+          <circle cx={75} cy={75} r={58} fill="none" stroke={alpha(S.onAccent, 0.5)} strokeWidth={2} strokeDasharray="3 6" />
+          <path d="M48 77 L 67 96 L 104 56" fill="none" stroke={S.onAccent} strokeWidth={11} strokeLinecap="round" strokeLinejoin="round"
+            strokeDasharray={90} strokeDashoffset={90 * (1 - check)} />
+        </svg>
+      </div>
+    </>
+  );
+};
+
+export const InvisibleCut: React.FC = () => {
+  const frame = useCurrentFrame();
+  const DUR = INVISIBLE_CUT_DURATION;
+  // 贯穿切点的慢横移：内容 +40 → −40px（smooth 起止）；B 页整体右移 40px 排版，落定时回到 120 安全边
+  const pan = 40 - 80 * ramp(frame, 0, DUR, EASE.smooth);
+  // 带风推挤：切前 A 被拖左（ease-in），切后 B 从右回稳（ease-out）
+  const shove = frame < CUT ? -28 * ramp(frame, SW_START - 2, CUT - SW_START + 2, EASE.exit) : 28 * (1 - ramp(frame, CUT, 14, EASE.out));
+  const x = occX(frame);
+  const sweeping = frame >= SW_START && frame <= SW_END;
+  // 近物遮光：遮挡物前方的软投影
+  const lead = x;
+
+  return (
+    <AbsoluteFill style={{ background: S.bg[1], overflow: 'hidden' }}>
+      <Stage look={S} keyLight={{ x: 0.3, y: 0.05 }} fill={{ x: 0.9, y: 0.95 }} vignette={0.2} grain={0.05} />
+      <div style={{ position: 'absolute', inset: 0, transform: `translateX(${(pan + shove).toFixed(2)}px)` }}>
+        {frame < CUT ? <PageA f={frame} /> : <div style={{ position: 'absolute', inset: 0, left: B_SHIFT }}><PageB f={frame} /></div>}
+      </div>
+
+      {sweeping && (
+        <>
+          {/* 前方软投影 */}
+          <div style={{
+            position: 'absolute', top: 0, bottom: 0, left: lead - 640, width: 640 + SOFT,
+            background: `linear-gradient(90deg, ${alpha('#2a170c', 0)} 0px, ${alpha('#2a170c', 0.38)} 640px, ${alpha('#2a170c', 0.5)} ${640 + SOFT}px)`,
+          }} />
+          {/* 失焦前景：两侧软边 + 实心核 + 前缘赤陶轮廓光 */}
+          <div style={{
+            position: 'absolute', top: -40, bottom: -40, left: x, width: OCC_W,
+            background: `linear-gradient(90deg, rgba(43,26,16,0) 0px, rgba(43,26,16,0.85) ${SOFT * 0.6}px, #2b1a10 ${SOFT}px, #24150c ${SOFT + CORE}px, rgba(36,21,12,0.8) ${SOFT + CORE + SOFT * 0.4}px, rgba(36,21,12,0) ${OCC_W}px)`,
+          }}>
+            <div style={{
+              position: 'absolute', top: 0, bottom: 0, left: SOFT * 0.35, width: 260,
+              background: `linear-gradient(90deg, ${alpha('#e0703f', 0)} 0%, ${alpha('#e0703f', 0.42)} 45%, ${alpha('#e0703f', 0)} 100%)`,
+            }} />
+            <div style={{
+              position: 'absolute', inset: 0,
+              background: 'linear-gradient(180deg, rgba(255,210,170,0.08) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%)',
+              // 只作用在实心区，软边处渐隐（否则在透明软边上画出一道硬边）
+              WebkitMaskImage: `linear-gradient(90deg, transparent 0px, #000 ${SOFT}px, #000 ${SOFT + CORE}px, transparent ${OCC_W}px)`,
+              maskImage: `linear-gradient(90deg, transparent 0px, #000 ${SOFT}px, #000 ${SOFT + CORE}px, transparent ${OCC_W}px)`,
+            }} />
+          </div>
+        </>
+      )}
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/LightLeakBurn.tsx

@@ -0,0 +1,262 @@
+// light-leak-burn〔转场〕：一团暖色胶片漏光从右上角斜扫入画，亮度顶峰时吞掉旧画面七成以上（高光溢出、
+// 对比度被冲淡），光峰帧硬切新画面，光沿对角线退散时新画面已在光下就位——比白闪柔、有方向、有温度。
+//
+// 第二轮重设计（暖黑电影感 · video-shotcraft 取景器的模式切换："从夜到黄昏"）：
+// - look = ember（暖黑 · 余烬橙 · 琥珀金）。A / B 是同一个取景器里的两张全出血"照片"——同一道山脊剪影：
+//   A 夜景（冷蓝黑天、星点、新月、山间一盏暖窗灯）配品牌短句上半「Frame motion.」；
+//   B 黄昏（赤橙天空、半落的太阳、暖色雾带）配下半「Craft the shot.」。漏光本身就是"天亮了"——光效即语义，
+//   一句 motto 被光峰切成两半。
+// - 取景器 UI 让它是产品而不是壁纸：四角取景框、顶部镜刻标志 + 字标与等宽曝光参数、底部模式拨轮（NIGHT / GOLDEN HOUR / PORTRAIT），
+//   光峰后高亮滑块从 NIGHT 滑到 GOLDEN HOUR（swift 曲线 14f）。
+// - 漏光三段色温：白热核 #fff3dc → 琥珀 #ffb347 → 余烬橙 #ff5a1f → 外缘赭红；全部是沿扫掠对角线拉长、转 −34° 的
+//   径向渐变椭圆（screen 叠加，不用 blur 滤镜——渐变本身就软，且便宜）；右缘另有一道"片门溢光"线性光带
+//   随光强长出（真漏光是从画框边缘漏进来的）。峰值时页面 brightness ↑ / contrast ↓ / saturate ↓ = 被烧穿。
+// - 光强包络：爬升 ease-in 27f（蓄力）→ 52f 峰值藏切 → ease-out 43f 收敛（余温）；热核 = intensity³，只在峰值附近烧起来。
+//
+// 时间表（30fps，共 130f）：
+//   0–24    A 夜景：标题逐词从线下升起（4–24），星点闪烁，镜头极缓推进 1 → 1.02
+//   24–52   漏光从右上角爬入，强度 ease-in 爬升，夜景被逐渐冲淡
+//   52      光峰帧：画面七成以上烧白，硬切 A → B
+//   52–95   光沿对角线退向左下并衰减；B 镜头 1.04 → 1 落定（out）；54–68 模式滑块滑到 GOLDEN HOUR；
+//           62–86 B 标题逐词升起（在余温里）
+//   95–130  hold 35f：太阳泛光极缓呼吸、取景器曝光数字静止
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, Vignette, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const LIGHT_LEAK_BURN_DURATION = 130;
+
+const L = LOOKS.ember;
+const W = 1920;
+const H = 1080;
+const PAD = 120;
+const LEAK_IN = 24;
+const PEAK = 52; // 光峰帧 = 藏切点
+const LEAK_OUT = 95;
+
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+// 同一道山脊（两张照片共用，换景时构图不跳）
+const RIDGE_FAR = 'M0 640 C 180 600 300 560 420 580 C 560 604 640 520 780 500 C 900 484 1000 560 1120 570 C 1260 582 1380 500 1520 490 C 1680 480 1800 560 1920 548 L1920 1080 L0 1080 Z';
+const RIDGE_MID = 'M0 760 C 160 700 300 690 440 720 C 600 756 720 650 880 640 C 1040 630 1140 720 1300 730 C 1460 740 1600 660 1760 670 C 1840 676 1890 700 1920 706 L1920 1080 L0 1080 Z';
+const RIDGE_NEAR = 'M0 880 C 220 820 420 830 600 860 C 800 892 980 800 1180 812 C 1380 824 1560 900 1760 880 C 1840 872 1890 864 1920 862 L1920 1080 L0 1080 Z';
+
+const STARS = Array.from({ length: 70 }, (_, i) => ({
+  x: h(i * 3.1 + 1) * W, y: h(i * 5.7 + 2) * 520, r: 0.8 + h(i * 7.3) * 1.8, p: h(i * 11.1) * 6.28,
+}));
+
+const Night: React.FC<{ f: number }> = ({ f }) => (
+  <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ position: 'absolute', inset: 0 }}>
+    <defs>
+      <linearGradient id="nsky" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0" stopColor="#080a12" />
+        <stop offset="0.45" stopColor="#111523" />
+        <stop offset="0.62" stopColor="#1f1d2a" />
+      </linearGradient>
+      <radialGradient id="nmoon" cx="0.5" cy="0.5" r="0.5">
+        <stop offset="0" stopColor="#e9e2d2" stopOpacity={0.35} />
+        <stop offset="1" stopColor="#e9e2d2" stopOpacity={0} />
+      </radialGradient>
+      <mask id="ncres">
+        <rect width={W} height={H} fill="#000" />
+        <circle cx={1450} cy={250} r={46} fill="#fff" />
+        <circle cx={1470} cy={238} r={42} fill="#000" />
+      </mask>
+    </defs>
+    <rect width={W} height={H} fill="url(#nsky)" />
+    {STARS.map((s, i) => (
+      <circle key={i} cx={s.x} cy={s.y} r={s.r} fill="#f2ecff" opacity={0.25 + 0.55 * (0.5 + 0.5 * Math.sin(f / 7 + s.p))} />
+    ))}
+    <circle cx={1450} cy={250} r={170} fill="url(#nmoon)" />
+    <rect width={W} height={H} fill="#efe8d8" mask="url(#ncres)" />
+    <path d={RIDGE_FAR} fill="#1a1c28" />
+    <path d={RIDGE_MID} fill="#11121b" />
+    <path d={RIDGE_NEAR} fill="#07070b" />
+    {/* 山间一盏暖窗灯：夜景里唯一的暖色，预告漏光 */}
+    <circle cx={1606} cy={898} r={28} fill={alpha(L.accent2, 0.2)} />
+    <rect x={1600} y={890} width={12} height={10} rx={2} fill={L.accent2} />
+  </svg>
+);
+
+const Golden: React.FC<{ f: number }> = ({ f }) => {
+  const b = 1 + 0.03 * Math.sin(f / 18);
+  return (
+    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ position: 'absolute', inset: 0 }}>
+      <defs>
+        <linearGradient id="gsky" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#2a110b" />
+          <stop offset="0.3" stopColor="#8a3218" />
+          <stop offset="0.5" stopColor="#e0702e" />
+          <stop offset="0.62" stopColor="#ffb661" />
+        </linearGradient>
+        <radialGradient id="gsun" cx="0.5" cy="0.5" r="0.5">
+          <stop offset="0" stopColor="#fff4d8" stopOpacity={0.95} />
+          <stop offset="0.25" stopColor="#ffd590" stopOpacity={0.55} />
+          <stop offset="1" stopColor="#ff9a4a" stopOpacity={0} />
+        </radialGradient>
+        <linearGradient id="ghaze" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#ffb661" stopOpacity={0} />
+          <stop offset="0.5" stopColor="#ffb661" stopOpacity={0.35} />
+          <stop offset="1" stopColor="#ffb661" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <rect width={W} height={H} fill="url(#gsky)" />
+      <circle cx={1300} cy={600} r={420 * b} fill="url(#gsun)" />
+      <circle cx={1300} cy={600} r={96} fill="#fff6e2" />
+      <path d={RIDGE_FAR} fill="#b04a24" />
+      <rect x={0} y={520} width={W} height={160} fill="url(#ghaze)" />
+      <path d={RIDGE_MID} fill="#6a2412" />
+      <path d={RIDGE_NEAR} fill="#2a0d06" />
+    </svg>
+  );
+};
+
+// 品牌短句（PITCH.en.motto）被光峰切成两半：A 夜景 / B 黄昏
+const MOTTO_A = 'Frame motion.';
+const MOTTO_B = 'Craft the shot.';
+
+const MODES = ['NIGHT', 'GOLDEN HOUR', 'PORTRAIT'];
+const MODE_X = [0, 220, 532]; // 每项左缘（相对拨轮）
+const MODE_W = [172, 272, 228];
+
+// 取景器 UI（两页共用，只有数值与模式不同）
+const Viewfinder: React.FC<{ golden: boolean; slide: number }> = ({ golden, slide }) => {
+  const corner = (x: number, y: number, sx: number, sy: number) => (
+    <div style={{
+      position: 'absolute', left: x, top: y, width: 56, height: 56,
+      borderTop: sy > 0 ? `3px solid ${alpha(L.ink, 0.8)}` : undefined, borderBottom: sy < 0 ? `3px solid ${alpha(L.ink, 0.8)}` : undefined,
+      borderLeft: sx > 0 ? `3px solid ${alpha(L.ink, 0.8)}` : undefined, borderRight: sx < 0 ? `3px solid ${alpha(L.ink, 0.8)}` : undefined,
+    }} />
+  );
+  const hx = mix(MODE_X[0], MODE_X[1], slide);
+  const hw = mix(MODE_W[0], MODE_W[1], slide);
+  return (
+    <>
+      {corner(72, 72, 1, 1)}
+      {corner(W - 128, 72, -1, 1)}
+      {corner(72, H - 128, 1, -1)}
+      {corner(W - 128, H - 128, -1, -1)}
+      <div style={{
+        position: 'absolute', left: PAD + 36, right: PAD + 36, top: 96, display: 'flex', justifyContent: 'space-between',
+        fontFamily: FONT.mono, fontSize: 28, fontWeight: 600, letterSpacing: '0.08em', color: alpha(L.ink, 0.82),
+      }}>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+          <span style={{ color: L.accent }}>●</span>
+          <ShotcraftMark size={36} tone="dark" />
+          <span style={{ letterSpacing: '0.02em' }}>{BRAND.name}</span>
+        </span>
+        <span>{golden ? 'ISO 100 · 1/500 · ƒ2.8' : 'ISO 3200 · 1/8 · ƒ1.6'}</span>
+        <span>{golden ? '4K · 24' : 'RAW · 24'}</span>
+      </div>
+      {/* 模式拨轮 */}
+      <div style={{ position: 'absolute', left: (W - 760) / 2, top: H - 156, width: 760, height: 64 }}>
+        <div style={{
+          position: 'absolute', left: hx, top: 0, width: hw, height: 64, borderRadius: 32,
+          background: alpha('#140805', 0.55), border: `1.5px solid ${alpha(L.accent2, 0.55)}`,
+          boxShadow: `0 0 24px ${alpha(L.accent2, 0.25)}`,
+        }} />
+        {MODES.map((m, i) => {
+          const on = i === 0 ? 1 - slide : i === 1 ? slide : 0;
+          return (
+            <div key={m} style={{
+              position: 'absolute', left: MODE_X[i], width: MODE_W[i], top: 0, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontFamily: FONT.sans, fontSize: 28, fontWeight: 700, letterSpacing: '0.14em',
+              color: on > 0.5 ? L.accent2 : alpha(L.ink, 0.62),
+            }}>{m}</div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export const LightLeakBurn: React.FC = () => {
+  const frame = useCurrentFrame();
+  const golden = frame > PEAK;
+
+  // 光强包络：ease-in 爬升 → 峰值 → ease-out 收敛
+  const intensity = frame <= PEAK
+    ? ramp(frame, LEAK_IN, PEAK - LEAK_IN, (t) => t * t)
+    : 1 - ramp(frame, PEAK, LEAK_OUT - PEAK, EASE.out);
+  // 光团沿对角线：右上外 → 左下外（全程 swift，峰值时在画面中上偏右）
+  const sweep = ramp(frame, LEAK_IN, LEAK_OUT - LEAK_IN, (t) => 1 - Math.pow(1 - t, 1.2));
+  const cx = mix(2250, -500, sweep);
+  const cy = mix(-380, 1400, sweep);
+
+  // 镜头：A 极缓推进，B 从 1.04 落定
+  const zoom = golden ? 1 + 0.04 * (1 - ramp(frame, PEAK, 44, EASE.out)) : 1 + 0.02 * ramp(frame, 0, PEAK, EASE.smooth);
+  const burn = `brightness(${(1 + intensity * 0.85).toFixed(3)}) contrast(${(1 - intensity * 0.5).toFixed(3)}) saturate(${(1 - intensity * 0.25).toFixed(3)})`;
+  // 高光溢出把 A 的字也烧淡（峰值处只剩 ~25%），切点那一下不会看到标题突然换字
+  const aWash = golden ? 1 : 1 - 0.75 * Math.pow(intensity, 1.6);
+  const slide = ramp(frame, PEAK + 2, 14, EASE.swift);
+
+  // 三段色温光团（长径 / 颜色 / 透明度 / 沿扫掠方向的偏移）
+  const blobs = [
+    { d: 3000, c: '#c2311a', a: 0.6, o: 360 },
+    { d: 2300, c: '#ff5a1f', a: 0.8, o: 160 },
+    { d: 1700, c: '#ffb347', a: 0.95, o: 0 },
+  ];
+  const core = Math.pow(intensity, 3);
+  const cutFlash = frame === PEAK || frame === PEAK + 1 ? 0.25 : 0;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[2], overflow: 'hidden' }}>
+      {/* 画面层（受漏光烧穿） */}
+      <div style={{ position: 'absolute', inset: 0, filter: intensity > 0.01 ? burn : undefined }}>
+        <div style={{ position: 'absolute', inset: 0, transform: `scale(${zoom.toFixed(5)})` }}>
+          {golden ? <Golden f={frame} /> : <Night f={frame} />}
+        </div>
+        {/* 底部压暗，托住标题与拨轮 */}
+        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${alpha('#000000', 0.25)} 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 52%, ${alpha('#0a0402', 0.72)} 100%)` }} />
+        {/* 标题 */}
+        <div style={{ position: 'absolute', left: PAD + 36, top: 596, opacity: aWash }}>
+          <div style={{ ...type(28, 700, { caps: true }), letterSpacing: '0.2em', color: golden ? L.accent2 : alpha(L.ink, 0.7), marginBottom: 22 }}>
+            {golden ? '02 — Golden hour' : '01 — Night'}
+          </div>
+          <div style={{ ...type(140, 760), color: L.ink }}>
+            {golden ? (
+              <TextReveal key="b" text={MOTTO_B} by="word" variant="rise" start={PEAK + 10} each={20} gap={4} />
+            ) : (
+              <TextReveal key="a" text={MOTTO_A} by="word" variant="rise" start={2} each={20} gap={4} />
+            )}
+          </div>
+        </div>
+        <Viewfinder golden={golden} slide={slide} />
+      </div>
+
+      {/* 漏光层 */}
+      {intensity > 0.003 && (
+        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+          {/* 片门溢光：从右缘与上缘漏进来的线性光带 */}
+          <div style={{
+            position: 'absolute', inset: 0, mixBlendMode: 'screen', opacity: intensity,
+            background: `linear-gradient(250deg, ${alpha('#ffb347', 0.9)} 0%, ${alpha('#ff5a1f', 0.55)} 14%, ${alpha('#c2311a', 0.2)} 30%, rgba(0,0,0,0) 46%)`,
+          }} />
+          {blobs.map((b, i) => (
+            <div key={i} style={{
+              position: 'absolute', left: cx - b.d / 2 + b.o * 0.8, top: cy - b.d / 2.7 - b.o * 0.6, width: b.d, height: b.d / 1.35,
+              borderRadius: '50%', transform: 'rotate(-34deg)', mixBlendMode: 'screen', opacity: b.a * intensity,
+              background: `radial-gradient(closest-side, ${alpha(b.c, 1)} 0%, ${alpha(b.c, 0.65)} 35%, ${alpha(b.c, 0)} 100%)`,
+            }} />
+          ))}
+          {/* 白热核：只在峰值附近烧起来 */}
+          <div style={{
+            position: 'absolute', left: cx - 1100, top: cy - 700, width: 2200, height: 1400, borderRadius: '50%', transform: 'rotate(-34deg)',
+            mixBlendMode: 'screen', opacity: core,
+            background: 'radial-gradient(closest-side, #fff6e6 0%, rgba(255,236,200,0.9) 40%, rgba(255,200,130,0) 100%)',
+          }} />
+          {/* 全屏暖罩：高光溢出带温度 */}
+          <div style={{ position: 'absolute', inset: 0, background: '#ff9a4a', mixBlendMode: 'screen', opacity: 0.4 * intensity * intensity + cutFlash }} />
+        </div>
+      )}
+
+      <Vignette strength={0.5 * (1 - 0.6 * intensity)} color={L.shadow} inner={0.48} />
+      <Grain opacity={0.08 + 0.08 * intensity} step={2} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};