scroll-storyteller

滚动叙事创作工具

使用 Anthropic 原生设计语言，打造沉浸式互动叙事体验：严格的双色调配色、有机 Bézier SVG 路径、自定义光标和基于章节的叙事。

工作流

使用 AskUserQuestion 收集偏好，然后生成：

步骤	问题	选项
1	动画？	GSAP（丰富）或仅 CSS（轻量）
2	氛围？	温暖、冷峻或创意
3	配色？	（根据氛围展示 3-4 种方案）
4	主题？	圣经／技术／商业／个人／自定义
5	章节数？	3、4 或 5
6	每章内容	标题、描述、关键词

生成：

bash ~/.claude/skills/scroll-storyteller/scripts/generate.sh my-story <palette> [--gsap] [--chapters N]

生成后： 自定义内容，创建 SVG（参见 references/structure-templates.md）

SVG 插图工作流

每章都需要与叙事位置相符、且与主题相关的 SVG：

位置	用途	构图	示例
主视觉	设置场景，展现对比	宽幅（1000x1000），2 个剪影	远处的大卫与歌利亚
第 1 章	介绍主人公	中央人物 + 背景环境	与羊群在一起的牧羊人
第 2 章	展现冲突／障碍	气势逼人，铺满画面	巨人战士
第 3 章	展现解决／胜利	动态，向外辐射	胜利者 + 倒下的对手 + 光芒
第 4 章	冲突加剧（可选）	拥挤，局势升级	大军集结，威胁倍增
第 5 章	最终高潮（可选）	动作，决胜时刻	石块飞出，命中瞬间
尾声	象征性总结	居中的符号	王冠 + 光芒

按章节数设置明暗模式：

• 3 章： 第 1 章=浅色 → 第 2 章=深色 → 第 3 章=浅色
• 4 章： 第 1 章=浅色 → 第 2 章=深色 → 第 3 章=浅色 → 第 4 章=深色
• 5 章： 第 1 章=浅色 → 第 2 章=深色 → 第 3 章=浅色 → 第 4 章=深色 → 第 5 章=浅色

流程：

1. 加载 references/svg-illustration-guide.md，查看主题到元素的映射
2. 确定章节位置（hero/ch1/ch2/ch3/ch4/ch5/finale）
3. 从章节内容中提取主题关键词
4. 从元素库中选择 SVG 元素：
   • 人物：figure-small、figure-large、figure-triumphant、figure-action
   • 自然：hills、sun、tree、path、clouds、lightning、wind
   • 物件：staff、crown、shield、weapon、stone、obstacle
   • 抽象：radiate、rings、trajectory、converge、impact
5. 使用位置模板进行构图
6. 应用配色氛围样式（参见 references/design-harmony.md → Palette Mood → SVG Style）
7. 添加动画类：organic-path、fade-path、scale-path

SVG 检查清单：

• 仅使用 var(--deep) 和 var(--foam) 颜色
• 所有路径均为有机 Bézier 曲线（Q/C 命令）
• 不使用几何图元（circle、rect、ellipse）
• 不透明度范围符合配色氛围
• 构图符合章节位置
• 以符号形式呈现章节内容

动画样式

样式	库	大小	适用场景
GSAP	GSAP 3.x + ScrollTrigger	~45KB	丰富的交互、SVG 绘制、环绕效果、时间轴
仅 CSS	无（IntersectionObserver）	0KB	轻量、加载快、简单的显现效果

GSAP 功能

• SVG 路径绘制动画（strokeDasharray）
• 连续的环绕／旋转效果
• 与滚动联动的时间轴控制
• 带 scrub 的视差效果
• 具有精确时间控制的交错动画

仅 CSS 的功能

• IntersectionObserver 显现效果
• 带延迟的 CSS 过渡
• 基于变换的动画
• 无外部依赖
• 更小的打包体积

双调色板

#	主题	浅色	深色	氛围
1	Anthropic	#FAF9F5 奶油色	#141413 炭灰色	暖
2	Midnight	#E8F4F8 冰蓝色	#0D1B2A 海军蓝	冷
3	Sepia	#F5F0E6 羊皮纸色	#2C1810 浓缩咖啡色	暖
4	Forest	#F0F4F0 薄雾色	#1A2E1A 常青色	创意
5	Dusk	#F4F0F8 薰衣草色	#1E1A2E 紫罗兰色	创意
6	Ember	#FFF5F0 红晕色	#2A1A14 烬火色	暖
7	Steel	#F0F2F5 银色	#1A1C20 石墨色	冷
8	Ocean	#F0F8F8 泡沫色	#0A1A1A 深海色	冷

氛围 → 调色板映射：

• 暖：1（Anthropic）、3（Sepia）、6（Ember）
• 冷：2（Midnight）、7（Steel）、8（Ocean）
• 创意：4（Forest）、5（Dusk）

设计模式

模式	描述	适用场景
Authentic（默认）	严格双调，采用有机路径	编辑设计、品牌叙事
Expressive	允许使用多色点缀	产品展示、演示

核心功能

功能	描述
自定义光标	带平滑缓动效果的双层光标，采用 mix-blend-mode
主视觉区	GSAP：流动的有机线条（1000x1000 背景）。纯 CSS：带动态光锥显现效果的台灯
聚光层	深色区块上的径向渐变会跟随光标
错落显现	标题中的单词在页面加载时依次出现
章节结构	浅色/深色区块交替，并带有过渡效果
有机 SVG	手绘贝塞尔路径，仅填充（无描边）
视差效果	滚动时产生微妙的纵深移动

Anthropic 设计语言

严格双调色板

元素	Hex	CSS 变量
奶油色（浅色）	#FAF9F5	--cream
炭灰色（深色）	#141413	--charcoal

**规则：**不使用其他颜色。所有插图都只使用这两种颜色。

排版

角色	字体	后备字体
展示/标题	Instrument Serif	Georgia, serif
正文/界面	Inter	-apple-system, sans-serif

特点：

• 大号编辑风格标题（clamp 3rem - 7rem）
• 较细字重（300-400）
• 展示文字采用负字间距（-0.02em）
• 宽松的行高（1.5-1.8）

SVG 设计规则

规则	描述
仅使用填充	主体形状绝不使用描边
有机路径	复杂的贝塞尔曲线，呈现手绘质感
viewBox	始终使用 1000x1000 或 500x500（正方形）
2-4 条路径	保持构图简洁
分层	浅色形状置于后方，深色形状置于前方

反面模式：

❌ <circle>, <rect>, <ellipse> (geometric)
❌ stroke="..." on main elements
❌ Multiple colors
✅ <path d="M... Q... C..."> with organic curves

由主题驱动的 SVG 生成

svg-generator.sh 辅助脚本会根据章节内容自动选择合适的 SVG 模板：

关键词	模板	最适合
identity, profile, self, unique	指纹 + 验证	个人身份概念
network, connect, distributed, system	中心枢纽 + 网络	系统架构概念
protect, secure, vault, lock	受保护的保险库 + 链接	安全概念
growth, learn, knowledge, tree	知识之树	学习/成长概念
enforce, filter, gate, barrier	门户拱门	强制执行/验证
trust, hand, collaboration	手持 + 连接	合作伙伴关系概念
unify, finale, complete	同心符号	总结/统一

用法：

# Source the generator in your script
source scripts/svg-generator.sh

# Generate SVG for a chapter (position: hero/ch1/ch2/ch3/ch4/ch5/finale)
generate_svg_for_chapter \
  "ch1" \
  "Digital Identity" \
  "Your unique identity on the blockchain" \
  "var(--foam)" \
  "var(--deep)" \
  "fade-path"

位置： hero | ch1 | ch2 | ch3 | ch4 | ch5 | finale

动画模式

有关 GSAP 和 CSS 动画模式的详细信息，请参阅 references/animation-patterns.md

动画类：

类	描述	用法
organic-path	所有 SVG 路径的基类	始终应用
fade-path	淡入动画	大多数路径的默认样式
scale-path	放大动画	与 fade-path 结合使用
draw-path	描边绘制动画（仅限 GSAP）	用于线条／路径绘制效果

叙事结构

有关叙事结构和 HTML 模板，请参阅 references/structure-templates.md

资源

文件	用途	加载时机
scripts/generate.sh	创建 HTML（仅 CSS 或使用 --gsap 的 GSAP 版本）	开始新项目时
scripts/svg-generator.sh	根据主题生成 SVG 的辅助工具	创建自定义插图时
references/animation-patterns.md	GSAP + CSS 动画模式	实现动画时
references/structure-templates.md	叙事结构 + HTML 模板	构建章节时
references/svg-illustration-guide.md	主题 → SVG 元素映射、模板	创建与主题相关的插图时
references/example-david-goliath.md	包含全部 5 个 SVG 的完整示例	学习 SVG 组合模式时
references/anthropic-design.md	完整设计系统参考	深度自定义时
references/gsap-patterns.md	GSAP + ScrollTrigger 配方	使用 GSAP 动画风格时
references/css-only-patterns.md	IntersectionObserver 配方	使用纯 CSS 动画风格时
references/design-harmony.md	视觉统一性 + 调色板情绪 SVG 样式	确保设计质量一致时

示例文件

文件	动画	描述
agent-harness-gsap.html	GSAP	完整体验，包含轨道 SVG、绘制动画和视差效果
agent-harness-anthropic.html	仅 CSS	轻量版，使用 IntersectionObserver 显示内容

使用工作流

1. 选择动画风格：GSAP（丰富）或仅 CSS（轻量）
2. 选择调色板：选择情绪 → 挑选具体调色板
3. 选择章节数量：选择 3、4 或 5 个章节
4. 规划叙事：主视觉 + 选定章节 + 结尾
5. 生成：bash scripts/generate.sh project-name <palette> [--gsap]
6. 自定义内容：替换占位文本
7. 添加插图：使用 assets/ 中的有机路径模板
8. 测试：验证动画、光标和滚动行为
9. 交付：单个自包含 HTML 文件

无障碍访问

• 支持 prefers-reduced-motion（禁用动画）
• 检测触摸设备（隐藏自定义光标）
• 语义化 HTML 结构
• 高对比度双色调

Token 效率

• 脚本执行时无需加载上下文（0 个 token）
• SVG 模板可直接复制粘贴
• 单个 HTML 输出，无需构建步骤
• 使用 CSS 自定义属性，便于更换主题