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:

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:

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:

1. Load references/svg-illustration-guide.md for theme → element mapping
2. Identify chapter position (hero/ch1/ch2/ch3/ch4/ch5/finale)
3. Extract topic keywords from chapter content
4. 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
5. Compose using position template
6. Apply palette mood style (see references/design-harmony.md → Palette Mood → SVG Style)
7. 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

Animation Styles

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

Mood → Palette mapping:

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

Design Modes

Core Features

Anthropic Design Language

Strict Duotone Palette

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

Typography

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

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:

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:

Narrative Structure

For narrative structure and HTML templates, see `references/structure-templates.md`

Resources

Example Files

Usage Workflow

1. Choose Animation Style: GSAP (rich) or CSS-only (lightweight)
2. Choose Palette: Select mood → pick specific palette
3. Select Chapter Count: Choose 3, 4, or 5 chapters
4. Plan Narrative: Hero + selected chapters + finale
5. Generate: bash scripts/generate.sh project-name <palette> [--gsap]
6. Customize Content: Replace placeholder text
7. Add Illustrations: Use organic path templates from assets/
8. Test: Verify animations, cursor, scroll behavior
9. 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