By name: video-storyboard description: 'Structured video planning with art direction, scene breakdown, and asset inventory. Use when creating new video compositions or planning multi-scene productions.'
Video Storyboard — Structured Scene Planning
When to Use
- Creating a new video composition from scratch
- Planning a multi-scene product demo or explainer
- Defining visual style before implementation
- Coordinating assets across scenes
Step 1: Art Direction Document
Create a markdown file defining the visual identity. This gives Claude consistent style context.
# Art Direction — [Video Name]
## Visual Style
- **Mood**: Professional, modern, approachable
- **Color palette**: Primary #2DD4BF, Secondary #1E293B, Accent #F59E0B
- **Typography**: Rubik (400/600/700), clean sans-serif
- **Background**: Dark gradient (#0F172A → #1E293B)
## Motion Style
- **Entrances**: Slide up with spring (damping: 15, stiffness: 120)
- **Transitions**: Light leaks between scenes, crossfade within scenes
- **Timing**: Snappy (0.3-0.5s animations), no lingering
- **Hand cursor**: Click gesture with pointer animation
## Brand Elements
- Logo placement: Top-left or centered intro
- Phone mockup: iPhone 14 Pro (390x844), dark bezel
- Screenshots: Real app captures from public/dorian/
Step 2: Scene Breakdown
Define each scene with timing, content, and transitions.
# Storyboard — [Video Name]
## Scene Flow
| # | Scene | Duration | Content | Transition In |
| --- | --------- | -------- | ------------------------------- | ------------- |
| 1 | Intro | 2s | Logo fade-in + tagline | None |
| 2 | Problem | 3s | Pain point text animation | Light leak |
| 3 | Solution | 4s | App screenshot + hand demo | Slide |
| 4 | Feature 1 | 3s | Browse products + scroll | Crossfade |
| 5 | Feature 2 | 3s | AI chat interaction | Crossfade |
| 6 | CTA | 2s | Download now + app store badges | Light leak |
**Total**: ~17s at 30fps = 510 frames
## Scene Details
### Scene 1: Intro (60 frames)
- Frame 0-15: Black → logo fade in (spring)
- Frame 15-45: Tagline slides up below logo
- Frame 45-60: Hold
### Scene 2: Problem (90 frames)
- Frame 0-30: "Shopping online is broken" types in
- Frame 30-60: Pain points appear as bullet list
- Frame 60-90: Fade out
Step 3: Asset Inventory
# Assets — [Video Name]
## Screenshots (from public/)
- [ ] dorian/home-screen.png — Main marketplace view
- [ ] dorian/product-detail.png — Product page
- [ ] dorian/ai-chat.png — AI assistant conversation
## Generated Assets (Claude creates)
- [ ] SVG logo animation
- [ ] Background gradient component
- [ ] Text animation components
## Audio
- [ ] Voiceover: ElevenLabs (Rachel voice)
- [ ] SFX: whoosh.wav (transitions), mouse-click.wav (taps)
- [ ] Background: none / subtle ambient
## Lottie Animations
- [ ] hand-click — cursor pointer click gesture
- [ ] cursor-arrow — pointer cursor
Step 4: Implementation Checklist
## Implementation Order
1. [ ] Create composition in Root.tsx with correct dimensions/fps
2. [ ] Build shared components (if new patterns needed)
3. [ ] Implement scenes 1-by-1 in order
4. [ ] Add hand animations via SceneDirector
5. [ ] Add audio (SFX + voiceover if applicable)
6. [ ] Add transitions between scenes
7. [ ] Preview full video in Remotion Studio
8. [ ] Polish timing and animations
9. [ ] Render final video
Templates
Product Demo (Phone Mockup)
Best for: App showcases, feature walkthroughs
- Phone in center, hand cursor interacting
- 6-10 scenes, 15-30 seconds
- Uses: DorianPhoneMockup, FloatingHand, ScrollSyncedHand
Motion Graphics (Full Screen)
Best for: Marketing videos, explainers, social media
- Full 1080x1920 canvas, text animations, shapes
- 4-8 scenes, 10-20 seconds
- Uses: noise backgrounds, shapes, animated emoji, light leaks
Narrated Explainer
Best for: Product tours, tutorials, onboarding
- Voiceover + captions + visual content
- Dynamic duration from audio length
- Uses: voiceover-pipeline skill, captions, calculateMetadata