Scrollytelling design space

设计空间

这是一张把 thesis 里的 design space 带进 scrollytale-starter 的 visual atlas。

StructureLayoutTextTransition

进阶 / 内部页面。 日常创作请先看 story-format.md。这一页主要帮助 runtime 和 AI 更深入地理解故事结构。

总览

这套 vocabulary 来自 thesis 中关于 scrollytelling design space 的章节，分成四个维度：

• Structure
• Layout
• Transition
• Action

复制进 starter 的 icon 位于：

• public/design-space/icons/
• docs/public/design-space/icons/

runtime 中对应的 taxonomy 位于 src/runtime/designSpace.js。

这页为什么存在

为了把 academic model 留在 starter 里，但又不要求普通作者先学完整套 taxonomy 才能开始写故事。

它实际服务什么

文档、icon 资产、story metadata 归一化、AI prompting，以及后续 runtime 规划。

它如何映射到 story.md

starter 仍然保持 Markdown-first 的创作方式，但现在可以接受更丰富的 design-space metadata。

全局 Structure

你仍然可以使用简单形式：

structure: linear

也可以使用更接近学术表达的形式：

structure:
  family: linear
  pattern: burger

当前 runtime 仍然会按线性 DOM 流程渲染页面，但这些额外 pattern metadata 会被保留下来，方便后续做 authoring、AI prompting 和 runtime 扩展。

Section Layout

你仍然可以写简单 preset：

layout: scrolly-right

也可以附带 design-space 字段：

layout:
  preset: scrolly-right
  axis: vertical
  binding: float-to-text
  container: vis-container

这样 story.md 就能同时表达 starter 的实际 preset 和论文中的 layout 语言。

Scene、Segue 和 Action

thesis 里的 transition / action 语言，现在映射为：

• scene：focus、guide、granularity、observation
• transition.segue：point-to-line、line-to-area、morph、division-merge、pack-unpack
• action.trigger：enter、exit、step、scroll
• action.affordance：header、in-line、tooltip

示例：

---
title: "Rental pressure across Melbourne"
structure:
  family: linear
  pattern: burger
data:
  sources:
    - id: rents
      path: ./data/rents.csv
---

---
id: widening-gap
layout:
  preset: scrolly-right
  axis: vertical
  binding: float-to-text
  container: vis-container
scene: granularity
transition:
  type: step
  segue: morph
action:
  trigger: step
  affordance:
    - tooltip
---

## The gap becomes visible at suburb level

::vis{type="line" data="rents" x="year" y="value" series="region"}
::

::step
The metro average hides the largest gaps.
::

::step
At suburb level, the spread becomes much wider.
::

当前支持矩阵

这里分三类：

• Supported：runtime 里已经有实际行为
• Metadata only：语法和归一化已支持，但还没有一等 runtime 行为
• Still developing：还在开发中，尚未进入 runtime

仍在开发中的重点部分

Header navigation

Still developing

它对非线性的 story 入口和章节跳转很重要。

Tooltip system

Still developing

更适合先做成共享 runtime 组件，而不是散落在各个图表里单独实现。

In-line controls

Still developing

适合做轻量 toggle，帮助读者在段落内部完成局部探索。

Segue transitions

Still developing

`morph`、`point-to-line` 和 `pack-unpack` 还需要可复用的视觉 transition primitive。

Structure

Pattern	状态	说明
linear	supported	starter 的默认流程
parallel、bypass、branch、merge	metadata	已适合 authoring / 规划，后续可扩展导航

Layout

Preset / Pattern	状态	说明
chapter	supported	默认的 Markdown-first narrative section
hero	supported	近似 editorial opening
scrolly-left	supported	sticky figure + text steps
scrolly-right	supported	sticky figure + text steps
full-width	supported	普通 flow section
scrolly-overlay	supported	已作为 text-over-vis scrolly section 的一等 layout 存在
axis、binding、container、overlap metadata	metadata	已保存在 normalized story object 中

Transition

Pattern	状态	说明
focus	supported	当前可作为 scene label 使用
guide	supported	当前可作为 scene label 使用
granularity	metadata	语法和归一化已接受
observation	supported	当前可作为 scene label 使用
point-to-line	metadata	需要可复用的 vis transition primitive
line-to-area	metadata	同上
morph	metadata	同上
division-merge	metadata	同上
pack-unpack	metadata	同上

Action

Pattern	状态	说明
enter	metadata	语法已支持，生命周期 hook 还比较薄
exit	metadata	同上
step	supported	已通过 ::step + Scrollama 工作
scroll	supported	当前默认的 scrolly 动作模型
header	Still developing	非线性导航需要它
in-line	Still developing	适合作为嵌入段落的控制器
tooltip	Still developing	很适合作为共享 runtime 组件

为什么这件事重要

这样项目就有了一套贯通以下场景的共同语言：

• thesis 写作
• case study 分析
• story.md 创作
• AI prompting
• 后续 runtime 规划

starter 不需要在“学术”与“工程”之间二选一。现在 design space 就是连接两者的桥。

接下来最值得做的 runtime 工作

1. 把 scrolly-overlay 做成下一个 layout preset。
2. 把 transition.segue 从 metadata 变成可复用的 vis controller。
3. 增加共享的 tooltip 和 header 组件，让非线性 structure 真正进入 runtime。