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.
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 ~/.claude/skills/scroll-storyteller/scripts/generate.sh my-story <palette> [--gsap] [--chapters N]
Post-generation: Customize content, create SVGs (see references/structure-templates.md)
SVG Illustration Workflow
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:
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 Features
- SVG path draw animations (strokeDasharray)
- Continuous orbit/rotation effects
- Scroll-linked timeline control
- Parallax with scrub
- Staggered animations with precise timing
CSS-only Features
- IntersectionObserver reveals
- CSS transitions with delays
- Transform-based animations
- No external dependencies
- Smaller bundle size
Duotone Palettes
| # |
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)
Design Modes
| Mode |
Description |
When to Use |
| Authentic (default) |
Strict duotone, organic paths |
Editorial, brand storytelling |
| Expressive |
Multi-color accents allowed |
Product showcases, demos |
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 |
Anthropic Design Language
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.
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)
SVG Design Rules
| 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
Topic-Driven SVG Generation
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:
# 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"
Positions: 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 |
Narrative Structure
For narrative structure and HTML templates, see 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 |
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 |
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
Accessibility
prefers-reduced-motion support (disables animations)- Touch device detection (hides custom cursor)
- Semantic HTML structure
- High contrast duotone
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
1---2name: scroll-storyteller3description: Use when creating interactive scroll-based storytelling experiences with mouse-following spotlight effects, animated SVG art, and the Anthropic design language. Load for explainer pages, product showcases, visual narratives, or any content needing immersive scroll storytelling with organic shapes and smooth animations. Supports GSAP-powered or lightweight CSS-only animations.4license: MIT5---6
7# Scroll Storyteller
8
9Create immersive, interactive storytelling experiences using Anthropic's authentic design language: strict duotone palette, organic Bézier SVG paths, custom cursors, and chapter-based narratives.
10
11## Workflow
12
13Use `AskUserQuestion` to gather preferences, then generate:
14
15| Step | Question | Options |
16|------|----------|---------|
17| 1 | Animation? | GSAP (rich) vs CSS-only (lightweight) |
18| 2 | Mood? | Warm vs Cool vs Creative |
19| 3 | Palette? | (show 3-4 based on mood) |
20| 4 | Topic? | Biblical/Tech/Business/Personal/Custom |
21| 5 | Chapters? | 3, 4, or 5 |
22| 6 | Content per chapter | Title, description, keywords |
23
24**Generate:**
25```bash
26bash ~/.claude/skills/scroll-storyteller/scripts/generate.sh my-story <palette> [--gsap] [--chapters N]
27```
28
29**Post-generation:** Customize content, create SVGs (see `references/structure-templates.md`)
30
31## SVG Illustration Workflow
32
33Each chapter needs a topic-relevant SVG that matches the narrative position:
34
35| Position | Purpose | Composition | Example |
36|----------|---------|-------------|---------|
37| **Hero** | Set scene, show contrast | Wide (1000x1000), 2 silhouettes | David vs Goliath distant |
38| **Chapter 1** | Introduce protagonist | Centered figure + context | Shepherd with sheep |
39| **Chapter 2** | Show conflict/obstacle | Imposing, fills frame | Giant warrior |
40| **Chapter 3** | Resolution/triumph | Dynamic, radiating | Victor + fallen + rays |
41| **Chapter 4** | Deepening conflict (optional) | Crowded, escalating | Army masses, threats multiply |
42| **Chapter 5** | Final climax (optional) | Action, decisive | Stone flying, impact moment |
43| **Finale** | Symbolic summary | Centered symbol | Crown + light |
44
45**Light/Dark Pattern by Chapter Count:**
46- **3 chapters:** Ch1=Light → Ch2=Dark → Ch3=Light
47- **4 chapters:** Ch1=Light → Ch2=Dark → Ch3=Light → Ch4=Dark
48- **5 chapters:** Ch1=Light → Ch2=Dark → Ch3=Light → Ch4=Dark → Ch5=Light
49
50**Process:**
511. Load `references/svg-illustration-guide.md` for theme → element mapping
522. Identify chapter position (hero/ch1/ch2/ch3/ch4/ch5/finale)
533. Extract topic keywords from chapter content
544. Select SVG elements from element library:
55 - Characters: figure-small, figure-large, figure-triumphant, figure-action
56 - Nature: hills, sun, tree, path, clouds, lightning, wind
57 - Objects: staff, crown, shield, weapon, stone, obstacle
58 - Abstract: radiate, rings, trajectory, converge, impact
595. Compose using position template
606. Apply palette mood style (see `references/design-harmony.md` → Palette Mood → SVG Style)
617. Add animation classes: `organic-path`, `fade-path`, `scale-path`
62
63**SVG Checklist:**
64- [ ] Uses only `var(--deep)` and `var(--foam)` colors
65- [ ] All paths are organic Bézier curves (Q/C commands)
66- [ ] No geometric primitives (circle, rect, ellipse)
67- [ ] Opacity range matches palette mood
68- [ ] Composition matches chapter position
69- [ ] Symbolically represents chapter content
70
71## Animation Styles
72
73| Style | Library | Size | Best For |
74|-------|---------|------|----------|
75| **GSAP** | GSAP 3.x + ScrollTrigger | ~45KB | Rich interactions, SVG draw, orbits, timelines |
76| **CSS-only** | None (IntersectionObserver) | 0KB | Lightweight, fast load, simple reveals |
77
78### GSAP Features
79- SVG path draw animations (strokeDasharray)
80- Continuous orbit/rotation effects
81- Scroll-linked timeline control
82- Parallax with scrub
83- Staggered animations with precise timing
84
85### CSS-only Features
86- IntersectionObserver reveals
87- CSS transitions with delays
88- Transform-based animations
89- No external dependencies
90- Smaller bundle size
91
92## Duotone Palettes
93
94| # | Theme | Light | Dark | Mood |
95|---|-------|-------|------|------|
96| 1 | **Anthropic** | `#FAF9F5` cream | `#141413` charcoal | Warm |
97| 2 | **Midnight** | `#E8F4F8` ice | `#0D1B2A` navy | Cool |
98| 3 | **Sepia** | `#F5F0E6` parchment | `#2C1810` espresso | Warm |
99| 4 | **Forest** | `#F0F4F0` mist | `#1A2E1A` evergreen | Creative |
100| 5 | **Dusk** | `#F4F0F8` lavender | `#1E1A2E` violet | Creative |
101| 6 | **Ember** | `#FFF5F0` blush | `#2A1A14` ember | Warm |
102| 7 | **Steel** | `#F0F2F5` silver | `#1A1C20` graphite | Cool |
103| 8 | **Ocean** | `#F0F8F8` foam | `#0A1A1A` deep | Cool |
104
105**Mood → Palette mapping:**
106- **Warm**: 1 (Anthropic), 3 (Sepia), 6 (Ember)
107- **Cool**: 2 (Midnight), 7 (Steel), 8 (Ocean)
108- **Creative**: 4 (Forest), 5 (Dusk)
109
110## Design Modes
111
112| Mode | Description | When to Use |
113|------|-------------|-------------|
114| **Authentic** (default) | Strict duotone, organic paths | Editorial, brand storytelling |
115| **Expressive** | Multi-color accents allowed | Product showcases, demos |
116
117## Core Features
118
119| Feature | Description |
120|---------|-------------|
121| **Custom Cursor** | Dual-layer cursor with smooth easing, mix-blend-mode |
122| **Hero Section** | **GSAP**: Flowing organic lines (1000x1000 background). **CSS-only**: Desk lamp with animated light cone reveal |
123| **Spotlight Layer** | Radial gradient follows cursor on dark sections |
124| **Staggered Reveals** | Title words animate in sequence on load |
125| **Chapter Structure** | Alternating light/dark sections with transitions |
126| **Organic SVGs** | Hand-drawn Bézier paths, fill-only (no strokes) |
127| **Parallax** | Subtle depth movement on scroll |
128
129## Anthropic Design Language
130
131### Strict Duotone Palette
132
133| Element | Hex | CSS Variable |
134|---------|-----|--------------|
135| Cream (light) | `#FAF9F5` | `--cream` |
136| Charcoal (dark) | `#141413` | `--charcoal` |
137
138**Rule:** No other colors. All illustrations use exactly these two.
139
140### Typography
141
142| Role | Font | Fallback |
143|------|------|----------|
144| Display/Headings | Instrument Serif | Georgia, serif |
145| Body/UI | Inter | -apple-system, sans-serif |
146
147**Characteristics:**
148- Large, editorial headings (clamp 3rem - 7rem)
149- Light weight (300-400)
150- Negative letter-spacing on display (-0.02em)
151- Generous line-height (1.5-1.8)
152
153### SVG Design Rules
154
155| Rule | Description |
156|------|-------------|
157| **Fills only** | Never use strokes for main shapes |
158| **Organic paths** | Complex Bézier curves, hand-drawn feel |
159| **viewBox** | Always 1000x1000 or 500x500 (square) |
160| **2-4 paths** | Keep compositions simple |
161| **Layered** | Light shapes behind, dark in front |
162
163**Anti-patterns:**
164```
165❌ <circle>, <rect>, <ellipse> (geometric)
166❌ stroke="..." on main elements
167❌ Multiple colors
168✅ <path d="M... Q... C..."> with organic curves
169```
170
171### Topic-Driven SVG Generation
172
173The `svg-generator.sh` helper automatically selects appropriate SVG templates based on chapter content:
174
175| Keywords | Template | Best For |
176|----------|----------|----------|
177| identity, profile, self, unique | **Fingerprint + Verification** | Personal identity concepts |
178| network, connect, distributed, system | **Central Hub + Network** | System architecture concepts |
179| protect, secure, vault, lock | **Protected Vault + Links** | Security concepts |
180| growth, learn, knowledge, tree | **Knowledge Tree** | Learning/growth concepts |
181| enforce, filter, gate, barrier | **Gateway Arches** | Enforcement/validation |
182| trust, hand, collaboration | **Hand Holding + Connection** | Partnership concepts |
183| unify, finale, complete | **Concentric Symbol** | Conclusion/unity |
184
185**Usage:**
186```bash
187# Source the generator in your script
188source scripts/svg-generator.sh
189
190# Generate SVG for a chapter (position: hero/ch1/ch2/ch3/ch4/ch5/finale)
191generate_svg_for_chapter \
192 "ch1" \
193 "Digital Identity" \
194 "Your unique identity on the blockchain" \
195 "var(--foam)" \
196 "var(--deep)" \
197 "fade-path"
198```
199
200**Positions:** `hero` | `ch1` | `ch2` | `ch3` | `ch4` | `ch5` | `finale`
201
202## Animation Patterns
203
204For detailed GSAP and CSS animation patterns, see [`references/animation-patterns.md`](./references/animation-patterns.md)
205
206**Animation Classes:**
207| Class | Description | Usage |
208|-------|-------------|-------|
209| `organic-path` | Base class for all SVG paths | Always applied |
210| `fade-path` | Fade in animation | Default for most paths |
211| `scale-path` | Scale up animation | Combined with fade-path |
212| `draw-path` | Stroke draw animation (GSAP only) | For line/path drawing effects |
213
214## Narrative Structure
215
216For narrative structure and HTML templates, see [`references/structure-templates.md`](./references/structure-templates.md)
217
218## Resources
219
220| File | Purpose | Load When |
221|------|---------|-----------|
222| `scripts/generate.sh` | Creates HTML (CSS-only or GSAP with --gsap) | Starting new project |
223| `scripts/svg-generator.sh` | Topic-driven SVG generation helper | Creating custom illustrations |
224| `references/animation-patterns.md` | **GSAP + CSS animation patterns** | **Implementing animations** |
225| `references/structure-templates.md` | **Narrative structure + HTML templates** | **Building sections** |
226| `references/svg-illustration-guide.md` | **Theme → SVG element mapping, templates** | **Creating topic-relevant illustrations** |
227| `references/example-david-goliath.md` | **Complete worked example with all 5 SVGs** | **Learning SVG composition patterns** |
228| `references/anthropic-design.md` | Full design system reference | Deep customization |
229| `references/gsap-patterns.md` | GSAP + ScrollTrigger recipes | Using GSAP animation style |
230| `references/css-only-patterns.md` | IntersectionObserver recipes | Using CSS-only animation style |
231| `references/design-harmony.md` | Visual cohesion + palette-mood SVG styling | Ensuring consistent design quality |
232
233### Example Files
234
235| File | Animation | Description |
236|------|-----------|-------------|
237| `agent-harness-gsap.html` | GSAP | Full experience with orbit SVGs, draw animations, parallax |
238| `agent-harness-anthropic.html` | CSS-only | Lightweight with IntersectionObserver reveals |
239
240## Usage Workflow
241
2421. **Choose Animation Style**: GSAP (rich) or CSS-only (lightweight)
2432. **Choose Palette**: Select mood → pick specific palette
2443. **Select Chapter Count**: Choose 3, 4, or 5 chapters
2454. **Plan Narrative**: Hero + selected chapters + finale
2465. **Generate**: `bash scripts/generate.sh project-name <palette> [--gsap]`
2476. **Customize Content**: Replace placeholder text
2487. **Add Illustrations**: Use organic path templates from assets/
2498. **Test**: Verify animations, cursor, scroll behavior
2509. **Ship**: Single self-contained HTML file
251
252## Accessibility
253
254- `prefers-reduced-motion` support (disables animations)
255- Touch device detection (hides custom cursor)
256- Semantic HTML structure
257- High contrast duotone
258
259## Token Efficiency
260
261- Scripts execute without loading context (0 tokens)
262- SVG templates are copy-paste patterns
263- Single HTML output, no build step
264- CSS custom properties for easy theming
majiayu000