| license | Apache-2.0 |
| name | data-viz-commercials |
| description | Expert in turning data visualizations into compelling video and animation content for social media and marketing. Activate on: data commercial, animated chart, data storytelling video, chart animation, Remotion data video, Motion Canvas, Flourish animation, D3 animation, data viz social media, dashboard recording, data narrative video. NOT for: static data visualization (use data-viz-2025), general video editing (use video-processing-editing), full video production pipeline (use ai-video-production-master). |
| allowed-tools | Read,Write,Edit,Bash(npm:*,npx:*,ffmpeg:*,obs:*,remotion:*),Glob,Grep,WebSearch,WebFetch |
| metadata | {"category":"Content & Creative","tags":["data-visualization","video-production","animation","social-media","storytelling","remotion","motion-canvas"],"pairs-with":[{"skill":"data-viz-2025","reason":"Static chart design that feeds into animated versions"},{"skill":"video-processing-editing","reason":"Post-production editing, encoding, format conversion"},{"skill":"ai-video-production-master","reason":"Full production pipeline including narration and music"}]} |
| category | Data & Analytics |
| tags | ["data-visualization","commercial","dashboards","storytelling","presentation"] |
Data Viz Commercials
Expert in turning data stories into compelling video and animation content — the intersection of data visualization, motion design, and narrative storytelling that makes data shareable on social media.
Decision Points
1. Tool Selection by Requirements
IF need 100+ personalized videos from dataset
→ Use Remotion (React-based, data-driven)
ELSE IF need explainer with voice-over sync
→ Use Motion Canvas (TypeScript generators)
ELSE IF need bar chart race for social media quickly
→ Use Flourish (no-code, built-in templates)
ELSE IF recording existing dashboard
→ Use OBS Studio + screen capture
ELSE IF custom web interactive
→ Use D3 + GSAP
2. Narrative Structure Selection
IF audience = social media (Twitter/LinkedIn)
→ Hook (0-3s) → Insight (3-15s) → Proof (15-25s) → CTA (25-30s)
ELSE IF audience = presentation/explainer
→ Context (0-10s) → Problem (10-20s) → Data reveal (20-45s) → Solution (45-60s)
ELSE IF audience = educational
→ Question (0-5s) → Setup (5-15s) → Step-by-step reveal (15-50s) → Summary (50-60s)
3. Animation Timing Strategy
IF showing magnitude/comparison
→ Grow bars from zero (1-2s per group)
ELSE IF showing trend over time
→ Line drawing left-to-right (2-3s total path)
ELSE IF showing transformation
→ Morph transition (1-1.5s between states)
ELSE IF showing multiple categories
→ Cascade reveal (0.2s stagger between items)
4. Platform Optimization
IF target = Instagram/TikTok/YouTube Shorts
→ 9:16 aspect, <60s duration, mobile-first text sizing
ELSE IF target = Twitter/LinkedIn
→ 16:9 or 1:1 aspect, 30-90s duration, high contrast colors
ELSE IF target = presentations
→ 16:9 aspect, 60-300s duration, detailed annotations
Failure Modes
| Anti-Pattern | Detection Rule | Diagnosis | Fix |
|---|
| Over-Animation Chaos | If every element bounces/spins/zooms simultaneously | Too much motion competing for attention | Remove decorative animations; animate only to reveal data insights |
| Unclear Data Arc | If viewer asks "what am I supposed to see?" after 15 seconds | No narrative thread connecting charts | Apply Hook→Context→Insight→Proof→CTA structure; one insight per video |
| Long Render Blocks | If Remotion render takes >10min for 60s video | Inefficient frame calculations or complex animations | Profile with ; simplify interpolations; cache expensive computations |
