demoConfig.ts

export const DEMO_CONFIG = {
  theme: {
    surfaceMode: 'light',
  },
  asset: {
    src: '/media/cxk-basketball.mp4',
    label: '蔡徐坤唱跳 rap，打篮球',
    attribution: 'Tenor public clip, vendored locally for demo stability',
  },
  prompt: '做成动画挤压文字排版的效果。不要视频转字符，也不要小鱼游动。',
  bubble: {
    maxWidth: 840,
  },
  stage: {
    minHeight: 600,
    paddingX: 22,
    paddingTop: 18,
    paddingBottom: 18,
    minSlotWidth: 88,
  },
  video: {
    maskWidth: 192,
    maskHeight: 192,
    playbackRate: 0.58,
    lumaThreshold: 0.8,
    alphaThreshold: 44,
    minColumns: 2,
    frameHeightRatio: 0.9,
    offsetX: 0.05,
    offsetY: 0,
    crop: {
      x: 0.14,
      y: 0.08,
      width: 0.72,
      height: 0.84,
    },
  },
  copy: {
    title: '动态文本重排',
    subtitle: '蔡徐坤动画帧进入正文版心，文字按每一行的剩余空间实时重排。',
    eyebrow: 'Standalone Preview Skill',
    heroTitle: '让动图主体真正挤压正文排版',
    heroBody: '这个 demo 不做字符画，不注入现成应用，而是把视频主体轮廓直接当成动态障碍物，让正文在每一帧里重新寻找落点。',
    capabilityBullets: [
      '独立 demo 页面，可单独预览和分享',
      'pretext 实时逐行重排，不依赖 DOM 测量',
      '后续可接到真实 assistant bubble renderer',
    ],
    body: `文本以前总是被关在规整的盒子里。图片在外面，动画在外面，交互也在外面，文字只能在预先划定的矩形里等着浏览器决定换行位置。可一旦文字的宽度计算变得廉价，局面就会反过来。页面不再只是把一段段文案塞进固定容器，而是可以让正文直接参与构图。

现在这个示例里，蔡徐坤的唱跳、rap 和打篮球动作帧并不是贴在文字上的装饰。视频里的主体轮廓会在每一帧被抽出来，当作正在版心里移动的挤压形状。系统会重新判断当前这条文本带里哪些横向区间被他占用，哪些区间还能容纳文字。随后正文会立刻寻找新的落点，在空隙里继续向前推进，于是你会看到同一段话在呼吸、偏移、让位，再重新聚拢。

这种变化和传统的字符画不是一回事。字符画更像把图像翻译成字符密度，而这里的重点是排版逻辑本身在运动。句子没有被转换成图像，它们仍然是正文，只是随着障碍物的位置不同，在每一行里寻找新的生存空间。文字不再贴在动画表面，而是被动画真正地改变了布局。

这也是 pretext 最打动人的地方。它把文本测量从昂贵的 DOM 读取里剥离出来，让排版变成可以在每一帧执行的普通计算。于是“让一个真实视频主体挤压正文”这种原本听上去像实验影像的效果，突然变成了前端里可以稳定实现的界面能力。`,
  },
  typography: {
    headlineFont: '700 20px "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif',
    bodyFontFamily: '"Songti SC", "Noto Serif SC", "Source Han Serif SC", "Iowan Old Style", "Palatino Linotype", serif',
    bodyFontSize: 18,
    lineHeight: 30,
  },
  preview: {
    layoutMode: 'focused',
    stageLabel: 'Live Bubble Preview',
    notes: [
      '当前是独立 preview，不直接注入 app。',
      '未来方案会把同一套 reflow engine 接到特定 agent 的消息渲染层。',
      '现在先把视觉、节奏和重排质量调到可演示状态。',
    ],
  },
} as const