Visual Storytelling Director

---
name: visual-storytelling-director
description: Direct the pacing and narrative structure of premium web experiences using scene design, reveals, rhythm, continuity, interaction, and emotional beats before implementation.
---

# Visual Storytelling Director

Use when a website, campaign, product launch, portfolio, or immersive experience needs a deliberate narrative rather than a collection of impressive sections.

## Core question

What should the user feel, understand, and discover at each moment?

## Build a beat sheet

Define:

1. **Opening image/state** — what creates immediate orientation or intrigue?
2. **Promise** — what does the experience imply will be revealed?
3. **Progression** — how does each section add information, scale, contrast, or emotion?
4. **Reveals** — what is intentionally withheld until later?
5. **Breathing room** — where should motion and density reduce?
6. **Climax** — what is the strongest visual or conceptual moment?
7. **Resolution/CTA** — how does the story land without feeling like an ad abruptly appeared?

## Story grammars

Choose a grammar that fits the content rather than defaulting to scroll effects:

- editorial sequence;
- spatial journey;
- guided product reveal;
- before/after transformation;
- chaptered timeline;
- zoom from macro to system scale;
- progressive assembly/disassembly;
- parallel narratives;
- explorable map/world;
- interactive documentary;
- quiet premium catalogue with isolated moments of motion.

## Continuity

Maintain continuity across:

- camera direction and spatial orientation;
- typography and visual hierarchy;
- object persistence between scenes;
- motion vectors and easing language;
- color/material transitions;
- interaction rules;
- sound, if present and optional;
- desktop/mobile narrative equivalence.

A transition should explain relationship or create a deliberate emotional beat, not merely hide a route change.

## Interaction as narrative

Decide whether the user is:

- observing;
- revealing;
- steering;
- exploring;
- assembling;
- comparing;
- manipulating;
- choosing a branch.

Use interaction to reinforce meaning. Do not make users drag/scroll excessively just to access basic information.

## Output contract

Return:

- one-sentence visual thesis;
- audience and intended feeling;
- beat sheet;
- scene/state map;
- interaction grammar;
- transition language;
- climax and resolution;
- mobile/reduced-motion adaptation;
- implementation implications and specialist skills needed.

Pair with `creative-web-experiences` for concept generation, `design-taste-frontend` for art direction, and scrollytelling/spatial specialists only after the narrative demands them.