dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-reveal/ListReveal.tsx

@@ -0,0 +1,153 @@
+// list-reveal — 菜单逐项找位 + 整体慢漂移（两层不相干的运动）
+//
+// 第二轮重设计（石墨暗场 · 侧边栏海报）：
+// - look = graphite（近单色暗场，白为强调、香槟金只做点缀）。主体是一列 700×92 的侧边栏条目
+//   （Home / Shots / Renders / Reviews / Settings / Sign out——video-shotcraft 工作台侧栏），46px 字、34px 线性图标、
+//   26px 等宽快捷键；当前项 Home 是一块受光的瓷白实心条（全片唯一的高亮），未读徽章用香槟金。
+//   右侧一句 120px 标题「Every shot, within reach.」+ 36px 副句，构成左列表右标题的发布片海报。
+// - 手法本身（保留并做清楚）：两层运动完全解耦——
+//   ① 逐项找位：每项 24f，scale 0.82→1 + 上移 44→0 + 对焦模糊 8px→0，软 back 过冲（~1.5%，
+//      几乎读不出，只把落位那一帧"扣住"）；错峰 10f（"逐项读得完"的间隔），相邻约 2–3 项同时在动；
+//      图标晚 2f、快捷键晚 4f 落定（跟随）。
+//   ② 整体漂移：列表容器全程匀速上移 96px（≈0.8px/f），量级是单项位移的 2 倍、速度却慢一个数量级，
+//      所以读作"画面在呼吸"而不是"一起往上飘"。末帧不回位（与卡片定义一致）。
+// - 标题等列表铺到一半才进（Q5：开场只给列表一个主角），逐行从线下升起。
+//
+// 时间表（30fps，共 120f）：
+//   0–2     舞台光已在，容器开始漂移
+//   2–26    Home 找位（瓷白条，第一拍）
+//   12–86   其余五项按 10f 错峰找位（Sign out 前的分隔线随之显现）
+//   46–80   右侧标题逐行升起、副句淡入
+//   86–120  hold：漂移继续、光呼吸，尾帧是完整海报
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, bezier, ramp } from '../../_fixtures/Polish';
+import { Dust, LOOKS, Sheen, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+
+export const LIST_REVEAL_DURATION = 120;
+
+const L = LOOKS.graphite;
+
+const ITEMS = [
+  { label: 'Home', key: '⌘1' },
+  { label: 'Shots', key: '⌘2' },
+  { label: 'Renders', key: '⌘3' },
+  { label: 'Reviews', key: '' },
+  { label: 'Settings', key: '⌘,' },
+  { label: 'Sign out', key: '' },
+];
+
+const ROW_W = 700;
+const ROW_H = 92;
+const GAP = 14;
+const LIST_X = 170;
+const LIST_Y = 236; // 漂移中点处的列表顶
+const DRIFT = 96; // 全程总漂移（+48 → −48）
+
+const START = 2; // 首项起点
+const STAGGER = 10;
+const EACH = 24;
+const softBack = bezier(0.3, 1.18, 0.5, 1); // 软过冲 ~1.5%
+
+const Icon: React.FC<{ i: number; color: string }> = ({ i, color }) => {
+  const p = { fill: 'none', stroke: color, strokeWidth: 1.7, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+  return (
+    <svg width={34} height={34} viewBox="0 0 24 24">
+      {i === 0 && (<><path d="M4 10.5 12 4l8 6.5V19a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19Z" {...p} /><path d="M9.5 20.5v-6h5v6" {...p} /></>)}
+      {i === 1 && <path d="M3.5 7.5a2 2 0 0 1 2-2h4l2 2.2h7a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2Z" {...p} />}
+      {i === 2 && (<><rect x={3.5} y={5} width={17} height={14} rx={2.5} {...p} /><path d="M10.2 9.2v5.6l4.6-2.8Z" {...p} /></>)}
+      {i === 3 && <path d="M4 6.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2h-7l-4.5 3.5V16H6a2 2 0 0 1-2-2Z" {...p} />}
+      {i === 4 && (<><circle cx={12} cy={12} r={3} {...p} /><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8" {...p} /></>)}
+      {i === 5 && (<><path d="M14 4h3.5A1.5 1.5 0 0 1 19 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" {...p} /><path d="M10 8l-4 4 4 4M6 12h9" {...p} /></>)}
+    </svg>
+  );
+};
+
+export const ListReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 整体漂移：全程匀速（"呼吸"层，故意线性，与逐项曲线无关）
+  const drift = DRIFT / 2 - (DRIFT * frame) / (LIST_REVEAL_DURATION - 1);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[2], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.26, y: 0.02 }} fill={{ x: 0.85, y: 0.9 }} intensity={0.5} breathe={0.5} grain={0.09} vignette={0.6}>
+        <Dust look={L} count={22} seed={7} drift={0.12} opacity={0.3} />
+      </Stage>
+
+      {/* 列表：整体漂移层 */}
+      <div style={{ position: 'absolute', left: LIST_X, top: LIST_Y, width: ROW_W, transform: `translateY(${drift.toFixed(3)}px)` }}>
+        {ITEMS.map((it, i) => {
+          const t0 = START + i * STAGGER;
+          const lin = ramp(frame, t0, EACH, EASE.linear);
+          const p = softBack(lin);
+          const pIcon = softBack(ramp(frame, t0 + 2, EACH, EASE.linear));
+          const pKey = ramp(frame, t0 + 4, EACH - 4, EASE.out);
+          const active = i === 0;
+          const last = i === ITEMS.length - 1;
+          const y = i * (ROW_H + GAP) + (last ? 22 : 0);
+          const blur = (1 - EASE.out(lin)) * 8;
+          return (
+            <React.Fragment key={i}>
+              {last && (
+                <div style={{
+                  position: 'absolute', left: 24, right: 24, top: y - 18, height: 1, background: alpha('#ffffff', 0.1),
+                  transform: `scaleX(${ramp(frame, t0, EACH, EASE.snappy).toFixed(4)})`, transformOrigin: '0 50%',
+                }} />
+              )}
+              <div style={{
+                position: 'absolute', left: 0, top: y, width: ROW_W, height: ROW_H, borderRadius: 24, boxSizing: 'border-box',
+                display: 'flex', alignItems: 'center', gap: 26, padding: '0 34px 0 30px',
+                background: active ? 'linear-gradient(180deg, #f7f6f2 0%, #e9e8e3 100%)' : 'linear-gradient(180deg, #1c1d21 0%, #161719 100%)',
+                boxShadow: active
+                  ? `inset 0 1px 0 #ffffff, 0 18px 40px -14px rgba(0,0,0,0.75), 0 0 60px -10px ${alpha('#ffffff', 0.16)}`
+                  : `inset 0 0 0 1px ${alpha('#ffffff', 0.07)}, inset 0 1px 0 ${alpha('#ffffff', 0.06)}, 0 14px 30px -14px rgba(0,0,0,0.8)`,
+                opacity: Math.min(1, lin * 2.2),
+                filter: blur > 0.3 ? `blur(${blur.toFixed(2)}px)` : undefined,
+                transform: `translateY(${((1 - p) * 44).toFixed(2)}px) scale(${(0.82 + 0.18 * p).toFixed(4)})`,
+                transformOrigin: '30% 50%', overflow: 'hidden',
+              }}>
+                {/* 当前项落位后一次扫光（Q4：只给主角一次，裁进圆角） */}
+                {active && <Sheen progress={ramp(frame, 22, 26, EASE.swift)} strength={0.6} width={0.18} />}
+                <div style={{
+                  width: 56, height: 56, borderRadius: 16, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  background: active ? alpha('#000000', 0.06) : alpha('#ffffff', 0.05),
+                  transform: `scale(${(0.72 + 0.28 * pIcon).toFixed(4)})`, opacity: Math.min(1, Math.max(0, pIcon) * 2),
+                }}>
+                  <Icon i={i} color={active ? '#141416' : last ? L.ink3 : L.ink2} />
+                </div>
+                <div style={{ ...type(46, active ? 680 : 560), color: active ? '#0f0f11' : last ? L.ink3 : L.ink, whiteSpace: 'nowrap' }}>{it.label}</div>
+                <div style={{ marginLeft: 'auto', opacity: pKey, transform: `translateX(${((1 - pKey) * 14).toFixed(2)}px)` }}>
+                  {i === 3 ? (
+                    <div style={{
+                      minWidth: 50, height: 40, padding: '0 14px', boxSizing: 'border-box', borderRadius: 20, background: L.accent2,
+                      color: '#1a1408', display: 'flex', alignItems: 'center', justifyContent: 'center', ...type(26, 750),
+                      boxShadow: `0 0 24px -4px ${alpha(L.accent2, 0.7)}`,
+                    }}>3</div>
+                  ) : it.key ? (
+                    <div style={{ ...type(26, 500, { mono: true }), color: active ? alpha('#000000', 0.45) : L.ink3 }}>{it.key}</div>
+                  ) : null}
+                </div>
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {/* 右侧标题：列表铺到一半才进 */}
+      <div style={{ position: 'absolute', left: 1010, top: 336, width: 780 }}>
+        <div style={{ ...type(24, 600, { mono: true }), letterSpacing: '0.16em', color: L.accent2, opacity: ramp(frame, 40, 16, EASE.out) }}>
+          video-shotcraft · workbench
+        </div>
+        <div style={{ ...type(120, 760), color: L.ink, marginTop: 26 }}>
+          <TextReveal text={'Every shot,\nwithin reach.'} by="line" start={46} each={22} gap={7} />
+        </div>
+        <div style={{
+          ...type(36, 450), color: L.ink2, marginTop: 34, lineHeight: 1.35, maxWidth: 760, whiteSpace: 'pre-line',
+          opacity: ramp(frame, 66, 18, EASE.out), transform: `translateY(${((1 - ramp(frame, 66, 18, EASE.snappy)) * 16).toFixed(2)}px)`,
+        }}>
+          {'Every recipe, render and storyboard,\none keystroke away.'}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-stack-press/ListStackPress.tsx

@@ -0,0 +1,238 @@
+// list-stack-press —— 列表卡从底部逐张飞上摞起，每张落地压弹整摞、计数器同步跳格
+// "堆叠有重量"：每张新卡落上来，已落定的整摞被压下再弹回——物理反馈里读出
+// "这是实打实攒下来的东西"。参考实现从 template ScenePapers 剥离：
+// 预备拍（计数器先于首卡 4–6f 亮起微缩，把视线引到堆叠区）；5 卡 12f 等距节拍
+// 从底部 600px 升入（交替 ±2° 倾斜收平 + scale 1.06→1）；后一张到场时整摞压下
+// 6px、8f 弹回（stackPress 脉冲——"有重量"的关键一笔）；落地后高亮条滞后 2–4f
+// 长出；收尾一道 glaze 扫光掠过整摞；屏幕空间 DigitRoll 计数器落一张滚一格。
+// 正视机位（堆叠/列表镜头必须正视，Q6），相机跟随堆叠向下。
+// 质感层（改版）：
+// · 相机从 5 段关键帧（每段各自缓入缓出、关键帧处速度归零）改成一条连续曲线逐帧喂给 PageCam2D
+// · 飞行卡按速度加纵向运动模糊；阴影改为随离地高度变化的两层（接触影 + 环境影）
+// · 高亮条按截图实测对准"与项目相关"项目名那一行，multiply 叠在字下（荧光笔），不再盖住正文
+// · glaze 改在最后一张落定后扫过，并裁进每张卡的圆角内（Q4）
+// · 计数器数字显式用系统无衬线 + tabular-nums（原先落到浏览器默认衬线），滚动时带纵向拖影
+import React from 'react';
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { PageCam2D, CamKey2D } from '../../_fixtures/PageCam2D';
+import { FONT, SpeedBlur, bezier, softShadow, velocity } from '../../_fixtures/Polish';
+import layout from '../../_textures/live-layout.json';
+
+export const LIST_STACK_PRESS_DURATION = 88; // 18–88f 落在 shot 内 offset 0
+
+const cards = layout.papers.cards;
+const PAGE_H = layout.papers.pageH;
+const MONO = FONT.mono;
+const AMBER = 'oklch(52% 0.115 65)';
+const FILES = ['paper1.png', 'paper2.png', 'paper3.png', 'paper4.png', 'paper5.png'];
+// 截图实测：每张卡里"与项目相关"项目名那一行（页面 px，卡内坐标）——高亮条只盖这一行
+const HL_TOP = 156, HL_H = 20, HL_LEFT = 16;
+const HL_W = [187, 244, 247, 240, 191];
+
+const CUES = [6, 18, 30, 42, 54]; // 首卡前留 6f 给计数器预备拍（anticipation）
+const DUR = 22;
+const FLY_EASE = Easing.bezier(0.45, 0.05, 0.25, 1.12);
+const TILTS = [2, -2, 2, -2, 2];
+
+// 预备拍：计数器先于首卡亮起 + 微缩 (0.96→1)，把视线引到堆叠区（段落级一次）
+const ANTICIPATE_START = 0;
+const ANTICIPATE_END = 6;
+
+// 相机：一条连续曲线（页头近景 1.35 → 整摞全景 0.86），纵向跟随堆叠；
+// 竖向位置先走、推拉略晚收，82f 后静止留给扫光与计数落定
+const CAM_END = 82;
+const CY_EASE = bezier(0.42, 0, 0.2, 1);
+const Z_EASE = bezier(0.3, 0, 0.18, 1);
+const camAt = (f: number) => {
+  const u = Math.min(1, Math.max(0, f / CAM_END));
+  return { cx: 960, cy: 270 + (815 - 270) * CY_EASE(u), zoom: 1.35 + (0.86 - 1.35) * Z_EASE(u) };
+};
+// 逐帧关键帧 + 线性插值 = 把连续曲线原样交给 PageCam2D（它的分段缓动会在关键帧处停顿）
+const CAM_KEYS: CamKey2D[] = Array.from({ length: LIST_STACK_PRESS_DURATION }, (_, f) => ({ frame: f, ...camAt(f) }));
+const LINEAR = (t: number) => t;
+
+// odometer digit column —— 连续里程计，不重挂：`pos` 是数字带上的连续位置
+// （0→5），每张卡落地让 pos 多滚进一格。单格滚动必须短于 12f 落卡间距、
+// 且最后一格在镜头结束前落定——key 重挂从 0 重滚 22f 的写法两条都踩
+// （前一格永远滚不完、尾帧停在 4）。
+const DIGITS = '0123456789';
+const ROLL_DUR = 8; // 单格滚动帧数，< 12f 落卡间距
+const ROLL_EASE = Easing.bezier(0.25, 0.8, 0.25, 1);
+const rollAt = (frame: number) => {
+  let pos = 0;
+  for (const c of CUES) {
+    pos += interpolate(frame, [c + DUR, c + DUR + ROLL_DUR], [0, 1], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: ROLL_EASE,
+    });
+  }
+  return pos;
+};
+const DigitRoll: React.FC<{ pos: number; lineH: number; color: string; blur: number }> = ({ pos, lineH, color, blur }) => (
+  <span style={{ display: 'inline-flex', overflow: 'hidden', height: lineH, verticalAlign: 'bottom' }}>
+    <span style={{ display: 'inline-block', height: lineH }}>
+      <span style={{ display: 'block', transform: `translateY(${-pos * lineH}px)`, filter: blur > 0.3 ? `blur(${blur.toFixed(2)}px)` : undefined }}>
+        {(DIGITS + DIGITS).split('').map((d, j) => (
+          <span
+            key={j}
+            style={{
+              display: 'block', fontFamily: FONT.sans, fontWeight: 500, fontSize: 104, letterSpacing: '-0.04em',
+              lineHeight: `${lineH}px`, color, fontVariantNumeric: 'tabular-nums',
+            }}
+          >
+            {d}
+          </span>
+        ))}
+      </span>
+    </span>
+  </span>
+);
+
+// 飞行进度（含过冲）与纵向位移，作为帧的纯函数——速度模糊要在相邻帧求值
+const flyT = (i: number, f: number) =>
+  interpolate(f, [CUES[i], CUES[i] + DUR], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: FLY_EASE });
+const flyY = (i: number, f: number) => 600 * (1 - flyT(i, f));
+
+export const ListStackPress: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 计数器连续位置：每张卡落地（cue+DUR）时向前滚一格，8f 滚定。
+  // 最后一张 f76 落地、f84 滚定，早于 f88 镜头结束。
+  const rollPos = rollAt(frame);
+  const rollV = Math.abs(velocity(rollAt, frame)); // 格/帧
+
+  // 预备拍：计数器 0→6f 从 scale 0.96 微缩回 1 并亮起，视线先引到堆叠区
+  const antT = interpolate(frame, [ANTICIPATE_START, ANTICIPATE_END], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.quad),
+  });
+  const counterScale = 0.96 + 0.04 * antT;
+  const counterOpacity = 0.3 + 0.7 * antT;
+
+  // when a *later* card enters, the settled stack gets pressed down 6px then
+  // springs back over ~8 frames
+  const stackPress = (settledIndex: number) => {
+    let press = 0;
+    for (let j = settledIndex + 1; j < CUES.length; j++) {
+      const cue = CUES[j];
+      const p = interpolate(frame, [cue, cue + 4, cue + 8], [0, 6, 0], {
+        extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.sin),
+      });
+      press = Math.max(press, p);
+    }
+    return press;
+  };
+
+  // glaze：最后一张 f76 落定后从左上扫过整摞（页面坐标），只在卡片圆角内可见
+  const glazeX = interpolate(frame, [74, 87], [-500, 2300], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.45, 0, 0.35, 1),
+  });
+  const glazeVis = interpolate(frame, [74, 77, 84, 87], [0, 1, 1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#faf7f2' }}>
+      <PageCam2D src="textures/live/papers-full.png" pageH={PAGE_H} keys={CAM_KEYS} ease={LINEAR}>
+        {/* cover the printed cards so blank slots stack in */}
+        {cards.map((c, i) => (
+          <div
+            key={`slot-${i}`}
+            style={{
+              position: 'absolute', left: c.x - 12, top: c.y - 10,
+              width: c.w + 24, height: c.h + 20, background: '#faf7f2',
+              opacity: frame >= CUES[i] + DUR - 2 ? 0 : 1,
+            }}
+          />
+        ))}
+
+        {cards.map((c, i) => {
+          const cue = CUES[i];
+          const t = flyT(i, frame);
+          if (t <= 0) return null;
+          const settled = t >= 0.999;
+          const dy = flyY(i, frame) + (settled ? stackPress(i) : 0);
+          const rot = TILTS[i] * (1 - t);
+          const scale = 1.06 - 0.06 * t;
+          // 离地高度：飞行段按剩余行程映射 0–56px，落定 3px（被压时更贴地）
+          const elev = settled ? 3 - stackPress(i) * 0.3 : 3 + 53 * Math.min(1, Math.max(0, 1 - t));
+          const vy = settled ? 0 : velocity((f) => flyY(i, f), frame);
+
+          // 高亮条：落地后滞后 3f 长出；最后一张离切点只剩 12f，节拍压缩到 5f 长 + 4f 淡
+          const lastCard = i === CUES.length - 1;
+          const hlStart = cue + DUR + (lastCard ? 2 : 3);
+          const hlLen = lastCard ? 5 : 7;
+          const hlGrow = interpolate(frame, [hlStart, hlStart + hlLen], [0, 1], {
+            extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.3, 0, 0.2, 1),
+          });
+          const hlFade = interpolate(frame, [hlStart + hlLen, hlStart + hlLen + (lastCard ? 4 : 5)], [1, 0], {
+            extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          });
+
+          const card = (
+            <div
+              style={{
+                position: 'absolute', left: c.x, top: c.y, width: c.w, height: c.h,
+                transform: `translateY(${dy.toFixed(3)}px) rotate(${rot.toFixed(4)}deg) scale(${scale.toFixed(5)})`,
+                transformOrigin: 'center center', borderRadius: 12,
+                boxShadow: softShadow(elev, { color: '#3c2d1e', strength: 1.15 }),
+              }}
+            >
+              <div style={{ position: 'absolute', inset: 0, borderRadius: 12, overflow: 'hidden' }}>
+                <Img src={staticFile(`textures/live/${FILES[i]}`)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }} />
+                {hlGrow > 0 && hlFade > 0 ? (
+                  // 荧光笔：multiply 叠在字下，字保持原深度
+                  <div
+                    style={{
+                      position: 'absolute', left: HL_LEFT, top: HL_TOP, height: HL_H,
+                      width: HL_W[i] * hlGrow, borderRadius: 3,
+                      background: 'oklch(90% 0.075 82)', mixBlendMode: 'multiply', opacity: 0.85 * hlFade,
+                      pointerEvents: 'none',
+                    }}
+                  />
+                ) : null}
+                {/* glaze：一道斜向柔光，按页面坐标连续扫过整摞，被每张卡圆角裁切 */}
+                {glazeVis > 0 && (
+                  <div
+                    style={{
+                      position: 'absolute', top: -200, height: c.h + 400, left: glazeX - c.x - (c.y - 200) * 0.25, width: 360,
+                      transform: 'rotate(14deg)', opacity: glazeVis * 0.55, mixBlendMode: 'soft-light',
+                      background: 'linear-gradient(90deg, rgba(255,236,200,0), rgba(255,226,170,0.95) 45%, rgba(255,226,170,0.95) 55%, rgba(255,236,200,0))',
+                      pointerEvents: 'none',
+                    }}
+                  />
+                )}
+              </div>
+              {/* 顶部 1px 受光沿 + 发丝线（截图卡自带浅描边，这里只补受光） */}
+              <div style={{ position: 'absolute', inset: 0, borderRadius: 12, boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.9)', pointerEvents: 'none' }} />
+            </div>
+          );
+          return Math.abs(vy) > 1 ? (
+            <SpeedBlur key={FILES[i]} vx={0} vy={vy} amount={0.22} max={14}>
+              {card}
+            </SpeedBlur>
+          ) : (
+            <React.Fragment key={FILES[i]}>{card}</React.Fragment>
+          );
+        })}
+      </PageCam2D>
+
+      {/* screen-space counter, top-right — lands one digit per card */}
+      <div
+        style={{
+          position: 'absolute', top: 70, right: 96, textAlign: 'right',
+          pointerEvents: 'none', opacity: counterOpacity,
+          transform: `scale(${counterScale})`, transformOrigin: 'top right',
+        }}
+      >
+        <div style={{ fontFamily: MONO, fontSize: 22, fontWeight: 500, letterSpacing: '0.18em', color: 'oklch(48% 0.008 82)', textTransform: 'uppercase' }}>
+          Paper Radar
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
+          <DigitRoll pos={rollPos} lineH={104 * 1.12} color={AMBER} blur={Math.min(6, rollV * 30)} />
+        </div>
+        <div style={{ height: 1, background: 'oklch(80% 0.01 82)', margin: '8px 0 10px auto', width: 220 }} />
+        <div style={{ fontFamily: MONO, fontSize: 19, letterSpacing: '0.14em', color: 'oklch(52% 0.008 82)', textTransform: 'uppercase' }}>
+          Of 31 Fetched Today
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};