| name | scroll-storyteller |
| description | 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. |
| keywords | scroll, storytelling, interactive, svg, animation, spotlight, hero section, explainer, showcase, gsap, scrolltrigger |
| license | MIT |
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 scripts/svg-generator.sh
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
