scroll-world-storytelling

滚动式世界叙事

将源材料转化为一段连贯的旅程。滚动推动视觉世界前进，文案则通过精心安排的节拍揭示故事。

本技能恰好有三种制作模式。开始制作前，先选定一种主要模式：

1. 视频擦动 — 将生成或拍摄的视频素材映射到滚动。
2. Three.js 世界 — 实时呈现的 3D 物体、地点、行星或系统。
3. HTML / 数据 / 字体排印 — 语义化 DOM、SVG 图表、指标和动态字体排印。

默认情况下不要混用模式。专注于一种渲染方式，可以让概念更清晰、测试范围更小、备用方案更可靠。

从约定开始

实现前，先写好以下内容。

目标

将提供的故事转化为一段单页旅程，包含 5–7 个令人难忘的节拍和一个最终行动。首次访问的用户无需阅读源材料，就应能理解核心论点、矛盾、机制、证据和成果。

基本规则

• 保留源材料的核心论点、顺序、事实和注意事项。绝不编造证据。
• 使用一个连贯的世界、一套主导性的运动语法和一种艺术指导风格。
• 用动效承载转场，用文案解释含义。
• 只保留一个主要 CTA。导航和实用控件应保持低调。
• 保留原生、可逆的文档滚动。绝不劫持滚轮。
• 未经批准，绝不消耗生成额度、发布、部署或替换生产文件。
• 有 Agent 可用时，应将构建者与验证者分开。

标准

• 访客看过一遍后，就能讲清故事脉络。
• 滚动应支持向前、向后、缓慢滚动和快速滑动。
• 接缝处不能出现明显跳动、闪烁或意外反转。
• 页面在移动设备上以及减少动态效果的设置下仍清晰易读。
• 每项完成声明都应附有浏览器、控制台、响应式和素材证据。

通读源材料

1. 阅读完整文章或叙述。
2. 检查目标代码库、框架、素材管线和当前页面。
3. 区分源材料事实与呈现构想。
4. 条件允许时，收集提供的品牌素材和 2–3 个参考案例。
5. 明确故事希望促成的唯一行动。

如果存在本地每日灵感档案，请先查看最近一到两篇采集文章、其中的静帧以及有代表性的本地动态文件，再确定艺术指导风格。提炼配色、层级、材质、构图和动效等原则；不要照搬布局，也不要未经明确批准就将本地参考文件上传到外部生成器。

如果素材的复用权利不明确，请转述源材料，并缩短引用内容。绝不捏造推荐语、指标或客户声明。

制作故事地图

将源材料精简为 5–7 个节拍：

1. 钩子 — 承诺或出人意料的核心论点。
2. 旧方式 — 正在摒弃的阻力或观念。
3. 新规则 — 改变路径的想法。
4. 机制 — 系统的运作方式。
5. 证据 — 最有力的证据。
6. 成果 — 转变后的最终状态。
7. 行动 — 一个下一步。

编写代码前先创建节拍清单：

字段	限制
id	简短且稳定的标识符
scene	视觉世界中存在的内容
eyebrow	2–4 个词
headline	3–8 个词
body	一个句子，最好不超过 24 个词
evidence	准确的源材料事实或素材
motion	一个清晰的动词短语
scroll weight	0.7–1.8 个视口高度
CTA	仅限最后一个节拍，除非更早出现有明确要求

合并重复论点。不要把每个段落都变成一个场景。

编写风格圣经

定义：

• 氛围：三个精准的形容词。
• 世界隐喻：一个能容纳每个节拍的地点或系统。
• 色彩：4–6 个命名颜色，其中一个为主色调，一个为强调色。
• 字体：一种展示字体风格和一种阅读字体风格。
• 材质语言：一种体系，例如纸张、玻璃、黏土、摄影或机械。
• 动态语法：向前滑行、环绕、升降、横向跟拍、俯冲或分阶段揭示。
• 节奏：故事在哪些地方停顿，哪些地方快速推进。
• 排除项：三种应避免的视觉陈词滥调。

对于生成式媒体，每个素材提示词中的风格前置语都必须逐字节复用。

选择一种模式

选择	最适合	优势	主要代价
视频拖动	电影级真实感、地点、产品、预渲染镜头运动	精准的艺术指导和摄影质感	素材较大且需要调校定位
Three.js 世界	行星、物体、地图、系统、空间交互	实时景深和响应式摄像机控制	WebGL 性能和回退处理
HTML / 数据 / 字体排版	报告、发布、指标、编辑类故事	无障碍、清晰、轻量、内容优先	摄影级视觉冲击较弱

如果故事主要依靠证据和数字，请优先选择 HTML / 数据。如果核心隐喻具有空间性和交互性，请优先选择 Three.js。如果创意核心是电影感图像，请选择视频。

模式 1 — 视频拖动

使用 demo/video/index.html 和 demo/video/PROMPT.md。

生成源视频片段

1. 选择一个连续的 6–15 秒摄像机运动。避免剪辑。
2. 生成前先编写三个风格迥异的风格研究方案：改变主色调、材质语言、光线和构图，而不只是强调色。
3. 重要主体应靠近画面中心，并留出可用的标题空间。
4. 使用付费工具时，先生成一段简短的校准片段，再生成最终渲染。
5. 对于多段旅程，每一段都从上一段实际渲染的最后一帧开始。
6. 保留原始母版，并记录提供商、模型、提示词、种子、时长、宽高比和使用权。

当用户请求使用 Grok Imagine 时，请使用其当前视频界面或 API，选择 Video，设置所需的宽高比、时长和分辨率，并生成获批的风格研究方案。除非需求另有要求，首次制作落地页时，优先选择 16:9、6–10 秒和 720p。绝不要用程序生成的占位内容替代生成的视频素材，并声称它是真实生成的片段。

推荐的提示词结构：

单个连续的[摄像机运动]，无剪辑。穿越[世界隐喻]，从[开场]抵达[亮点]。[确切的场景顺序]。[逐字节一致的风格前置语]。构图确保主体位于中心安全区，为编辑文案留出安静的负空间，不含文字、标志或字幕。

除非模型接受所需的起始帧，或接受连接片段两端的帧，否则不要承诺连接片段能够无缝衔接。

编码以支持拖动

ffmpeg -i source.mp4 -an \
  -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p \
  -g 8 -keyint_min 8 -sc_threshold 0 \
  -movflags +faststart output.mp4

• 所有片段使用相同的编解码器和编码配置文件。
• 除非体验明确包含音频，否则移除音轨。
• 使用较小的 GOP，以支持灵敏定位。
• 使用支持字节范围请求的托管方式，或在拖动前将内容获取到 Blob URL。
• 视频完成绘制前，将第一帧用作海报图。
• 将一个归一化滚动值映射到 currentTime；在 requestAnimationFrame 中合并定位操作。
• 减少动态效果时，使用海报图或按顺序排列的静帧，并采用常规文档流。

模式 2 — Three.js 世界

使用 demo/threejs/index.html 和 demo/threejs/PROMPT.md。

1. 确定方案前，先制作三份艺术指导研究稿。每份都必须改变场景颜色、物体材质、光照表现、字体关系和构图，而不只是调整着色器颜色。
2. 除非源内容有充分依据，否则不要采用发光的蓝色星球置于黑暗太空中的泛泛默认方案。
3. 创建一个场景、一个透视摄像机、一个渲染器和一个世界组。
4. 让主视觉物体承载隐喻：雕塑、机器、档案、星座、城市、产品，或非写实的行星系统。
5. 将滚动进度映射到摄像机位置、摄像机目标、物体旋转、灯光和场景状态。
6. 环境动效保持微妙；滚动必须始终是主要驱动力。
7. 将设备像素比限制为 2，并在窗口大小变化时更新渲染器和摄像机。
8. 页面隐藏或移出视口时，暂停连续渲染。
9. 在拆除时释放几何体、材质、纹理和事件监听器。
10. WebGL 失效或用户请求减少动态效果时，提供静态 CSS/SVG 海报。

在便携式演示项目中使用本地固定版本的 Three.js 文件。核心渲染器不得依赖远程 CDN。

模式 3 — HTML / 数据 / 字体

使用 demo/html-data/index.html 和 demo/html-data/PROMPT.md。

1. 从语义化标题、段落、列表、表格和真实链接开始。
2. 将最有力的证据转化为一种图表表达方式：柱形、折线、区间、斜率或对比。
3. 仅当 DOM 图表需要路径或坐标轴时才使用内联 SVG；标签应保留为可选中文本。
4. 用一个归一化滚动值驱动 CSS 自定义属性。
5. 为变换、不透明度、裁剪路径、计数器和 SVG 描边偏移添加动画。
6. 确保图表比例真实，并通过无障碍文本或表格提供数值。
7. 禁用 JavaScript 时，页面仍须完整且易读。
8. 减少动态效果时，移除插值动画，同时保留状态变化和顺序。

此模式不应暗中变成 Canvas 或 WebGL。它的优势在于原生布局、无障碍访问和清晰锐利的响应式字体。

通用页面规范

将内容与渲染器代码分开：

const story = {
  title: "The journey",
  cta: { label: "Begin", href: "#begin" },
  sections: [
    {
      id: "hook",
      eyebrow: "01 / Premise",
      title: "A destination, not a route.",
      body: "Define arrival clearly and let the system find the path.",
      evidence: null,
      scroll: 1.4
    }
  ]
};

每个运行时都必须具备：

• 固定或粘滞的视觉舞台。
• 一个滚动驱动器和由配置驱动的章节。
• 原生、可逆的滚动和键盘焦点。
• 不改变场景端点的局部缓动。
• 状态稳定后停止运行，除非确实需要可见的环境动效。
• 为当前和下一个大型资源延迟加载。
• 语义化标题、一个真实的 CTA，以及可见的焦点样式。
• 采用普通文档流的减少动态效果版本。

重新检查验证

检查：

1. 叙事 — 每个节拍都推动论点向前发展。
2. 时序 — 每个滚动位置都激活正确状态。
3. 反向 — 向后滚动可恢复精确的先前状态。
4. 性能 — 稳定后没有不必要的工作；没有解码器或 WebGL 积压。
5. 响应式 — 验证 390、768、1024 和 1440 像素宽度。
6. 移动端 — 快速滑动、方向变化、安全区域和文案可读性。
7. 无障碍访问 — 语义顺序、可见焦点、对比度和减少动态效果。
8. 内容准确性 — 每项事实均与源内容一致，且 CTA 可正常使用。
9. 控制台 — 没有错误或加载失败的本地资源。
10. 模式验证 — 确认结果实际使用了所选渲染器。

重复执行：构建、验证、弥补最大的差距。达到标准后不再存在明显差距时即可停止。

交付内容

请返回：

• 故事地图和最终节拍清单。
• 风格指南。
• 所选模式及其适用原因。
• 可运行的页面和可复用的故事配置。
• 精确的资源生成提示词和页面提示词。
• 本地资源；适用时注明来源、模型和权利信息。
• 桌面端和移动端的行为。
• 验证证据和已知限制。

从 demo/index.html 开始使用三模式启动器。将 REFERENCES.md 保留为外部阅读清单。