dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx

@@ -0,0 +1,218 @@
+// hashtag-to-pill-materialize（bear-app 18–21.5s 重做版，按原片密帧逐帧对照）
+// 原片实测节奏（25fps 逐帧）：
+//  1) 白底居中打字 "#music"：几何无衬线（Futura 气质）、中灰墨色、红色实心光标恒亮不闪、人手节奏
+//  2) 实体化 = 1 帧硬切：文字+光标 → 宽大浅灰无描边胶囊 + 灰色双八分音符图标 + "music"（字号不变，#被图标替换）
+//  3) 停约 0.6s → 整体平滑缩小（→~0.55x）并左移落到页面标签位（约 0.55s，easeInOut）
+//  4) 再 1 帧硬切揭示成品笔记页：奶油底、墨绿大标题 "My favorite shots"、胶囊换成鼠尾草绿、正文三行——
+//     原片没有"胶囊飞入下方滑入卡片"的段落（批次 8 的飞行段为杜撰，已砍）
+// 质感升级：两张底都换成带极淡纸感的渐变 + 颗粒（防大面积纯色死平）；胶囊是"实体"——受光上沿
+// 内高光 + 微体积渐变 + 离地软影（hero 时浮起 10px，缩移中随落位降到 0，归位即"嵌进"页面）；
+// 缩移段按速度给方向性运动模糊；成品页补一行页眉元信息（面包屑 + 编辑时间），版式完整。
+// 两次硬切、缩移曲线与全部时间点不变。
+// 品牌轮：话题词 "#music" → "#shots"（与原词等长，胶囊版式不变），音符图标换场记板，
+// 成品页讲 video-shotcraft 的镜头（标题 "My favorite shots"，正文点名 video-shotcraft）。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { Grain, SpeedBlur, velocity } from '../../_fixtures/Polish';
+
+// 揭示 83f 后真静止 37f（≈1.2s 呼吸，R1），全段 4s
+export const HASHTAG_TO_PILL_MATERIALIZE_DURATION = 120;
+const FONT = "Futura, 'Century Gothic', 'Avenir Next', 'Trebuchet MS', sans-serif";
+
+const C = {
+  bgWhite: 'linear-gradient(180deg, #fdfdfc 0%, #fbfbfa 60%, #f6f6f3 100%)',
+  bgCream: 'linear-gradient(180deg, #f6f3e8 0%, #f3f0e4 55%, #eeeadc 100%)',
+  meta: '#a7a392',
+  ink: '#454543',
+  cursor: '#e0453f',
+  pillGray: '#e9e9e7',
+  pillTextGray: '#4b4b49',
+  iconGray: '#7e7e7c',
+  pillSage: '#d5e0cf',
+  iconSage: '#5c7a63',
+  titleGreen: '#2d5c47',
+  pillSageText: '#3f5e4c',
+  body: '#4c4b43',
+};
+
+// ---- mulberry32（仅用于打字节奏的人手抖动，确定性）----
+function mulberry32(seed: number) {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+const TEXT = '#shots';
+// 打字起点 & 每字间隔（帧），4–8 帧带抖动，模拟原片真人节奏
+const TYPE_START = 8;
+const rand = mulberry32(20260717);
+const TYPE_AT: number[] = (() => {
+  const at: number[] = [];
+  let f = TYPE_START;
+  for (let i = 0; i < TEXT.length; i++) {
+    at.push(f);
+    f += 4 + Math.floor(rand() * 3); // 4–6 帧（原片 ~6字/秒）
+  }
+  return at;
+})();
+
+// ---- 时间轴（30fps，共 132 帧，节奏对齐原片 18–21.5s）----
+const MORPH = 48;       // 1 帧硬切实体化（打完 hold ~0.5s，原片 0.45s）
+const MOVE_START = 66;  // 胶囊开始缩小左移（morph 后 0.6s，原片同）
+const MOVE_END = 80;    // 落位（0.47s，原片 ~0.45s）
+const REVEAL = 83;      // 1 帧硬切揭示成品页，之后静置收尾
+
+// ---- 几何（1920x1080，等比换算自原片 1280x720 实测像素）----
+const FS = 132;                       // 打字/胶囊文字字号（原片 glyph 等高换算）
+const HERO = { x: 960, y: 540 };      // 大胶囊中心
+const PILL_W = 740, PILL_H = 236;     // 原片实测 493x157 @720p ×1.5
+const END_SCALE = 0.554;              // 落位缩放（原片 273/493）
+const SLOT = { x: 361, y: 473 };      // 标签位中心（原片灰胶囊落点 (244.5,317.5)×1.5 与揭示位折中）
+
+// 场记板图标（实心剪影，与原音符图标同一视觉重量）：板身 + 左铰链翘起的拍板，拍板斜纹用遮罩镂空
+const ClapperIcon: React.FC<{ size: number; color: string }> = ({ size, color }) => {
+  const id = React.useId().replace(/[^a-zA-Z0-9]/g, '');
+  return (
+    <svg width={size} height={size} viewBox="0 0 48 48" style={{ display: 'block' }}>
+      <defs>
+        <mask id={`k${id}`}>
+          <rect x="0" y="0" width="48" height="48" fill="#fff" />
+          {[0, 1, 2].map((i) => (
+            <polygon key={i} points={`${11 + i * 10},8 ${15.5 + i * 10},8 ${19.5 + i * 10},18 ${15 + i * 10},18`} fill="#000" />
+          ))}
+        </mask>
+      </defs>
+      <rect x="4" y="21" width="40" height="23" rx="3.5" fill={color} />
+      <g transform="rotate(-17 5 19.5)">
+        <rect x="4" y="9" width="40" height="9" rx="2" fill={color} mask={`url(#k${id})`} />
+      </g>
+    </svg>
+  );
+};
+
+// 胶囊（大字号绘制，整体 transform 缩放，保证实体化前后文字原位等大）
+// lift = 离地高度（大字号坐标 px）：hero 时浮起，落位时归零贴进页面
+const Pill: React.FC<{ bg: string; iconColor: string; textColor: string; lift: number }> = ({ bg, iconColor, textColor, lift }) => (
+  <div style={{
+    width: PILL_W, height: PILL_H, borderRadius: PILL_H / 2,
+    // 无描边：实体感来自上亮下暗的微体积 + 顶沿内高光 + 离地软影（不是边框）
+    background: `linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,0.025) 100%), ${bg}`,
+    boxShadow: `inset 0 3px 0 rgba(255,255,255,0.7), inset 0 -2px 0 rgba(40,40,30,0.03), ` +
+      `0 ${(1 + lift * 0.12).toFixed(1)}px ${(2 + lift * 0.3).toFixed(1)}px rgba(40,40,30,${(0.04 + lift * 0.003).toFixed(3)}), ` +
+      `0 ${(lift * 1.6).toFixed(1)}px ${(lift * 4).toFixed(1)}px ${(-lift * 0.6).toFixed(1)}px rgba(40,40,30,${(lift * 0.009).toFixed(3)})`,
+    display: 'flex', alignItems: 'center', paddingLeft: 96, boxSizing: 'border-box', gap: 66,
+  }}>
+    <ClapperIcon size={104} color={iconColor} />
+    <span style={{ fontSize: FS, fontWeight: 500, color: textColor, letterSpacing: 2 }}>shots</span>
+  </div>
+);
+
+export const HashtagToPillMaterialize: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ---- 打字 ----
+  const typedCount = TYPE_AT.filter((t) => frame >= t).length;
+  const typed = TEXT.slice(0, typedCount);
+
+  // ---- 缩小左移 ----
+  const moveAt = (f: number) => interpolate(f, [MOVE_START, MOVE_END], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.5, 0, 0.25, 1),
+  });
+  const pxAt = (f: number) => interpolate(moveAt(f), [0, 1], [HERO.x, SLOT.x]);
+  const pyAt = (f: number) => interpolate(moveAt(f), [0, 1], [HERO.y, SLOT.y]);
+  const moveT = moveAt(frame);
+  const px = pxAt(frame);
+  const py = pyAt(frame);
+  const ps = interpolate(moveT, [0, 1], [1, END_SCALE]);
+  // 缩移峰值 ~70px/帧：按速度沿运动方向给拖影，起止处速度→0 自动无模糊
+  const vx = velocity(pxAt, frame);
+  const vy = velocity(pyAt, frame);
+  // 离地：hero hold 时浮 10px，缩移后半程降落，落位贴平（Q9：归位即嵌入页面）
+  const lift = 10 * (1 - interpolate(moveT, [0.35, 1], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }));
+  // 实体化瞬间极轻微落定（原片近乎硬切，仅 3 帧 1.03→1，避免死板）
+  const settle = interpolate(frame, [MORPH, MORPH + 3], [1.03, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.quad),
+  });
+
+  const revealed = frame >= REVEAL;
+
+  return (
+    <AbsoluteFill style={{ background: revealed ? C.bgCream : C.bgWhite, fontFamily: FONT }}>
+      {/* 成品页（硬切揭示，之后全静） */}
+      {revealed && (
+        <>
+          {/* 页眉元信息：面包屑 + 编辑时间，让"成品页"版式完整（辅助文字 32px，低对比不抢标题） */}
+          <div style={{
+            position: 'absolute', left: 164, right: 160, top: 86, display: 'flex', alignItems: 'center',
+            fontSize: 32, fontWeight: 500, color: C.meta, letterSpacing: 0.6,
+          }}>
+            <span>Notes</span>
+            <span style={{ margin: '0 18px', opacity: 0.7 }}>/</span>
+            <span>Shots</span>
+            <span style={{ marginLeft: 'auto' }}>Edited just now</span>
+          </div>
+          <div style={{
+            position: 'absolute', left: 164, right: 160, top: 144, height: 1,
+            background: 'linear-gradient(90deg, rgba(120,112,80,0.16), rgba(120,112,80,0.06))',
+          }} />
+          <div style={{
+            position: 'absolute', left: 160, top: 168,
+            fontSize: 122, fontWeight: 700, color: C.titleGreen, letterSpacing: 0.5,
+          }}>
+            My favorite shots
+          </div>
+          <div style={{
+            position: 'absolute', left: 152, top: 618,
+            fontSize: 70, fontWeight: 500, color: C.body, lineHeight: 1.33, letterSpacing: 0.3,
+          }}>
+            A few camera moves I keep stealing from<br />
+            video-shotcraft: the crash zoom, the orbit,<br />
+            the whip pan. Welcome. Bring popcorn.
+          </div>
+        </>
+      )}
+
+      {/* 打字层：文字 + 恒亮红光标（原片光标不闪烁），实体化帧整体消失 */}
+      {frame < MORPH && (
+        <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span style={{ fontSize: FS, fontWeight: 500, color: C.ink, letterSpacing: 2, whiteSpace: 'pre' }}>
+              {typed}
+            </span>
+            <span style={{
+              display: 'inline-block', width: 7, height: 150,
+              background: C.cursor, marginLeft: 8, borderRadius: 2,
+            }} />
+          </div>
+        </AbsoluteFill>
+      )}
+
+      {/* 胶囊层：实体化 1 帧硬切出现 → hold → 缩小左移落位 → 揭示帧换鼠尾草绿 */}
+      {frame >= MORPH && (
+        <SpeedBlur vx={vx} vy={vy} amount={0.1} max={7}>
+        <div style={{
+          position: 'absolute', left: 0, top: 0,
+          // origin 必须是 0 0：translate 先把原点送到目标中心，scale 绕该点缩放，
+          // 否则默认 50% 50% 会让落位时中心漂移 (1-s)*半宽
+          transformOrigin: '0 0',
+          transform: `translate(${px}px, ${py}px) scale(${ps * settle})`,
+        }}>
+          <div style={{ transform: 'translate(-50%, -50%)' }}>
+            {revealed
+              ? <Pill bg={C.pillSage} iconColor={C.iconSage} textColor={C.pillSageText} lift={0} />
+              : <Pill bg={C.pillGray} iconColor={C.iconGray} textColor={C.pillTextGray} lift={lift} />}
+          </div>
+        </div>
+        </SpeedBlur>
+      )}
+      {/* 极弱纸面颗粒：防大面积浅底色带，揭示帧随底色一起硬切（同一层，不做过渡） */}
+      <Grain opacity={0.05} step={2} />
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/interaction/picker-carousel-feature-cycle/PickerCarouselFeatureCycle.tsx

@@ -0,0 +1,202 @@
+// picker-carousel-feature-cycle — Picker Carousel 功能名吸附轮播（motion-lab 定稿转原生 Remotion）
+// 移动端风竖向选择器：焦点药丸不动、内容穿过它，每项停靠 0.45s 且带明显 outQuint
+// 减速吸附 + 4–5 帧静止；按到中心距离分层控制 opacity/字号/灰度，落定时药丸做
+// scaleY 1→1.06→1 极轻呼吸，左外侧固定方形 AI 徽标。
+// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。
+// 质感升级：纸面底加一处柔和顶光 + 极弱暗角颗粒；unicode 杂牌符号换成同一套 1.5 描边线性图标
+// （焦点行图标用唯一强调色）；药丸补顶沿内高光 + 两层软影；走位快段给列表纵向速度拖影
+// （吸附减速段自动归零）；AI 徽标改深色渐变 + 内高光 + 小星芒。时间轴与参数表数值不变。
+// 品牌轮：7 条占位功能名换成 video-shotcraft 的真实功能（镜头配方卡 → 实拍 → 运镜 → 踩点 → 音效 →
+// 工作台 → 渲染），图标同套重画；左侧 "AI" 徽标换成深底 app 图标里的「镜刻」标志。
+import React from 'react';
+import { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';
+import { FONT, Grain, SpeedBlur, Vignette } from '../../_fixtures/Polish';
+import { ShotcraftMark } from '../../_fixtures/Brand';
+
+export const PICKER_CAROUSEL_FEATURE_CYCLE_DURATION = 108; // 3600ms @30fps
+
+const PAPER = '#F3F3F1';
+const INK = '#111113';
+const MID = '#8A8A8F';
+const ROW_H = 34; // 单行高度
+const ITEMS = [
+  'Shot recipe cards',
+  'Real page captures',
+  '2.5D camera moves',
+  'Beat-synced cuts',
+  'Film-grade SFX',
+  'Motion workbench',
+  'Remotion render',
+];
+const ACCENT = '#5b63d3';
+// 16 网格线性图标（与 ITEMS 一一对应）：配方卡 / 截图取景 / 摄影机 / 节拍 / 扬声器 / 调参滑杆 / 渲染播放
+const ICONS: string[][] = [
+  ['M4 2.5h8c.55 0 1 .45 1 1v9c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1v-9c0-.55.45-1 1-1z', 'M5.75 5.75h4.5', 'M5.75 8h4.5', 'M5.75 10.25h2.5'],
+  ['M2.5 5.5v-3h3', 'M10.5 2.5h3v3', 'M13.5 10.5v3h-3', 'M5.5 13.5h-3v-3', 'M5.5 6h5v4h-5z'],
+  ['M3.25 5h6c.4 0 .75.35.75.75v4.5c0 .4-.35.75-.75.75h-6c-.4 0-.75-.35-.75-.75v-4.5c0-.4.35-.75.75-.75z', 'M10 7.25 13.5 5.5v5L10 8.75'],
+  ['M3 7v2', 'M5.5 4.5v7', 'M8 2.5v11', 'M10.5 5.5v5', 'M13 7v2'],
+  ['M2.5 6.25h2.25L8 3.5v9L4.75 9.75H2.5z', 'M10.5 6a2.8 2.8 0 0 1 0 4', 'M12.25 4.25a5.3 5.3 0 0 1 0 7.5'],
+  ['M2.5 4.5h11', 'M2.5 11.5h11', 'M5.5 2.5v4', 'M10.5 9.5v4'],
+  ['M3.5 3h9c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1h-9c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1z', 'M6.75 6v4l3.25-2z'],
+];
+const Icon: React.FC<{ d: string[]; color: string }> = ({ d, color }) => (
+  <svg width={13} height={13} viewBox="0 0 16 16" fill="none" style={{ display: 'block' }}>
+    {d.map((p, i) => (
+      <path key={i} d={p} stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+    ))}
+  </svg>
+);
+const STEPS = 5; // 五次吸附推进
+const HOLD = 5 / 14; // 每步末段静止占比（≈4–5 帧不动）
+
+export const PickerCarouselFeatureCycle: React.FC = () => {
+  const t = useT();
+
+  // 主时间轴：t∈[0.05,0.95] 均分 5 步；步内前 (1-HOLD) 用 outQuint 吸附，末段静止
+  const g = seg(t, 0.05, 0.95) * STEPS;
+  const step = Math.min(STEPS - 1, Math.floor(g));
+  const local = Math.min(1, g - step);
+  const mv = E.outQuint(Math.min(1, local / (1 - HOLD)));
+  const pos = step + mv;
+  // 列表纵向速度（设计 px/帧）：走位快段给一点竖向拖影，减速吸附与静止段自动归零
+  const posAt = (tt: number) => {
+    const gg = seg(tt, 0.05, 0.95) * STEPS;
+    const st = Math.min(STEPS - 1, Math.floor(gg));
+    const lo = Math.min(1, gg - st);
+    return st + E.outQuint(Math.min(1, lo / (1 - HOLD)));
+  };
+  const dt = 0.5 / (PICKER_CAROUSEL_FEATURE_CYCLE_DURATION - 1);
+  const vy = -(posAt(t + dt) - posAt(t - dt)) * ROW_H;
+
+  // 落定呼吸：吸附完成进入 HOLD 后，药丸 scaleY 1→1.06→1 极轻脉冲
+  const land = Math.max(0, (local - (1 - HOLD)) / HOLD);
+  const breath = land > 0 ? Math.sin(Math.min(1, land / 0.6) * Math.PI) * 0.06 : 0;
+
+  return (
+    <DesignStage bg={PAPER} raster="zoom">
+      {/* 纸面底 —— 与原采集页 paper() 容器一致 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          overflow: 'hidden',
+          background: `radial-gradient(ellipse 70% 80% at 46% 30%, #f8f8f6 0%, rgba(248,248,246,0) 70%), linear-gradient(180deg, #f4f4f2 0%, ${PAPER} 55%, #eeeeeb 100%)`,
+          fontFamily: FONT.sans,
+        }}
+      >
+        {/* 药丸身后的一抹落地光：把"焦点行"从纸面上托起来（只在中心一处） */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 240 - 190,
+            top: 135 - 40,
+            width: 380,
+            height: 80,
+            background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%)',
+            opacity: seg(t, 0, 0.05),
+          }}
+        />
+        {/* 选择器视口：300×(34×5) 居中，整体在开头 5% 内淡入 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: 300,
+            height: ROW_H * 5,
+            transform: 'translate(-50%,-50%)',
+            overflow: 'hidden',
+            opacity: seg(t, 0, 0.05),
+            // 上下各 26% 渐隐：改用 alpha 遮罩（不再叠纸色色块），底色是渐变也不会露出边界带
+            WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%)',
+            maskImage: 'linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%)',
+          }}
+        >
+          {/* 焦点药丸：位置不动，仅落定时 scaleY 呼吸。
+              原采集页是 content-box，带 1px 边框需显式声明，否则高度差 2px */}
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: ROW_H * 2,
+              height: ROW_H,
+              boxSizing: 'content-box',
+              borderRadius: 999,
+              background: 'linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%)',
+              border: '1px solid #E3E3E6',
+              // 顶沿内高光 + 近地实影 + 远地虚影（主光在上）
+              boxShadow: 'inset 0 1px 0 rgba(255,255,255,1), 0 0.5px 1px rgba(16,18,24,.06), 0 3px 9px -2px rgba(16,18,24,.09), 0 10px 22px -10px rgba(16,18,24,.12)',
+              transform: `scaleY(${1 + breath})`,
+            }}
+          />
+          {/* 内容列：整列 translateY 穿过焦点药丸；快段带纵向速度拖影 */}
+          <SpeedBlur vx={0} vy={vy} amount={0.06} max={0.8}>
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0,
+              transform: `translateY(${ROW_H * 2 - pos * ROW_H}px)`,
+            }}
+          >
+            {ITEMS.map((txt, i) => {
+              // 按到中心距离分层：透明度两段线性、字号 17→14、颜色三档灰度
+              const d = Math.abs(i - pos);
+              const k2 = Math.min(2, d);
+              const o = k2 <= 1 ? lerp(k2, 1, 0.55) : lerp(k2 - 1, 0.55, 0.18);
+              return (
+                <div
+                  key={i}
+                  style={{
+                    height: ROW_H,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 8,
+                    fontWeight: 600,
+                    fontSize: lerp(Math.min(1, d / 2), 17, 14),
+                    lineHeight: 1,
+                    letterSpacing: '-0.01em',
+                    color: d < 0.5 ? INK : d < 1.5 ? MID : '#B9B9BE',
+                    opacity: o,
+                  }}
+                >
+                  {/* 图标仅在贴近焦点时浮现（d<0.625 内可见），焦点行用唯一强调色 */}
+                  <span style={{ opacity: Math.max(0, 1 - d * 1.6), marginTop: 0.5 }}>
+                    <Icon d={ICONS[i]} color={ACCENT} />
+                  </span>
+                  <span>{txt}</span>
+                </div>
+              );
+            })}
+          </div>
+          </SpeedBlur>
+        </div>
+        {/* 左外侧固定 app 图标：深色方形圆角里放 video-shotcraft「镜刻」标志（反白版），开头略滞后淡入 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            margin: '-12px 0 0 -186px',
+            width: 24,
+            height: 24,
+            borderRadius: 6,
+            background: 'linear-gradient(160deg, #2a2b31 0%, #111113 100%)',
+            boxShadow: 'inset 0 0.5px 0 rgba(255,255,255,0.22), 0 0 0 0.5px rgba(0,0,0,0.5), 0 2px 5px -1px rgba(16,18,24,0.25)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            opacity: seg(t, 0.02, 0.09),
+          }}
+        >
+          <ShotcraftMark size={16} tone="dark" />
+        </div>
+        <Vignette strength={0.12} inner={0.5} color="#2a2c36" />
+        <Grain opacity={0.045} scale={0.25} />
+      </div>
+    </DesignStage>
+  );
+};