scroll-storyteller

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Scroll Storyteller

滚动叙事工具

Create immersive, interactive storytelling experiences using Anthropic's authentic design language: strict duotone palette, organic Bézier SVG paths, custom cursors, and chapter-based narratives.

创建采用Anthropic原生设计语言的沉浸式交互式叙事体验：严格的双色调配色、有机贝塞尔SVG路径、自定义光标以及章节式叙事。

Workflow

工作流程

Use

AskUserQuestion

to gather preferences, then generate:

Step	Question	Options
1	Animation?	GSAP (rich) vs CSS-only (lightweight)
2	Mood?	Warm vs Cool vs Creative
3	Palette?	(show 3-4 based on mood)
4	Topic?	Biblical/Tech/Business/Personal/Custom
5	Chapters?	3, 4, or 5
6	Content per chapter	Title, description, keywords

Generate:

bash

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

Post-generation: Customize content, create SVGs (see

references/structure-templates.md

)

使用

AskUserQuestion

收集偏好，然后生成：

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

生成命令：

bash

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

生成后操作： 自定义内容，创建SVG（参考

references/structure-templates.md

）

SVG Illustration Workflow

SVG插画工作流程

Each chapter needs a topic-relevant SVG that matches the narrative position:

Position	Purpose	Composition	Example
Hero	Set scene, show contrast	Wide (1000x1000), 2 silhouettes	David vs Goliath distant
Chapter 1	Introduce protagonist	Centered figure + context	Shepherd with sheep
Chapter 2	Show conflict/obstacle	Imposing, fills frame	Giant warrior
Chapter 3	Resolution/triumph	Dynamic, radiating	Victor + fallen + rays
Chapter 4	Deepening conflict (optional)	Crowded, escalating	Army masses, threats multiply
Chapter 5	Final climax (optional)	Action, decisive	Stone flying, impact moment
Finale	Symbolic summary	Centered symbol	Crown + light

Light/Dark Pattern by Chapter Count:

3 chapters: Ch1=Light → Ch2=Dark → Ch3=Light
4 chapters: Ch1=Light → Ch2=Dark → Ch3=Light → Ch4=Dark
5 chapters: Ch1=Light → Ch2=Dark → Ch3=Light → Ch4=Dark → Ch5=Light

Process:

Load
```
references/svg-illustration-guide.md
```
for theme → element mapping
Identify chapter position (hero/ch1/ch2/ch3/ch4/ch5/finale)
Extract topic keywords from chapter content
Select SVG elements from element library:
- Characters: figure-small, figure-large, figure-triumphant, figure-action
- Nature: hills, sun, tree, path, clouds, lightning, wind
- Objects: staff, crown, shield, weapon, stone, obstacle
- Abstract: radiate, rings, trajectory, converge, impact
Compose using position template
Apply palette mood style (see
```
references/design-harmony.md
```
→ Palette Mood → SVG Style)
Add animation classes:
```
organic-path
```
,
```
fade-path
```
,
```
scale-path
```

SVG Checklist:

Uses only
```
var(--deep)
```
and
```
var(--foam)
```
colors
All paths are organic Bézier curves (Q/C commands)
No geometric primitives (circle, rect, ellipse)
Opacity range matches palette mood
Composition matches chapter position
Symbolically represents chapter content

每个章节需要与主题相关且符合叙事位置的SVG：

位置	用途	构图	示例
Hero（开篇）	设定场景，展现对比	宽幅（1000x1000），2个剪影	大卫与歌利亚远景
第1章	介绍主角	居中人物+背景环境	牧羊人与羊群
第2章	展现冲突/障碍	极具压迫感，充满画面	巨型战士
第3章	解决/胜利	动感十足，向外辐射	胜利者+战败者+光线
第4章（可选）	冲突升级	画面拥挤，矛盾加剧	军队集结，威胁倍增
第5章（可选）	最终高潮	动作场面，决定性时刻	石块飞出，撞击瞬间
Finale（结尾）	象征性总结	居中符号	王冠+光芒

按章节数量划分的明暗模式：

3章节： 第1章=亮 → 第2章=暗 → 第3章=亮
4章节： 第1章=亮 → 第2章=暗 → 第3章=亮 → 第4章=暗
5章节： 第1章=亮 → 第2章=暗 → 第3章=亮 → 第4章=暗 → 第5章=亮

流程：

加载
```
references/svg-illustration-guide.md
```
获取主题→元素映射
确定章节位置（hero/ch1/ch2/ch3/ch4/ch5/finale）
从章节内容中提取主题关键词
从元素库中选择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
使用位置模板进行构图
应用配色氛围风格（参考
```
references/design-harmony.md
```
→ 配色氛围 → SVG样式）
添加动画类：
```
organic-path
```
,
```
fade-path
```
,
```
scale-path
```

SVG检查清单：

仅使用
```
var(--deep)
```
和
```
var(--foam)
```
颜色
所有路径均为有机贝塞尔曲线（Q/C命令）
无几何基本图形（circle、rect、ellipse）
透明度范围符合配色氛围
构图匹配章节位置
象征性体现章节内容

Animation Styles

动画样式

Style	Library	Size	Best For
GSAP	GSAP 3.x + ScrollTrigger	~45KB	Rich interactions, SVG draw, orbits, timelines
CSS-only	None (IntersectionObserver)	0KB	Lightweight, fast load, simple reveals

样式	依赖库	大小	最佳适用场景
GSAP	GSAP 3.x + ScrollTrigger	~45KB	丰富交互、SVG绘制、轨道动画、时间线控制
纯CSS	无（使用IntersectionObserver）	0KB	轻量级、加载快速、简单渐显效果

GSAP Features

GSAP特性

SVG path draw animations (strokeDasharray)
Continuous orbit/rotation effects
Scroll-linked timeline control
Parallax with scrub
Staggered animations with precise timing

SVG路径绘制动画（strokeDasharray）
持续轨道/旋转效果
滚动关联时间线控制
视差滚动与 scrub 效果
精确计时的交错动画

CSS-only Features

纯CSS特性

IntersectionObserver reveals
CSS transitions with delays
Transform-based animations
No external dependencies
Smaller bundle size

IntersectionObserver触发的渐显效果
带延迟的CSS过渡
基于Transform的动画
无外部依赖
更小的包体积

Duotone Palettes

双色调配色方案


#141413
#0D1B2A
#2C1810
#1A2E1A
#1E1A2E
#2A1A14
#1A1C20
#0A1A1A

#	Theme	Light	Dark	Mood
1	Anthropic	`#FAF9F5` cream	`#141413` charcoal	Warm
2	Midnight	`#E8F4F8` ice	`#0D1B2A` navy	Cool
3	Sepia	`#F5F0E6` parchment	`#2C1810` espresso	Warm
4	Forest	`#F0F4F0` mist	`#1A2E1A` evergreen	Creative
5	Dusk	`#F4F0F8` lavender	`#1E1A2E` violet	Creative
6	Ember	`#FFF5F0` blush	`#2A1A14` ember	Warm
7	Steel	`#F0F2F5` silver	`#1A1C20` graphite	Cool
8	Ocean	`#F0F8F8` foam	`#0A1A1A` deep	Cool

Mood → Palette mapping:

Warm: 1 (Anthropic), 3 (Sepia), 6 (Ember)
Cool: 2 (Midnight), 7 (Steel), 8 (Ocean)
Creative: 4 (Forest), 5 (Dusk)


#141413
#0D1B2A
#2C1810
#1A2E1A
#1E1A2E
#2A1A14
#1A1C20
#0A1A1A

#	主题	亮色	暗色	氛围
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）

Design Modes

设计模式

Mode	Description	When to Use
Authentic (default)	Strict duotone, organic paths	Editorial, brand storytelling
Expressive	Multi-color accents allowed	Product showcases, demos

模式	描述	使用场景
Authentic（原生，默认）	严格双色调，有机路径	社论内容、品牌叙事
Expressive（表现力）	允许多色点缀	产品展示、演示

Core Features

核心特性

Feature	Description
Custom Cursor	Dual-layer cursor with smooth easing, mix-blend-mode
Hero Section	GSAP: Flowing organic lines (1000x1000 background). CSS-only: Desk lamp with animated light cone reveal
Spotlight Layer	Radial gradient follows cursor on dark sections
Staggered Reveals	Title words animate in sequence on load
Chapter Structure	Alternating light/dark sections with transitions
Organic SVGs	Hand-drawn Bézier paths, fill-only (no strokes)
Parallax	Subtle depth movement on scroll

特性	描述
自定义光标	双层光标，带平滑缓动效果，支持mix-blend-mode
Hero区域	GSAP：流动的有机线条（1000x1000背景）。纯CSS：带动画光锥渐显效果的台灯
聚光灯层	径向渐变跟随光标在深色区域移动
交错渐显	标题文字在加载时按顺序动画显示
章节结构	明暗交替的章节与过渡效果
有机SVG	手绘风格贝塞尔路径，仅填充（无描边）
视差滚动	滚动时的微妙深度移动效果

Anthropic Design Language

Anthropic设计语言

Strict Duotone Palette

严格双色调配色

Element	Hex	CSS Variable
Cream (light)	`#FAF9F5`	`--cream`
Charcoal (dark)	`#141413`	`--charcoal`

Rule: No other colors. All illustrations use exactly these two.

元素	十六进制值	CSS变量
米白（亮色）	`#FAF9F5`	`--cream`
炭黑（暗色）	`#141413`	`--charcoal`

规则： 禁止使用其他颜色。所有插画仅使用这两种颜色。

Typography

排版

Role	Font	Fallback
Display/Headings	Instrument Serif	Georgia, serif
Body/UI	Inter	-apple-system, sans-serif

Characteristics:

Large, editorial headings (clamp 3rem - 7rem)
Light weight (300-400)
Negative letter-spacing on display (-0.02em)
Generous line-height (1.5-1.8)

角色	字体	备选字体
标题/大标题	Instrument Serif	Georgia, serif
正文/UI	Inter	-apple-system, sans-serif

特点：

大尺寸社论风格标题（clamp 3rem - 7rem）
轻字重（300-400）
标题字距为负（-0.02em）
宽松行高（1.5-1.8）

SVG Design Rules

SVG设计规则

Rule	Description
Fills only	Never use strokes for main shapes
Organic paths	Complex Bézier curves, hand-drawn feel
viewBox	Always 1000x1000 or 500x500 (square)
2-4 paths	Keep compositions simple
Layered	Light shapes behind, dark in front

Anti-patterns:

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

规则	描述
仅填充	主体形状绝不使用描边
有机路径	复杂贝塞尔曲线，手绘质感
viewBox	始终为1000x1000或500x500（正方形）
2-4条路径	保持构图简洁
分层结构	亮色形状在底层，暗色在顶层

反模式：

❌ <circle>, <rect>, <ellipse>（几何图形）
❌ 主体元素使用stroke="..."
❌ 多色使用
✅ <path d="M... Q... C..."> 有机曲线

Topic-Driven SVG Generation

主题驱动SVG生成

The

svg-generator.sh

helper automatically selects appropriate SVG templates based on chapter content:

Keywords	Template	Best For
identity, profile, self, unique	Fingerprint + Verification	Personal identity concepts
network, connect, distributed, system	Central Hub + Network	System architecture concepts
protect, secure, vault, lock	Protected Vault + Links	Security concepts
growth, learn, knowledge, tree	Knowledge Tree	Learning/growth concepts
enforce, filter, gate, barrier	Gateway Arches	Enforcement/validation
trust, hand, collaboration	Hand Holding + Connection	Partnership concepts
unify, finale, complete	Concentric Symbol	Conclusion/unity

Usage:

bash

undefined

svg-generator.sh

辅助工具会根据章节内容自动选择合适的SVG模板：

关键词	模板	最佳适用场景
identity, profile, self, unique	Fingerprint + Verification（指纹+验证）	个人身份概念
network, connect, distributed, system	Central Hub + Network（中心枢纽+网络）	系统架构概念
protect, secure, vault, lock	Protected Vault + Links（受保护金库+链接）	安全概念
growth, learn, knowledge, tree	Knowledge Tree（知识树）	学习/成长概念
enforce, filter, gate, barrier	Gateway Arches（拱门网关）	执行/验证场景
trust, hand, collaboration	Hand Holding + Connection（牵手+连接）	合作概念
unify, finale, complete	Concentric Symbol（同心符号）	结论/统一场景

用法：

bash

undefined

Source the generator in your script

在脚本中引入生成器

source scripts/svg-generator.sh

Generate SVG for a chapter (position: hero/ch1/ch2/ch3/ch4/ch5/finale)

为章节生成SVG（位置：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"


**Positions:** `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`

Animation Patterns

动画模式

For detailed GSAP and CSS animation patterns, see

references/animation-patterns.md

Animation Classes:

Class	Description	Usage
`organic-path`	Base class for all SVG paths	Always applied
`fade-path`	Fade in animation	Default for most paths
`scale-path`	Scale up animation	Combined with fade-path
`draw-path`	Stroke draw animation (GSAP only)	For line/path drawing effects

有关GSAP和CSS动画模式的详细内容，请参考

references/animation-patterns.md

动画类：

类名	描述	用法
`organic-path`	所有SVG路径的基础类	始终添加
`fade-path`	渐显动画	大多数路径的默认选择
`scale-path`	缩放动画	与fade-path结合使用
`draw-path`	描边绘制动画（仅GSAP）	用于线条/路径绘制效果

Narrative Structure

叙事结构

For narrative structure and HTML templates, see

references/structure-templates.md

有关叙事结构和HTML模板，请参考

references/structure-templates.md

Resources

资源

File	Purpose	Load When
`scripts/generate.sh`	Creates HTML (CSS-only or GSAP with --gsap)	Starting new project
`scripts/svg-generator.sh`	Topic-driven SVG generation helper	Creating custom illustrations
`references/animation-patterns.md`	GSAP + CSS animation patterns	Implementing animations
`references/structure-templates.md`	Narrative structure + HTML templates	Building sections
`references/svg-illustration-guide.md`	Theme → SVG element mapping, templates	Creating topic-relevant illustrations
`references/example-david-goliath.md`	Complete worked example with all 5 SVGs	Learning SVG composition patterns
`references/anthropic-design.md`	Full design system reference	Deep customization
`references/gsap-patterns.md`	GSAP + ScrollTrigger recipes	Using GSAP animation style
`references/css-only-patterns.md`	IntersectionObserver recipes	Using CSS-only animation style
`references/design-harmony.md`	Visual cohesion + palette-mood SVG styling	Ensuring consistent design quality

文件	用途	加载时机
`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样式	确保设计质量一致时

Example Files

示例文件

File	Animation	Description
`agent-harness-gsap.html`	GSAP	Full experience with orbit SVGs, draw animations, parallax
`agent-harness-anthropic.html`	CSS-only	Lightweight with IntersectionObserver reveals

文件	动画类型	描述
`agent-harness-gsap.html`	GSAP	完整体验，包含轨道SVG、绘制动画、视差滚动
`agent-harness-anthropic.html`	纯CSS	轻量级，使用IntersectionObserver渐显效果

Usage Workflow

使用工作流

Choose Animation Style: GSAP (rich) or CSS-only (lightweight)
Choose Palette: Select mood → pick specific palette
Select Chapter Count: Choose 3, 4, or 5 chapters
Plan Narrative: Hero + selected chapters + finale

Generate:

bash scripts/generate.sh project-name <palette> [--gsap]

Customize Content: Replace placeholder text
Add Illustrations: Use organic path templates from assets/
Test: Verify animations, cursor, scroll behavior
Ship: Single self-contained HTML file

选择动画风格：GSAP（丰富效果）或纯CSS（轻量级）
选择配色方案：选择氛围→挑选具体配色
选择章节数量：3、4或5章
规划叙事：Hero区域+选定章节+结尾

生成项目：

bash scripts/generate.sh project-name <palette> [--gsap]

自定义内容：替换占位文本
添加插画：使用assets/中的有机路径模板
测试：验证动画、光标、滚动行为
发布：单个自包含HTML文件

Accessibility

无障碍支持

```
prefers-reduced-motion
```
support (disables animations)
Touch device detection (hides custom cursor)
Semantic HTML structure
High contrast duotone

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

Token Efficiency

令牌效率

Scripts execute without loading context (0 tokens)
SVG templates are copy-paste patterns
Single HTML output, no build step
CSS custom properties for easy theming

脚本执行无需加载上下文（0令牌）
SVG模板为复制粘贴式模式
输出单个HTML文件，无需构建步骤
使用CSS自定义属性实现轻松主题切换