explainer-visuals

# Explainer Visuals

Create animated, interactive visuals that make complex ideas intuitive.

## Philosophy

Great explainer visuals don't just illustrate—they *reveal*. They show the structure hidden in complexity, the motion implicit in static descriptions, the relationships that words struggle to convey.

**Core principles:**
- **Earned complexity**: Start simple, add layers through interaction or animation
- **Semantic motion**: Movement carries meaning, not just attention
- **Readable at rest**: The static state communicates the core idea
- **Progressive disclosure**: Let viewers control depth of exploration

## Discovery Process

Before creating any visual, conduct a brief discovery interview using AskUserQuestion. Understand not just WHAT to visualize, but WHY this idea needs visual treatment.

### Discovery Questions

Ask 1-2 focused questions from these categories:

**Understanding the idea:**
- "What's the single most important insight viewers should take away?"
- "What makes this concept hard to explain in words alone?"
- "Is there a common misconception this visual should correct?"

**Understanding the context:**
- "Where will this appear in your essay? (Opening hook, supporting evidence, climactic reveal, summary)"
- "What's the surrounding content's tone? (Academic, conversational, provocative, instructive)"

**Understanding the audience:**
- "What does your reader already know about this topic?"
- "Should this feel like a quick insight or an explorable deep-dive?"

Skip discovery only if the user has already provided rich context about their goals.

## Visual Format Selection

Choose format based on the nature of the idea:

| Concept Type | Optimal Format | Why |
|--------------|----------------|-----|
| **Transformation/Change** | Morphing animation | Shows before→after as continuous process |
| **Hierarchy/Structure** | Zoomable treemap or nested diagram | Reveals layers through interaction |
| **Process/Flow** | Stepped animation with scrubber | Us