| 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:
- Opening image/state — what creates immediate orientation or intrigue?
- Promise — what does the experience imply will be revealed?
- Progression — how does each section add information, scale, contrast, or emotion?
- Reveals — what is intentionally withheld until later?
- Breathing room — where should motion and density reduce?
- Climax — what is the strongest visual or conceptual moment?
- 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.
