data-viz-commercials

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