dsh-drawai 0.3.4 → 0.4.1

package/lib/motion/shotcraft/upstream/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx

@@ -0,0 +1,223 @@
+// logo-shrink-wordmark-lockup — Shrink & Lockup 图标收束落位（motion-lab 定稿转原生 Remotion）
+// 霓虹切口大环 easeInOut 快速缩成中央实心小白 O，末尾过冲刹车的那一下换成 video-shotcraft「镜刻」标志，
+// 随后图标左移让位，字标 video-shotcraft 的字母从左到右逐个 opacity+8px 滑入完成 lockup，
+// 强调色标语延迟整行淡入收尾。设计坐标 480×270（DesignStage 等比放大，zoom 栅格化保字边锐利）。
+// 质感升级：背景换带色相的深场 + 随大环收束一起坍缩的紫色能量光晕；收束途中双弧边转边缩
+// （减速旋转 150°），高速段拖两层缩放残影当运动模糊；落位刹车瞬间放一圈细冲击波（只一次）；
+// 字母滑入带 2.5px→0 的对焦模糊；标语改成与霓虹同族的冷紫，不再是撞色的红。
+import React from 'react';
+import { AbsoluteFill } from 'remotion';
+import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';
+import { FONT, Grain, Vignette } from '../../_fixtures/Polish';
+import { BRAND, PITCH, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const LOGO_SHRINK_WORDMARK_LOCKUP_DURATION = 132; // 4400ms @30fps
+
+const ACCENT = '#9d94ff'; // 标语强调色：与霓虹晕同色相、提亮降饱和
+const WORDMARK = BRAND.name; // 字标全小写
+const ICON = 30; // 图标基准尺寸(px)
+const MARK = 32; // 标志尺寸：取景框实体 ≈ 0.81×MARK ≈ 26px，正好盖住愈合后的环
+const WORD_W = 172; // 字标行实测宽（22px / 700，15 字符；渲帧量得）
+const GAP = 9; // 图标与字标间距
+// 图标 lockup 左位偏移与字母行左缘耦合：整组（图标 + 间距 + 字标）在画面居中
+const SHIFT = -(ICON + GAP + WORD_W) / 2 + ICON / 2;
+const ROW_LEFT = SHIFT + ICON / 2 + GAP; // 字母行左缘相对画面中线
+const STAGGER = (0.7 - 0.46) / WORDMARK.length; // 字多：按 (0.7-0.46)/n 反算间隔，保证 0.7 前全部起跑
+const DT = 1 / 131; // 一帧对应的 t 增量（132f）
+
+// 圆弧 path（角度制，顺时针 sweep）
+const arcPath = (cx: number, cy: number, r: number, a0: number, a1: number) => {
+  const p = (a: number) => [cx + r * Math.cos((a * Math.PI) / 180), cy + r * Math.sin((a * Math.PI) / 180)];
+  const [x0, y0] = p(a0);
+  const [x1, y1] = p(a1);
+  const large = Math.abs(a1 - a0) > 180 ? 1 : 0;
+  return `M${x0.toFixed(2)},${y0.toFixed(2)} A${r},${r} 0 ${large} 1 ${x1.toFixed(2)},${y1.toFixed(2)}`;
+};
+
+// 双弧组：a0-a1 与其对角（+180°）两段圆弧 —— 带缺口的切口环
+const Arcs: React.FC<{ a0: number; a1: number; col: string; w: number; blur: number; opacity: number; stroke?: string }> = ({
+  a0,
+  a1,
+  col,
+  w,
+  blur,
+  opacity,
+  stroke,
+}) => (
+  <g opacity={opacity}>
+    {[
+      [a0, a1],
+      [a0 + 180, a1 + 180],
+    ].map(([b0, b1], i) => (
+      <path
+        key={i}
+        d={arcPath(15, 15, 10.5, b0, b1)}
+        fill="none"
+        stroke={stroke ?? col}
+        strokeWidth={w}
+        strokeLinecap="round"
+        style={blur ? { filter: `blur(${blur}px)` } : undefined}
+      />
+    ))}
+  </g>
+);
+
+// 收束主曲线：scale 5.4→1（easeInOut），末尾轻微 1.06 过冲刹车
+const scaleAt = (t: number) => {
+  const k = seg(t, 0.02, 0.28, E.inOutCubic);
+  const brake = Math.sin(seg(t, 0.26, 0.37) * Math.PI) * 0.06;
+  return lerp(k, 5.4, 1) * (1 + brake);
+};
+// 收束途中的自转：减速转 150°（缺口在缩小中"拧紧"），愈合后肉眼不可见
+const spinAt = (t: number) => -150 * seg(t, 0.0, 0.3, E.outCubic);
+
+export const LogoShrinkWordmarkLockup: React.FC = () => {
+  const t = useT();
+  const s = scaleAt(t);
+  const spin = spinAt(t);
+  // 左移让位：落位后 t 0.34-0.47
+  const shift = seg(t, 0.34, 0.47, E.inOutCubic) * SHIFT;
+  // 霓虹缺口态 → 实心白 O 交叉淡化（随收束进行）
+  const heal = seg(t, 0.10, 0.28, E.inOutQuad);
+  // 白 O → video-shotcraft 标志：落位刹车那一下（与冲击波同拍）交叉换成标志，换标时已缩到最终尺寸
+  const markIn = seg(t, 0.24, 0.32, E.inOutQuad);
+  // 缩放残影：按每帧缩放量给强度，静止时为 0
+  const ds = Math.abs(scaleAt(t) - scaleAt(t - DT));
+  const trail = Math.min(1, ds / 0.35);
+  // 冲击波：刹车回弹的那一下（t≈0.28）放一圈细环，扩散并消散
+  const wave = seg(t, 0.28, 0.46, E.outCubic);
+  // 能量光晕：开场罩住大环，随收束一起坍缩变小、落位后回落成图标背后的微光
+  const haloR = lerp(seg(t, 0.02, 0.3, E.inOutCubic), 150, 34);
+  const haloA = 0.5 - 0.32 * seg(t, 0.3, 0.5, E.outCubic);
+
+  // 外层只负责位移 + 缩放；环在内层旋转——标志本身始终不旋转（品牌规范：斜切角度不变）
+  const icon = (sc: number, rot: number, opacity: number, ghost = false) => (
+    <div
+      style={{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        width: ICON,
+        height: ICON,
+        margin: `${-ICON / 2}px 0 0 ${-ICON / 2}px`,
+        transform: `translateX(${shift}px) scale(${sc})`,
+        opacity,
+      }}
+    >
+      <svg viewBox="0 0 30 30" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible', transform: `rotate(${rot}deg)` }}>
+        {/* 霓虹晕（带缺口） */}
+        <Arcs a0={-32} a1={122} col="rgba(118,96,255,.62)" w={6.5} blur={2.5} opacity={1 - heal} />
+        {/* 霓虹芯：heal 过半后转纯白 */}
+        {!ghost && (
+          <Arcs a0={-32} a1={122} col="#dfe9ff" w={3.4} blur={0} opacity={(1 - heal * 0.75) * (1 - markIn)} stroke={heal > 0.5 ? '#fff' : '#dfe9ff'} />
+        )}
+        {/* 愈合后的实心白 O（过渡态，刹车时让给标志） */}
+        {!ghost && <circle cx={15} cy={15} r={10.5} fill="none" stroke="#fff" strokeWidth={5.5} opacity={heal * (1 - markIn)} />}
+      </svg>
+      {/* 愈合后的标准态：video-shotcraft 标志（反白版，无发光） */}
+      {!ghost && markIn > 0 && (
+        <ShotcraftMark size={MARK} tone="dark" style={{ position: 'absolute', left: (ICON - MARK) / 2, top: (ICON - MARK) / 2, opacity: markIn }} />
+      )}
+    </div>
+  );
+
+  // 底色标定：原样片 mp4（yuv420p，无色彩元数据）把 #05060a 解码回 rgb(3,5,9)；此处改用带色相的深场
+  return (
+    <AbsoluteFill>
+    <DesignStage bg="#06070c" raster="zoom">
+      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+        {/* 深场：顶部略亮的冷色纵向渐变 */}
+        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #0d0f17 0%, #07080d 60%, #05060a 100%)' }} />
+        {/* 能量光晕（随大环坍缩） */}
+        <div
+          style={{
+            position: 'absolute',
+            left: `calc(50% + ${shift}px - ${haloR}px)`,
+            top: `calc(50% - ${haloR}px)`,
+            width: haloR * 2,
+            height: haloR * 2,
+            borderRadius: '50%',
+            opacity: haloA,
+            background: 'radial-gradient(circle, rgba(110,92,255,0.42) 0%, rgba(110,92,255,0.12) 38%, rgba(110,92,255,0) 70%)',
+          }}
+        />
+        {/* 冲击波：细亮环 + 外圈柔光，扩散时变细变淡 */}
+        {wave > 0 && wave < 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: `calc(50% - ${lerp(wave, 16, 70)}px)`,
+              top: `calc(50% - ${lerp(wave, 16, 70)}px)`,
+              width: lerp(wave, 32, 140),
+              height: lerp(wave, 32, 140),
+              borderRadius: '50%',
+              boxSizing: 'border-box',
+              border: `${lerp(wave, 0.9, 0.25)}px solid rgba(214,220,255,${(0.55 * (1 - wave)).toFixed(3)})`,
+              boxShadow: `0 0 ${lerp(wave, 4, 10)}px rgba(130,112,255,${(0.45 * (1 - wave)).toFixed(3)})`,
+            }}
+          />
+        )}
+        {/* 缩放残影（只在高速段出现）：上 1f、上 2f 的尺度与角度 */}
+        {trail > 0.02 && icon(scaleAt(t - 2 * DT), spinAt(t - 2 * DT), 0.16 * trail, true)}
+        {trail > 0.02 && icon(scaleAt(t - DT), spinAt(t - DT), 0.3 * trail, true)}
+        {/* 图标：SVG 双弧切口环（演出态）→ 收束时缺口愈合、交叉淡入 video-shotcraft 标志（标准态） */}
+        {icon(s, spin, 1)}
+        {/* 字母行（图标右侧）：从左到右 stagger，opacity 0→1 + translateX 8px→0 + 对焦模糊 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: `calc(50% + ${ROW_LEFT}px)`,
+            top: '50%',
+            height: ICON,
+            marginTop: -ICON / 2,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0,
+          }}
+        >
+          {[...WORDMARK].map((ch, i) => {
+            const lk = seg(t, 0.46 + i * STAGGER, 0.46 + i * STAGGER + 0.10, E.outCubic);
+            return (
+              <span
+                key={i}
+                style={{
+                  color: '#f3f5fb',
+                  font: `700 22px/1 ${BRAND.font}`,
+                  letterSpacing: 0.66, // 字标 +0.03em
+                  whiteSpace: 'pre',
+                  opacity: lk,
+                  transform: `translateX(${lerp(lk, 8, 0)}px)`,
+                  filter: lk < 0.999 ? `blur(${lerp(lk, 2.5, 0).toFixed(2)}px)` : undefined,
+                  textShadow: '0 0 12px rgba(150,140,255,0.18)',
+                }}
+              >
+                {ch}
+              </span>
+            );
+          })}
+        </div>
+        {/* 强调色标语（品牌短句 motto）：延迟整行淡入，同时上移 3px 落座 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 'calc(50% + 34px)',
+            textAlign: 'center',
+            color: ACCENT,
+            font: `600 12.5px/1 ${FONT.sans}`,
+            letterSpacing: 2.6, // 29 字符：字距 4.6→2.6，宽度与 lockup 相称
+            opacity: seg(t, 0.72, 0.84, E.outQuad),
+            transform: `translateY(${lerp(seg(t, 0.72, 0.86, E.outCubic), 3, 0)}px)`,
+          }}
+        >
+          {PITCH.en.motto.toUpperCase()}
+        </div>
+      </div>
+    </DesignStage>
+    {/* 暗角与颗粒放在设计坐标外，按 1920 原生像素铺，颗粒不被 zoom 放大成色块 */}
+    <Vignette strength={0.55} inner={0.4} color="#000000" />
+    <Grain opacity={0.07} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx

@@ -0,0 +1,217 @@
+// neon-triple-marquee —— 三行对向霓虹跑马灯 recap（clickup-30 61–64.5s 的手法）
+//
+// 第二轮重设计（夜里的灯牌墙 · 斜拍 + 湿地面反光）：
+// - look = custom「neon」：蓝黑砖墙 + 三色灯管（冰青 / 洋红 / 钠灯琥珀）。不再是平铺的彩色描边字，
+//   而是一面真实的霓虹灯牌墙：机位斜拍（墙面 rotateY −17°→−9° 极缓摇近，透视让词流有纵深），
+//   墙下是一条湿地面，亮着的那行在地上投出倒影与色光池。
+// - 灯管三层：暗态玻璃管（同色、低亮、常亮——三行结构永远在）→ 通电彩色管体 + 双层辉光 → 近白热芯；
+//   亮行的光同时溢到身后砖墙上（砖缝被照出来），这是"灯在墙上"而不是"字在屏上"。
+// - 字体换成粗体窄体（Avenir Next Condensed Heavy），三连词 FRAME / CRAFT / SHIP（video-shotcraft 的
+//   "取景 → 刻镜头 → 交片"，取自品牌短句 Frame motion. Craft the shot.，recap 用）；
+//   词距按 canvas 实测宽度排，分隔用空心菱形 ◇。
+// - 轮唱：周期 42f、相位差 14f，一亮俩暗；每次点亮先打 2 帧点火闪烁（真霓虹的启辉），再余弦软包络。
+//   开场三行按 0/5/10f 依次点火闪烁上电；尾段 124f 起自上而下逐行"断电"（闪两下熄灭），
+//   落到只剩暗态玻璃管的熄灯海报（墙仍可见），不淡到死黑。
+//
+// 时间表（30fps，共 150f）：
+//   0–18     上电：三行依次点火闪烁（0/5/10f 起），暗态玻璃管亮起
+//   18–124   轮唱：42f 周期、14f 相位差，奇偶行反向匀速滚动（marquee 豁免 linear）
+//   124–142  断电：自上而下每行错峰 6f 闪两下熄灭
+//   142–150  熄灯 hold：暗态灯管 + 墙面余光
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, Grain, Vignette, ramp, mix } from '../../_fixtures/Polish';
+import { alpha } from '../../_fixtures/Look';
+
+export const NEON_TRIPLE_MARQUEE_DURATION = 150;
+
+const FONT = '"Avenir Next Condensed", "DIN Condensed", "Arial Narrow", Impact, sans-serif';
+const WEIGHT = 800;
+const SIZE = 286;
+const GAP = SIZE * 0.36;
+const PLANE_W = 2900; // 墙面宽（透视斜拍时两侧不露边）
+const FLOOR_Y = 900; // 墙脚 / 地面线（墙面坐标）
+const ROW_Y = [28, 318, 608];
+
+const WALL = '#0a0b14';
+// 砖墙纹理：两行错缝砖（SVG 小图平铺），砖缝极淡——被灯光照到才看得见
+const BRICK = `url("data:image/svg+xml;utf8,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'>" +
+  "<rect width='300' height='120' fill='none'/>" +
+  "<g stroke='rgba(255,255,255,0.04)' stroke-width='3'>" +
+  "<line x1='0' y1='1.5' x2='300' y2='1.5'/><line x1='0' y1='61.5' x2='300' y2='61.5'/>" +
+  "<line x1='1.5' y1='0' x2='1.5' y2='60'/><line x1='151.5' y1='0' x2='151.5' y2='60'/>" +
+  "<line x1='76.5' y1='60' x2='76.5' y2='120'/><line x1='226.5' y1='60' x2='226.5' y2='120'/></g></svg>",
+)}")`;
+
+// 实测文本宽度（同字体同字号，确定性）；无 DOM 时退回估宽
+const widthCache = new Map<string, number>();
+const measure = (text: string) => {
+  const hit = widthCache.get(text);
+  if (hit !== undefined) return hit;
+  let w = text.length * SIZE * 0.6;
+  if (typeof document !== 'undefined') {
+    const ctx = document.createElement('canvas').getContext('2d');
+    if (ctx) {
+      ctx.font = `${WEIGHT} ${SIZE}px ${FONT}`;
+      w = ctx.measureText(text).width + text.length * SIZE * 0.02; // letterSpacing 0.02em
+    }
+  }
+  widthCache.set(text, w);
+  return w;
+};
+
+type Row = { word: string; color: string; core: string; dir: 1 | -1; speed: number };
+const ROWS: Row[] = [
+  { word: 'FRAME', color: '#38d9ff', core: '#e9fbff', dir: 1, speed: 9 },
+  { word: 'CRAFT', color: '#ff3d9a', core: '#ffe6f3', dir: -1, speed: 11 },
+  { word: 'SHIP', color: '#ffae34', core: '#fff3dc', dir: 1, speed: 9 },
+];
+
+// 点火闪烁序列（确定性）：0/1 门，6 帧后恒 1
+const IGNITE = [0, 1, 0.15, 0, 0.9, 0.6];
+const ignite = (f: number, at: number) => {
+  const k = Math.floor(f - at);
+  if (k < 0) return 0;
+  return k < IGNITE.length ? IGNITE[k] : 1;
+};
+// 断电序列：闪两下熄灭
+const KILL = [1, 0.2, 0.85, 0.1, 0.5, 0];
+const kill = (f: number, at: number) => {
+  const k = Math.floor(f - at);
+  if (k < 0) return 1;
+  return k < KILL.length ? KILL[k] : 0;
+};
+
+const PERIOD = 42;
+const SLOT = PERIOD / 3; // 每行 14f
+// 轮唱亮度：每行在自己的 14f 槽里点亮——前 2 帧启辉闪烁、3f 升满、平台、最后 4f ease-in 熄灭并与下一行
+// 重叠 2f 交接（任意时刻总有一行在亮，"一亮俩暗"不出现全暗空拍）
+const pulse = (f: number, i: number) => {
+  if (f < 18) return 0;
+  const ph = ((((f - 18) - i * SLOT) % PERIOD) + PERIOD) % PERIOD;
+  const len = SLOT + 2;
+  if (ph >= len) return 0;
+  const fl = ph < 1 ? 0.6 : ph < 2 ? 0.25 : 1; // 启辉
+  const up = ramp(ph, 1, 3, EASE.out);
+  const down = 1 - ramp(ph, len - 5, 5, EASE.exit);
+  return Math.max(up * down, 0) * fl;
+};
+
+const MarqueeRow: React.FC<{ row: Row; f: number; y: number; lit: number; glass: number; cheap?: boolean }> = ({ row, f, y, lit, glass, cheap }) => {
+  const wordW = measure(row.word);
+  const dotW = SIZE * 0.42;
+  const unitW = wordW + GAP + dotW + GAP;
+  const copies = Math.ceil(PLANE_W / unitW) + 3;
+  const raw = (f * row.speed) % unitW;
+  const offset = row.dir === 1 ? -unitW * 1.5 + raw : -unitW * 0.5 - raw;
+  const base: React.CSSProperties = {
+    position: 'absolute', top: y, left: 0, width: PLANE_W, height: SIZE * 1.05,
+    transform: `translateX(${offset.toFixed(2)}px)`,
+    fontFamily: FONT, fontWeight: WEIGHT, fontSize: SIZE, letterSpacing: '0.02em', lineHeight: 1, color: 'transparent',
+  };
+  // 分隔：空心菱形（边框色 / 粗细与同层灯管一致，字本身只描边不填色）
+  const text = (sep: string, bw: number) => Array.from({ length: copies }).map((_, i) => (
+    <span key={i} style={{ position: 'absolute', left: i * unitW, top: 0, whiteSpace: 'nowrap' }}>
+      {row.word}
+      <span style={{
+        position: 'absolute', left: wordW + GAP + dotW * 0.2, top: SIZE * 0.34, width: dotW * 0.6, height: dotW * 0.6,
+        transform: 'rotate(45deg)', boxSizing: 'border-box', border: `${bw.toFixed(2)}px solid ${sep}`, borderRadius: 6,
+      }} />
+    </span>
+  ));
+  const tube = 6 + lit * 4;
+  const core = 2 + lit * 1.8;
+  return (
+    <>
+      {/* 暗态玻璃管：同色低亮，三行结构永远在 */}
+      <div style={{ ...base, WebkitTextStroke: `6px ${alpha(row.color, 0.3 * glass)}` }}>{text(alpha(row.color, 0.3 * glass), 6)}</div>
+      {lit > 0.02 && (
+        <>
+          {/* 通电管体 + 双层辉光 */}
+          <div style={{
+            ...base, WebkitTextStroke: `${tube.toFixed(2)}px ${row.color}`, opacity: Math.min(1, lit * 1.1),
+            filter: cheap ? undefined : `drop-shadow(0 0 ${(3 + lit * 6).toFixed(1)}px ${row.color}) drop-shadow(0 0 ${(14 + lit * 22).toFixed(1)}px ${row.color}) drop-shadow(0 0 ${(40 + lit * 50).toFixed(1)}px ${alpha(row.color, 0.9)})`,
+          }}>{text(row.color, tube)}</div>
+          {/* 热芯：近白细线，只在通电时亮——"霓虹"而不是"彩色描边"的关键 */}
+          <div style={{ ...base, WebkitTextStroke: `${core.toFixed(2)}px ${row.core}`, opacity: Math.min(1, lit * 1.3), filter: cheap ? undefined : `drop-shadow(0 0 2px ${alpha(row.core, 0.9)})` }}>
+            {text(row.core, core)}
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export const NeonTripleMarquee: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 每行供电：上电点火 × 断电
+  const power = ROWS.map((_, i) => ignite(f, i * 5) * kill(f, 124 + i * 6));
+  // 暗态玻璃：上电后常亮，断电后仍留 0.6（熄灯海报：灯管看得见）
+  const glass = ROWS.map((_, i) => Math.max(ignite(f, i * 5), f >= 124 ? 1 : 0) * (1 - 0.25 * ramp(f, 124 + i * 6 + 4, 8, EASE.out)));
+  // 亮度：开场上电时全行点火亮一下（0.7）→ 轮唱
+  const lit = ROWS.map((_, i) => {
+    const boot = f < 18 ? 0.7 * ignite(f, i * 5) * (1 - ramp(f, 12, 6, EASE.out)) : 0;
+    const killFlash = f >= 124 ? 0.55 * kill(f, 124 + i * 6) * (f < 124 + i * 6 ? 0 : 1) : 0;
+    return Math.max(boot, pulse(f, i) * power[i], killFlash);
+  });
+
+  // 机位：墙面斜拍，rotateY −17° → −9° 极缓摇近（smooth），整体轻推
+  const cam = ramp(f, 0, 150, EASE.smooth);
+  const rotY = mix(-17, -9, cam);
+  const scale = mix(1.0, 1.05, cam);
+
+  return (
+    <AbsoluteFill style={{ background: '#05050a', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, perspective: 1700, perspectiveOrigin: '50% 45%' }}>
+        <div style={{
+          position: 'absolute', left: (1920 - PLANE_W) / 2, top: 40, width: PLANE_W, height: 1200,
+          transform: `rotateY(${rotY.toFixed(3)}deg) scale(${scale.toFixed(4)})`, transformOrigin: '50% 40%',
+        }}>
+          {/* 砖墙：底色 + 极淡砖缝（被灯光照到才看得见） */}
+          <div style={{
+            position: 'absolute', left: 0, top: -40, width: PLANE_W, height: FLOOR_Y + 40, background: WALL,
+            backgroundImage: BRICK, backgroundSize: '300px 120px',
+          }} />
+          {/* 墙面溢光：每行身后一条同色柔光带，随亮度呼吸（screen 叠在砖墙上） */}
+          {ROWS.map((r, i) => (
+            <div key={`spill${i}`} style={{
+              position: 'absolute', left: 0, right: 0, top: ROW_Y[i] - 200, height: SIZE + 400, mixBlendMode: 'screen',
+              background: `radial-gradient(ellipse 50% 44% at 50% 50%, ${alpha(r.color, 0.6)} 0%, ${alpha(r.color, 0.12)} 45%, ${alpha(r.color, 0)} 72%)`,
+              opacity: 0.05 * glass[i] + lit[i] * 0.55,
+            }} />
+          ))}
+          {ROWS.map((r, i) => (
+            <MarqueeRow key={r.word} row={r} f={f} y={ROW_Y[i]} lit={lit[i]} glass={glass[i]} />
+          ))}
+          {/* 湿地面：墙脚以下一条深色反光面，倒影只取最下一行（翻转、虚化、渐隐） */}
+          <div style={{ position: 'absolute', left: 0, top: FLOOR_Y, width: PLANE_W, height: 300, background: 'linear-gradient(180deg, #08080e 0%, #040407 100%)' }} />
+          <div style={{
+            position: 'absolute', left: 0, top: FLOOR_Y, width: PLANE_W, height: 300, overflow: 'hidden',
+            WebkitMaskImage: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%)',
+            maskImage: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%)',
+            filter: 'blur(3px)',
+          }}>
+            {/* 镜像：墙面 y_w 处的点映到地面下 (FLOOR_Y − y_w)；内层 600 高、绕自身中心翻转 → 行放在 y_w − 300 */}
+            <div style={{ position: 'absolute', left: 0, top: 0, width: PLANE_W, height: 600, transform: 'scaleY(-1)', transformOrigin: '50% 50%' }}>
+              <MarqueeRow row={ROWS[2]} f={f} y={ROW_Y[2] - 300} lit={lit[2]} glass={glass[2]} cheap />
+            </div>
+          </div>
+          {/* 地面色光池：每行的光落在地上（远行更弱） */}
+          {ROWS.map((r, i) => (
+            <div key={`pool${i}`} style={{
+              position: 'absolute', left: 0, right: 0, top: FLOOR_Y - 40, height: 220, mixBlendMode: 'screen',
+              background: `radial-gradient(ellipse 46% 40% at 50% 30%, ${alpha(r.color, 0.55)} 0%, ${alpha(r.color, 0)} 70%)`,
+              opacity: lit[i] * [0.18, 0.28, 0.5][i],
+            }} />
+          ))}
+          {/* 墙脚接缝：一条发丝高光，把墙和地分开 */}
+          <div style={{ position: 'absolute', left: 0, top: FLOOR_Y, width: PLANE_W, height: 2, background: 'rgba(255,255,255,0.06)' }} />
+        </div>
+      </div>
+      <Vignette strength={0.62} inner={0.36} color="#020205" />
+      <Grain opacity={0.08} blend="soft-light" />
+    </AbsoluteFill>
+  );
+};