dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx

@@ -0,0 +1,205 @@
+// white-flash-logo-simplify-cut — White Flash Simplify 冲白降维切换
+// 液态金属质感的彩色词标静置流光，蓄力后从字心炸出一记白闪过曝，曝光回落时同一位置已是扁平版字标——
+// 一次闪白完成"华丽演出 → 正式形象"的降维。
+//
+// 第二轮重设计（极光 · 液态金属 → 纸面定妆）：
+// - look = aurora（暗场演出段）；冲白后落到 video-shotcraft 的剪辑纸面（品牌色收编：纸 / 墨 / 琥珀）。
+//   词标是品牌字标「video-shotcraft」（全小写、字标字体 700 字重，15 字符故字号压到 FS），
+//   两个版本同字号同位置——观众读到的是"同一个字标被净化了"，不是换了一张图。
+// - 液态段的质感是"真材质"而不是一条渐变：①流动的虹彩底色（紫 → 粉 → 桃 → 冰蓝，background-size 300% 缓流）
+//   ②纵向明暗（顶亮底暗，读作有体积）③横贯字腰的镀铬地平线反光带 ④一次斜向高光扫过（Q4：只给主角一次，
+//   裁进字形）⑤字下柔光 bloom + 地面倒影（翻转、渐隐）。背后一抹极光余光 + 浮尘。
+// - 白闪不是整屏均匀淡入，而是"光从字里炸出来"：蓄力段字标提亮、一条横向变形镜头眩光从字心拉开，
+//   随后白色径向光团从字心 6f 内撑满全屏（二次 ease-in，越来越快）。
+// - 定妆段用"曝光回落"代替淡入：白层 22f 内 quint-out 退去，像眼睛适应强光——底下扁平字标早已在位，
+//   只带 1.03→1 的对焦收束；随后字标上方镜刻标志描出（取景框先揭开、琥珀斜切后划入）、
+//   一根琥珀短线画出、品牌短句逐词升起，完成锁定画面（标志本身不上液态质感——品牌规范禁渐变/发光）。
+//
+// 时间表（30fps，共 120f）：
+//   0–34    演出：液态词标在场（第 0 帧即有）、虹彩缓流、高光 6–34f 扫过一次、整幅 1→1.035 缓推
+//   34–46   蓄力：字标 brightness 1→1.7、bloom 加强、横向眩光拉开（ease-in）
+//   44–50   冲白：径向白团从字心撑满（二次 ease-in），50–54 纯白 hold（呼吸位）
+//   54–76   曝光回落：白层 1→0（quint-out）；扁平字标 1.03→1 对焦
+//   72–96   锁定：琥珀短线 72–86 画出、标志 74–96 描出、品牌短句 78f 起逐词升起
+//   96–120  hold：极缓前推 1→1.01 定格
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, Grain, Vignette, mix, ramp } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, PITCH, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const WHITE_FLASH_LOGO_SIMPLIFY_CUT_DURATION = 120;
+
+const L = LOOKS.aurora;
+const WORD = BRAND.name; // 字标全小写
+const FS = 190; // 15 字符的字标按画宽压字号（原 4 字母占位字标是 300）
+const CY = 500; // 词标中心 y
+const FLASH0 = 44;
+const WHITE = 50; // 全白、换场帧
+const RECOVER = 54;
+
+// 扁平版的三个颜色：纸面 / 墨 / 强调色（换品牌时只改这三个）——video-shotcraft：剪辑纸 / 片场墨 / 镜琥珀
+const PAPER: [string, string] = ['#f7f5f0', '#ebe7de'];
+const FLAT_INK: string = BRAND.ink;
+const FLAT_ACCENT: string = BRAND.amber;
+const MARK = 124; // 锁定段字标上方的镜刻标志尺寸
+
+const wordStyle: React.CSSProperties = {
+  fontFamily: BRAND.font, fontSize: FS, fontWeight: 700, letterSpacing: '0.03em', lineHeight: 1, whiteSpace: 'nowrap',
+};
+
+// 字标文本：「ft」处 f 后不加字距，让两道横笔重叠——+0.03em 字距下两道横笔恰好相接，
+// 大字号时接缝会露出一条抗锯齿亮线
+const wordText = (
+  <>{WORD.slice(0, WORD.lastIndexOf('f'))}<span style={{ letterSpacing: 0 }}>f</span>{WORD.slice(WORD.lastIndexOf('f') + 1)}</>
+);
+
+const IRIS = 'linear-gradient(100deg, #7c6bff 0%, #b18cff 16%, #f472b6 32%, #ffc6a8 46%, #8fdcff 62%, #7c6bff 78%, #c58cff 90%, #7c6bff 100%)';
+
+const centered = (y: number): React.CSSProperties => ({
+  position: 'absolute', left: 0, right: 0, top: y - FS * 0.5, height: FS, display: 'flex', justifyContent: 'center', alignItems: 'center',
+});
+
+// 液态词标（一个 span 上叠多层背景并全部 clip 到字形）
+const LiquidWord: React.FC<{ frame: number; bright: number }> = ({ frame, bright }) => {
+  const flow = (frame * 1.1) % 300;
+  const sheen = ramp(frame, 6, 28, EASE.swift); // 斜向高光一次扫过
+  const sx = mix(-30, 130, sheen);
+  const layers = [
+    // 斜向高光（只在 6–34f 出现）
+    sheen > 0 && sheen < 1
+      ? `linear-gradient(105deg, rgba(255,255,255,0) ${sx - 10}%, rgba(255,255,255,0.85) ${sx}%, rgba(255,255,255,0) ${sx + 10}%)`
+      : 'linear-gradient(0deg, transparent, transparent)',
+    // 镀铬地平线：字腰一道亮带 + 其下一道暗带
+    'linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.34) 49%, rgba(255,255,255,0.1) 52%, rgba(40,10,70,0.28) 56%, rgba(40,10,70,0) 68%)',
+    // 纵向体积：顶亮底暗
+    'linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 38%, rgba(20,5,40,0) 60%, rgba(20,5,40,0.45) 100%)',
+    IRIS,
+  ];
+  return (
+    <span style={{
+      ...wordStyle,
+      backgroundImage: layers.join(', '),
+      backgroundSize: '100% 100%, 100% 100%, 100% 100%, 300% 100%',
+      backgroundPosition: `0 0, 0 0, 0 0, ${flow}% 0`,
+      WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
+      filter: bright > 1.001 ? `brightness(${bright.toFixed(3)}) saturate(${(1 / Math.sqrt(bright)).toFixed(3)})` : undefined,
+      paddingBottom: 20,
+    }}>{wordText}</span>
+  );
+};
+
+export const WhiteFlashLogoSimplifyCut: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ── 演出段 ──
+  const push = 1 + 0.035 * ramp(frame, 0, FLASH0, EASE.smooth);
+  const charge = ramp(frame, 34, 12, EASE.exit); // 蓄力 0→1（越来越快）
+  const bright = 1 + 0.7 * charge;
+  const flare = ramp(frame, 34, 14, EASE.exit);
+
+  // ── 冲白 ──
+  const burst = ramp(frame, FLASH0, WHITE - FLASH0, (t) => t * t); // 径向白团半径（二次 ease-in：后 3 帧肉眼可见地吞掉字标）
+  const whiteHold = frame >= WHITE && frame < RECOVER ? 1 : 0;
+  const recover = 1 - ramp(frame, RECOVER, 22, EASE.out); // 曝光回落 1→0
+  const whiteA = frame < WHITE ? burst : frame < RECOVER ? 1 : recover;
+
+  // ── 定妆段 ──
+  const focus = ramp(frame, RECOVER - 2, 26, EASE.snappy);
+  const flatScale = mix(1.03, 1, focus) * (1 + 0.01 * ramp(frame, 96, 24, EASE.smooth));
+  const rule = ramp(frame, 72, 14, EASE.snappy);
+  const mark = ramp(frame, 74, 14, EASE.snappy); // 标志取景框揭开
+  const cut = ramp(frame, 84, 12, EASE.snappy); // 琥珀斜切划入
+
+  const dark = frame < WHITE;
+
+  return (
+    <AbsoluteFill style={{ overflow: 'hidden', background: dark ? L.bg[1] : PAPER[0] }}>
+      {dark ? (
+        <>
+          <Stage look={L} keyLight={{ x: 0.5, y: 0.2 }} fill={{ x: 0.82, y: 0.85 }} breathe={0.6}>
+            <Dust look={L} count={36} seed={4} drift={0.2} opacity={0.5} />
+            {/* 字后极光余光 */}
+            <div style={{
+              position: 'absolute', left: 360, right: 360, top: CY - 260, height: 520,
+              background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha('#a78bfa', 0.28 + 0.25 * charge)} 0%, ${alpha('#f472b6', 0.08)} 45%, rgba(0,0,0,0) 72%)`,
+            }} />
+          </Stage>
+
+          <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: `50% ${CY}px` }}>
+            {/* bloom：同色模糊副本 */}
+            <div style={{ ...centered(CY), opacity: 0.42 + 0.4 * charge, filter: 'blur(38px)' }}>
+              <span style={{ ...wordStyle, backgroundImage: IRIS, backgroundSize: '300% 100%', backgroundPosition: `${(frame * 1.1) % 300}% 0`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>{wordText}</span>
+            </div>
+            {/* 地面倒影：翻转 + 渐隐 */}
+            <div style={{
+              ...centered(CY + FS * 0.86), transform: 'scaleY(-1)', opacity: 0.22,
+              WebkitMaskImage: 'linear-gradient(0deg, #000 0%, rgba(0,0,0,0.4) 30%, transparent 62%)',
+              maskImage: 'linear-gradient(0deg, #000 0%, rgba(0,0,0,0.4) 30%, transparent 62%)',
+            }}>
+              <LiquidWord frame={frame} bright={bright} />
+            </div>
+            {/* 主词标 */}
+            <div style={centered(CY)}>
+              <LiquidWord frame={frame} bright={bright} />
+            </div>
+            {/* 横向变形眩光：从字心拉开 */}
+            {flare > 0 && (
+              <>
+                {/* 眩光：宽而软的光晕 + 细亮核（核的两端渐隐，不加描边阴影——否则亮线会带一圈暗边） */}
+                <div style={{
+                  position: 'absolute', left: 960 - 1100 * flare, width: 2200 * flare, top: CY - 24, height: 48,
+                  background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha('#e9e2ff', 0.55 * flare)} 0%, rgba(233,226,255,0) 100%)`,
+                }} />
+                <div style={{
+                  position: 'absolute', left: 960 - 1000 * flare, width: 2000 * flare, top: CY - 2, height: 4,
+                  background: `linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${(0.95 * flare).toFixed(3)}) 50%, rgba(255,255,255,0) 100%)`,
+                }} />
+                <div style={{
+                  position: 'absolute', left: 960 - 900 * flare, width: 1800 * flare, top: CY - 90, height: 180,
+                  background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha('#d8ccff', 0.45 * flare)} 0%, rgba(216,204,255,0) 70%)`,
+                }} />
+              </>
+            )}
+          </div>
+        </>
+      ) : (
+        <>
+          {/* 纸面：冷白带一丝紫 + 顶部柔光 + 轻暗角 + 颗粒 */}
+          <AbsoluteFill style={{ background: `linear-gradient(180deg, ${PAPER[0]} 0%, ${PAPER[1]} 100%)` }} />
+          <AbsoluteFill style={{ background: 'radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%)' }} />
+          <Vignette strength={0.1} inner={0.5} color="#2a2620" />
+          <div style={{ position: 'absolute', inset: 0, transform: `scale(${flatScale.toFixed(5)})`, transformOrigin: `50% ${CY}px` }}>
+            <div style={centered(CY)}>
+              <span style={{ ...wordStyle, color: FLAT_INK, paddingBottom: 20 }}>{wordText}</span>
+            </div>
+            {/* 锁定：镜刻标志（取景框揭开 → 琥珀斜切划入）+ 琥珀短线 + 品牌短句 */}
+            <div style={{ position: 'absolute', left: 960 - MARK / 2, top: CY - FS * 0.5 - 44 - MARK }}>
+              <ShotcraftMark size={MARK} tone="light" frameProgress={mark} cutProgress={cut} />
+            </div>
+            <div style={{
+              position: 'absolute', left: 960 - 48, top: CY + FS * 0.5 + 62, width: 96, height: 5, borderRadius: 3,
+              background: FLAT_ACCENT, transform: `scaleX(${rule.toFixed(4)})`,
+            }} />
+            <div style={{ position: 'absolute', left: 0, right: 0, top: CY + FS * 0.5 + 106, textAlign: 'center', color: '#716d64', ...type(46, 480) }}>
+              <TextReveal text={PITCH.en.motto} by="word" variant="rise" start={78} each={18} gap={4} />
+            </div>
+          </div>
+          <Grain opacity={0.04} />
+        </>
+      )}
+
+      {/* 白闪：先是从字心撑开的径向白团，满屏后整层白，再随曝光回落退去 */}
+      {whiteA > 0.001 && (
+        frame < WHITE ? (
+          <AbsoluteFill style={{
+            background: `radial-gradient(circle ${(80 + burst * 1500).toFixed(1)}px at 50% ${CY}px, rgba(255,255,255,1) 0%, rgba(255,255,255,${(0.6 + 0.4 * burst).toFixed(3)}) 55%, rgba(255,255,255,0) 100%)`,
+            opacity: Math.min(1, burst * 1.4),
+          }} />
+        ) : (
+          <AbsoluteFill style={{ background: '#ffffff', opacity: whiteHold ? 1 : whiteA }} />
+        )
+      )}
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/transition/wipe-transitions/BlindsSlice.tsx

@@ -0,0 +1,178 @@
+// blinds-slice｜百叶窗切条错峰翻换
+// 12 根 160px 竖条从左到右错峰翻面，波扫过后整页由 A 换成 B。
+//
+// 第二轮重设计（纸 · 瑞士网格杂志的翻页）：
+// - look = paper。两页是 video-shotcraft 刊物的连续两页（刊头是 video-shotcraft 字标）：A 页暖白纸 + 墨色巨字「Frame.」，
+//   B 页整版朱红 + 奶白巨字「Craft.」（合起来是品牌短句 Frame motion. Craft the shot.）。明暗与色相反差让波的每一叶都读得清。
+//   版面用 12 栏网格（每栏 160px，发丝线可见）——**栏 = 叶片**，百叶窗就是沿着版式网格翻页，形式与手法同构。
+// - 真 3D 叶片：每叶是 preserve-3d 的双面板（正面 A 切片、背面 B 切片，backface hidden），绕自身竖轴
+//   rotateY 0→180°，共享 1900px 透视——翻到 90° 时叶片侧立、露出叶后的暗槽，暗带随波扫过。
+//   受光：转离主光的一面按 sin(θ) 变暗，转向主光的一面在 ~35° 掠过一道高光（裁在叶片内，Q4）；叶缘受光细线。
+// - 节奏：每叶用物理弹簧翻面（damping 13 / stiffness 75：~13f 到 180°、≈5° 过冲回落，像真的叶片拍到位）；
+//   起跳按 t^0.78 错峰（间隔 3.4f → 2.1f，前疏后密，波越翻越快，同时有 4–5 叶在转）；波期间相机极轻前推 1→1.02 再回 1。
+// - 波完成后摘罩（3D 结构全部卸载，B 整页直出、文字锐利），随后 B 页顶部一根奶白细线从左画到右、页码跳到 02。
+//
+// 时间表（30fps，共 132f）：
+//   0–24    A 页 hold（相机 1→1.006 极缓推进，画面不死）
+//   24–52   起跳：叶 i 在 24 + stagger(i, 12, 28, t^0.78) 帧起翻（前疏后密）
+//   24–~76  翻面：每叶弹簧 ~13f 到位、≈5° 过冲回落；暗槽随波扫过
+//   ~80     摘罩：最后一叶弹簧收敛（|θ−180°|<0.3° 连续 4 帧）后，B 整页直出
+//   82–102  余波：刊头细线重新画出（snappy），相机 60–94f 落回 1
+//   102–132 hold
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, Grain, Vignette, ramp } from '../../_fixtures/Polish';
+import { LOOKS, alpha, springAt, stagger, type } from '../../_fixtures/Look';
+import { ShotcraftWordmark } from '../../_fixtures/Brand';
+
+export const BLINDS_SLICE_DURATION = 132;
+
+const L = LOOKS.paper;
+const STRIPS = 12;
+const W = 160; // 12 × 160 = 1920（= 版面 12 栏）
+const WAVE0 = 24;
+const SPAN = 28; // 起跳错峰总跨度
+// t^0.78：间隔从 ~3.4f 渐缩到 ~2.1f——波越翻越快，但第一叶之后不会空等（EASE.out 首间隔 9f 太拖）
+const startOf = (i: number) => WAVE0 + stagger(i, STRIPS, SPAN, (t) => Math.pow(t, 0.78));
+const angleOf = (f: number, i: number) => {
+  const s = startOf(i);
+  return f < s ? 0 : 180 * springAt(f, s, { damping: 13, stiffness: 75 });
+};
+// 摘罩帧：最后一叶弹簧收敛（|θ-180| < 0.3°）之后
+const UNMASK = (() => {
+  for (let f = startOf(STRIPS - 1); f < 200; f++) {
+    let ok = true;
+    for (let k = 0; k < 4; k++) if (Math.abs(angleOf(f + k, STRIPS - 1) - 180) > 0.3) ok = false;
+    if (ok) return f;
+  }
+  return 80;
+})();
+
+const RED = '#e5432d';
+const CREAM = '#fffaf3';
+
+// ───────────── 两页版面 ─────────────
+type PageProps = { mark: 'dark' | 'light'; bg: string; ink: string; sub: string; accent: string; line: string; chapter: string; word: string; dot: string; body: string; page: string; rule?: number };
+
+const Page: React.FC<PageProps> = ({ mark, bg, ink, sub, accent, line, chapter, word, dot, body, page, rule = 1 }) => (
+  <div style={{ position: 'absolute', left: 0, top: 0, width: 1920, height: 1080, background: bg, overflow: 'hidden' }}>
+    {/* 12 栏网格发丝线 */}
+    {Array.from({ length: STRIPS - 1 }, (_, i) => (
+      <div key={i} style={{ position: 'absolute', left: (i + 1) * W, top: 0, bottom: 0, width: 1, background: line }} />
+    ))}
+    {/* 刊头 */}
+    <div style={{ position: 'absolute', left: 96, right: 96, top: 92, display: 'flex', alignItems: 'baseline', color: ink }}>
+      {/* 刊头字标：video-shotcraft（全小写）；标志按页底色取 tone */}
+      <div style={{ width: 480, alignSelf: 'center' }}>
+        <ShotcraftWordmark size={30} markScale={1.6} gap={14} tone={mark} color={ink} />
+      </div>
+      <div style={{ ...type(28, 500), color: sub, flex: 1 }}>Shot Recipe Journal</div>
+      <div style={{ ...type(26, 500, { mono: true }), color: sub }}>Nº 07 — 2026</div>
+    </div>
+    <div style={{ position: 'absolute', left: 96, right: 96, top: 152, height: 2, background: ink, transform: `scaleX(${rule})`, transformOrigin: '0 50%' }} />
+    {/* 右上：章节 + 正文（落在第 8–12 栏） */}
+    <div style={{ position: 'absolute', left: 7 * W, top: 250, width: 4 * W + 40, color: ink }}>
+      <div style={{ ...type(28, 800, { caps: true }), letterSpacing: '0.2em', color: accent }}>{chapter}</div>
+      <div style={{ ...type(52, 560), lineHeight: 1.14, letterSpacing: '-0.025em', marginTop: 26, whiteSpace: 'pre-line' }}>{body}</div>
+    </div>
+    {/* 巨字：第 1 栏起（底边距按原「Rhythm」的下伸部留足） */}
+    <div style={{
+      position: 'absolute', left: 84, bottom: 156, color: ink, fontFamily: FONT.sans, fontSize: 400, fontWeight: 850,
+      letterSpacing: '-0.065em', lineHeight: 0.8, whiteSpace: 'nowrap',
+    }}>
+      {word}<span style={{ color: dot }}>.</span>
+    </div>
+    <div style={{ position: 'absolute', right: 96, bottom: 168, color: sub, ...type(28, 500, { mono: true }) }}>{page}</div>
+  </div>
+);
+
+const PageA: React.FC = () => (
+  <Page mark="light" bg="#f3eee4" ink={L.ink} sub={L.ink2} accent={RED} line={alpha(L.ink, 0.07)} chapter="Chapter 01"
+    word="Frame" dot={RED} body={"Shot recipes for\ncinematic product films."} page="01 / 02" />
+);
+const PageB: React.FC<{ rule?: number }> = ({ rule }) => (
+  <Page mark="dark" bg={RED} ink={CREAM} sub={alpha(CREAM, 0.72)} accent={L.ink} line={alpha(CREAM, 0.13)} chapter="Chapter 02"
+    word="Craft" dot={L.ink} body={"Direct the film.\nLet the agent shoot it."} page="02 / 02" rule={rule} />
+);
+
+// 一叶的切片：外层 160 宽裁剪，内层整页负偏移对位
+const Slice: React.FC<{ x: number; children: React.ReactNode }> = ({ x, children }) => (
+  <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+    <div style={{ position: 'absolute', left: -x, top: 0, width: 1920, height: 1080 }}>{children}</div>
+  </div>
+);
+
+// 叶面受光：背光变暗 + 转向主光时掠过一道高光（θf = 该面相对正视的转角，0–90°）
+const FaceLight: React.FC<{ th: number; lead: 'left' | 'right' }> = ({ th, lead }) => {
+  const r = (th * Math.PI) / 180;
+  const shade = 0.5 * Math.sin(r);
+  const spec = 0.22 * Math.max(0, Math.cos((th - 35) * (Math.PI / 70))) * Math.sin(r * 2 > Math.PI ? Math.PI : r * 2);
+  return (
+    <>
+      <div style={{
+        position: 'absolute', inset: 0,
+        background: `linear-gradient(${lead === 'left' ? 90 : 270}deg, rgba(20,12,6,${(shade * 0.7).toFixed(3)}) 0%, rgba(20,12,6,${shade.toFixed(3)}) 100%)`,
+      }} />
+      {spec > 0.005 && <div style={{ position: 'absolute', inset: 0, background: `rgba(255,248,236,${spec.toFixed(3)})`, mixBlendMode: 'screen' }} />}
+      {/* 叶缘受光细线 */}
+      <div style={{ position: 'absolute', top: 0, bottom: 0, [lead]: 0, width: 2, background: `rgba(255,250,240,${(0.7 * Math.sin(r)).toFixed(3)})` } as React.CSSProperties} />
+    </>
+  );
+};
+
+export const BlindsSlice: React.FC = () => {
+  const frame = useCurrentFrame();
+  const cam = 1 + 0.006 * ramp(frame, 0, WAVE0, EASE.smooth)
+    + 0.014 * ramp(frame, WAVE0, 26, EASE.smooth) * (1 - ramp(frame, 60, 34, EASE.smooth));
+  const rule = frame < UNMASK ? 1 : ramp(frame, UNMASK + 2, 20, EASE.snappy);
+
+  let body: React.ReactNode;
+  if (frame < startOf(0)) {
+    body = <PageA />;
+  } else if (frame >= UNMASK) {
+    // 摘罩：B 整页直出，刊头细线重新画一遍（翻页后的"落定"一拍）
+    body = <PageB rule={rule} />;
+  } else {
+    body = (
+      <>
+        {/* 叶后暗槽：叶片侧立时露出的墙体 */}
+        <AbsoluteFill style={{ background: 'linear-gradient(180deg, #1d1712 0%, #120d0a 100%)' }} />
+        <div style={{ position: 'absolute', inset: 0, perspective: 1900, perspectiveOrigin: '50% 50%' }}>
+          {Array.from({ length: STRIPS }, (_, i) => {
+            const x = i * W;
+            const th = angleOf(frame, i);
+            const front = th < 90;
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: x, top: 0, width: W, height: 1080, transformStyle: 'preserve-3d',
+                transform: `rotateY(${(-th).toFixed(3)}deg)`, transformOrigin: '50% 50%',
+              }}>
+                {/* 正面：A 切片 */}
+                <div style={{ position: 'absolute', inset: 0, backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden', overflow: 'hidden' }}>
+                  <Slice x={x}><PageA /></Slice>
+                  {front && th > 0.05 && <FaceLight th={th} lead="left" />}
+                </div>
+                {/* 背面：B 切片（预转 180°，叶片转满后正好朝前、不镜像） */}
+                <div style={{ position: 'absolute', inset: 0, backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden', overflow: 'hidden', transform: 'rotateY(180deg)' }}>
+                  <Slice x={x}><PageB /></Slice>
+                  {!front && Math.abs(180 - th) > 0.05 && <FaceLight th={Math.min(90, Math.abs(180 - th))} lead="right" />}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam.toFixed(5)})`, transformOrigin: '50% 50%' }}>
+        {body}
+      </div>
+      {/* 共享暗角与纸面颗粒：只画一层，两页共用（转场接缝不叠暗角） */}
+      <Vignette strength={0.2} inner={0.5} color={L.shadow} />
+      <Grain opacity={0.06} />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/blur-slide/BlurSlide.tsx

@@ -0,0 +1,147 @@
+// blur-slide — Blur Slide 逐词入场（第二轮重设计：编辑排版海报）
+// 手法不变：标题逐词入场，y 位移 + blur + opacity 三通道共用同一个进度 p、同一条缓动同步收敛
+// ——词是"从虚焦里浮出来"，不是"滑进来顺便淡一下"；副标题在标题收完前错峰跟进，重叠读作一句话。
+//
+// 设计决定
+// - look：paper（暖白纸 · 墨 · 朱红）。编辑排版语境：杂志刊头 + 大衬线标题 + 无衬线副标，
+//   左对齐在 168px 安全边距的网格上，右侧留白给标题的尾巴呼吸。
+// - 层级：刊头 24px 全大写（纹理级）→ 栏目眉题 30px 朱红全大写 → 主标题 170px 衬线两行 →
+//   副标题 46px 无衬线。主副字号差 3.7 倍，字重 400 衬线对 400 无衬线靠字体家族区分。
+// - 强调色只给一个词：第二行的斜体 "cinematic." 是朱红，它最后落定、入场窗更长（主角）。
+// - 文案：主 5 词 "Make every launch / feel cinematic."、副 9 词（video-shotcraft 的宣传句）；刊头是 video-shotcraft 字标。
+//
+// 时间表（30fps，120f）
+//   0–24   刊头与发丝线已在画面（首帧不空），发丝线从左向右画出（snappy 24f）
+//   4–22   栏目眉题 blur-slide 入场（与手法同族，做"预备"）
+//   10–40  主标题第一行 3 词，词间 4f，每词 22f
+//   26–58  第二行：先停 6f 换气，"feel" 22f、"cinematic." 30f（最后落定，字距同 p 收紧）
+//   34–80  副标题 9 词，词间 2.4f、每词 20f、位移/模糊更小——层级靠幅度不靠时长；与主标题重叠 24f
+//   72–98  刊脚发丝线从右向左画出 + 页码淡入（hold 段的余波，版面闭合成完整一页）
+//   80–119 落定 hold 40f：整组极缓推近 1→1.03（smooth，起止零速度）+ 纸面主光极缓呼吸
+// 曲线：三通道共用 EASE.out（quint-out 级），起手快、尾巴长，词"浮"上来而不是"弹"上来。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { LOOKS, SERIF, Stage, alpha } from '../../_fixtures/Look';
+import { EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { ShotcraftWordmark } from '../../_fixtures/Brand';
+
+export const BLUR_SLIDE_DURATION = 120; // 4000ms @30fps
+
+const L = LOOKS.paper;
+const LEFT = 168; // 左侧安全边距 / 网格起点
+
+// 单词：start 起始帧、dur 入场时长、dy 位移（px）、blur 最大模糊（px）。
+// opacity / translateY / blur（及可选字距）全部绑同一个 p —— 本卡的核心，不可拆成多条缓动。
+type Word = { text: string; start: number; dur: number; style?: React.CSSProperties; track?: [number, number] };
+
+const Words: React.FC<{ words: Word[]; dy: number; blur: number; gap: string; style: React.CSSProperties }> = ({ words, dy, blur, gap, style }) => {
+  const frame = useCurrentFrame();
+  return (
+    <div style={{ display: 'flex', alignItems: 'baseline', gap, whiteSpace: 'nowrap', ...style }}>
+      {words.map((w, i) => {
+        const p = ramp(frame, w.start, w.dur, EASE.out);
+        return (
+          <span
+            key={i}
+            style={{
+              display: 'inline-block',
+              opacity: p,
+              transform: `translateY(${((1 - p) * dy).toFixed(2)}px)`,
+              filter: p >= 0.999 ? undefined : `blur(${((1 - p) * blur).toFixed(2)}px)`,
+              letterSpacing: w.track ? `${(w.track[0] + (w.track[1] - w.track[0]) * p).toFixed(4)}em` : undefined,
+              ...w.style,
+            }}
+          >
+            {w.text}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// 主标题：第一行 3 词等距 4f；第二行先停 6f 换气，主角词入场窗更长、字距同 p 由松到紧
+const H1_A: Word[] = ['Make', 'every', 'launch'].map((text, i) => ({ text, start: 10 + i * 4, dur: 22 }));
+const H1_B: Word[] = [
+  { text: 'feel', start: 26, dur: 22 },
+  {
+    text: 'cinematic.', start: 30, dur: 30, track: [0.03, -0.025],
+    style: { fontStyle: 'italic', color: L.accent },
+  },
+];
+// 副标题：9 词，词间 2.4f（词数多于原稿，gap 按卡片规则压密）
+const H2: Word[] = 'Shot recipes and camera moves, crafted by your agent.'.split(' ').map((text, i) => ({ text, start: 34 + i * 2.4, dur: 20 }));
+
+export const BlurSlide: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 整组极缓推近：以文字块左缘为原点，全程 smooth，尾段速度归零
+  const push = 1 + 0.03 * ramp(frame, 0, 119, EASE.smooth);
+  // 刊头发丝线：从左向右画出
+  const rule = ramp(frame, 0, 24, EASE.snappy);
+  // 栏目眉题：同族 blur-slide，单元 = 整行
+  const kick = ramp(frame, 4, 18, EASE.out);
+  // 后景刊号：从虚焦里慢慢显影（比标题慢得多，只做空间层次）
+  const folio = ramp(frame, 0, 48, EASE.out);
+  // 刊脚：副标题收尾时（72f）起画，26f snappy
+  const foot = ramp(frame, 72, 26, EASE.snappy);
+  const headline: React.CSSProperties = {
+    fontFamily: SERIF, fontSize: 170, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.035em', color: L.ink,
+  };
+  return (
+    <Stage look={L} keyLight={{ x: 0.3, y: 0.18 }} fill={null} breathe={0.6} grain={0.06} vignette={0.1}>
+      {/* 纸面右下一抹朱红余温（极淡），让暖白不是死平 */}
+      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse 40% 50% at 96% 100%, ${alpha(L.accent, 0.06)}, ${alpha(L.accent, 0)} 70%)` }} />
+
+      {/* 后景：刊号大数字（5% 墨色），比文字层推得更慢且反向漂移 → 前后景视差 */}
+      <div
+        style={{
+          position: 'absolute', right: 120, top: 150, fontFamily: SERIF, fontSize: 760, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.06em',
+          color: alpha(L.ink, 0.045 * folio), filter: folio >= 0.999 ? undefined : `blur(${((1 - folio) * 24).toFixed(2)}px)`,
+          transform: `translateX(${(-24 * ramp(frame, 0, 119, EASE.smooth)).toFixed(2)}px)`,
+        }}
+      >
+        07
+      </div>
+        {/* 刊头：纹理级小字（不需要读），首帧即在；不随文字推近（页面家具是固定的） */}
+        <div style={{ position: 'absolute', left: LEFT, right: LEFT, top: 92, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: FONT.sans, fontSize: 24, fontWeight: 600, letterSpacing: '0.2em', color: L.ink2, opacity: 0.4 + 0.6 * rule }}>
+          {/* 刊头字标：video-shotcraft（全小写，字标不加 caps 字距） */}
+          <ShotcraftWordmark size={24} markScale={1.5} gap={12} tone="light" color={L.ink2} />
+          <span style={{ color: L.ink3 }}>N° 07 — OCTOBER 2026</span>
+        </div>
+        <div style={{ position: 'absolute', left: LEFT, top: 140, width: 1920 - LEFT * 2, height: 1.5, background: alpha(L.ink, 0.22), transform: `scaleX(${rule.toFixed(4)})`, transformOrigin: '0 50%' }} />
+
+        {/* 刊脚：副标题落定后从右向左画出一条发丝线 + 页码，给 hold 段一个收尾动作并把版面框成完整一页 */}
+        <div style={{ position: 'absolute', left: LEFT, top: 972, width: 1920 - LEFT * 2, height: 1.5, background: alpha(L.ink, 0.18), transform: `scaleX(${foot.toFixed(4)})`, transformOrigin: '100% 50%' }} />
+        <div style={{ position: 'absolute', right: LEFT, top: 994, fontFamily: FONT.sans, fontSize: 24, fontWeight: 600, letterSpacing: '0.2em', color: L.ink3, opacity: foot }}>
+          PAGE 07
+        </div>
+
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${push.toFixed(5)})`, transformOrigin: `${LEFT}px 560px` }}>
+        {/* 栏目眉题 */}
+        <div
+          style={{
+            position: 'absolute', left: LEFT, top: 318, display: 'flex', alignItems: 'center', gap: 18,
+            fontFamily: FONT.sans, fontSize: 30, fontWeight: 650, letterSpacing: '0.16em', color: L.accent,
+            opacity: kick, transform: `translateY(${((1 - kick) * 18).toFixed(2)}px)`, filter: kick >= 0.999 ? undefined : `blur(${((1 - kick) * 6).toFixed(2)}px)`,
+          }}
+        >
+          <span style={{ width: 14, height: 14, background: L.accent, display: 'inline-block' }} />
+          RELEASE NOTES
+        </div>
+
+        {/* 主标题两行：衬线 170px，负字距 */}
+        <Words words={H1_A} dy={64} blur={18} gap="0.24em" style={{ ...headline, position: 'absolute', left: LEFT - 6, top: 384 }} />
+        <Words words={H1_B} dy={64} blur={18} gap="0.24em" style={{ ...headline, position: 'absolute', left: LEFT - 6, top: 556 }} />
+
+        {/* 副标题：无衬线 46px，位移与模糊都比主标题小一档 */}
+        <Words
+          words={H2}
+          dy={26}
+          blur={9}
+          gap="0.26em"
+          style={{ position: 'absolute', left: LEFT, top: 800, fontFamily: FONT.sans, fontSize: 46, fontWeight: 400, letterSpacing: '-0.012em', color: L.ink2, lineHeight: 1.2 }}
+        />
+      </div>
+    </Stage>
+  );
+};