Remotion Video

Remotion Video

Create animated short-form videos (1080x1920) using Remotion. Five video types, each with a research-then-animate workflow.

Prerequisites

This skill requires the Remotion best practices skill. Before starting, check whether Remotion skills are installed in the project. If not, instruct the user to run:

npx skills add remotion-dev/skills

See Remotion Agent Skills docs for details.

Type Selection

Determine the video type from the user's input:

Load only the relevant type reference file plus defaults.md for shared configuration (safe zone, fonts, animation rules, visual style).

Common Workflow

All 5 types follow the same two-step pattern:

Step 1: Research / Scrape / Analyze

Gather information based on the video type (research topic, scrape website, scrape reviews, transcribe video, or analyze data). Present findings and a proposed scene outline. Wait for user approval before writing code.

Step 2: Design & Animate

After approval, build all scenes as Remotion React components. Follow the animation rules from defaults.md:

• Spring entrances (damping: 200), no linear motion
• Stagger related items by 8-12 frames
• TransitionSeries with 12-frame fade transitions between scenes
• SVG stroke-dashoffset for diagram/flowchart drawing
• interpolate() + tabular-nums for count-up animations
• Particle effects for celebration/closing moments

Preview

After building, launch Remotion Studio:

npx remotion studio

Design Principles

• Each scene needs a clear visual metaphor — diagrams, flowcharts, icons, step-by-step animations
• No walls of text — dense information, beautiful motion, fast pacing
• Kurzgesagt meets Fireship: complex ideas made visually intuitive
• All graphics built as SVG components (no external image assets needed)
• Respect the safe zone (see defaults.md) — nothing important near edges

Credit

Based on video prompts by Sabrina Ramonov. Adapted into an Agent Skill with configurable defaults and progressive disclosure.

Avatar + Animated Overlays

Overlay animated titles, topic graphics, captions, and progress indicators on top of a talking-head video — synced to speech. The original video stays full-frame, untouched.

Input

User provides a 9:16 talking-head video file (place in public/avatar.mp4). Selfie-style shot where the face is in the lower 60% of the frame, with open space above.

Workflow

Step 1: Transcribe & Plan

Transcribe public/avatar.mp4 using Whisper. Analyze the transcript to identify:

• Total duration (set composition length to match the video)
• 3-5 key topic segments with their start timestamps
• For each segment, propose an overlay graphic for the top portion of the frame (above the head). Options:
• Topic title with large step number (e.g., "01" faded in background, "Elements of AI" as headline)
• Keyword pill/badge highlighting the current topic
• Simple animated icon or diagram illustrating the concept
• Progress bar or step indicator showing position in video
• Animated caption/quote pulling a key phrase

Present transcript segments and proposed overlays. Wait for approval before coding.

Step 2: Build

BASE LAYER — Full-frame avatar video:

• <OffthreadVideo src={staticFile("avatar.mp4")} /> filling the entire 1080x1920 composition
• style={{ width: "100%", height: "100%", objectFit: "cover" }}
• Background layer: plays from frame 0 for the full duration
• Audio from this video is the composition's audio track
• Do NOT crop, resize, split, or put in a panel — it IS the full frame

OVERLAY LAYER — Animated graphics (top ~35% of frame, above the head):

• Use AbsoluteFill on top of the video layer
• All graphics positioned in top portion (y: 150px to ~700px)
• Subtle dark gradient overlay ONLY in top 40% (transparent at bottom, rgba(0,0,0,0.6) at top) so white text is readable

Overlay style per segment:

• Large faded step number ("01", "02", etc.) — Inter 800, ~200px, rgba(255,255,255,0.08)
• Topic headline below it — Inter 700, 56-64px, white
• Keyword badge — small rounded pill with glass-morphism background, 32px text
• Animated progress bar under badge — thin line filling to show segment progress, accent #22c55e
• Each overlay enters with spring({ damping: 200 }) at segment start timestamp
• Previous overlay fades out (opacity 0 over 10 frames) as new one enters
• Use Sequence components with from={Math.round(timestamp * fps)} to sync to speech

OPTIONAL BOTTOM OVERLAY — Captions:

• If word-level timestamps available from Whisper, add animated captions in lower portion (above bottom safe zone, around y: 1600-1700px)
• Bold white text, 36px, subtle text shadow for readability
• Highlight current word in accent color (#6366f1)

Visual Style

Dark theme from defaults.md. Accents: #6366f1 (indigo) and #22c55e (green).

Duration

Matches the input video duration. Not a fixed length.

Output

• Remotion composition at 1080x1920, 30fps (same as input)
• Launch npx remotion studio for preview

Data Visualization Dashboard Video

Create an animated data dashboard video from a CSV file. Design and animate charts, KPIs, and trend indicators — no design skills needed.

Input

User provides a CSV file (place in public/data.csv).

Workflow

Step 1: Analyze

Read the CSV file. Identify:

• A compelling title for the dashboard
• The single most impressive KPI stat (for the hero card)
• Data suitable for a bar chart (categorical comparison)
• Data suitable for a donut/pie chart (parts of a whole)
• Data suitable for a line chart (trend over time)

If the CSV doesn't have all 4 chart types, pick the best 4 visualizations for the data and adapt.

Present the proposed dashboard layout. Wait for approval before coding.

Step 2: Animate

Build 4 panels in a vertical stack (15 seconds total).

Layout: Vertical stack with 30px padding between panels. Top margin 150px (safe zone), bottom panel ends above 170px (safe zone). Side margins 60px. Dark background #0a0a0a.

PANEL 1 — KPI Hero Card:

• Large headline number counting up from 0 using interpolate(), with suffix (%, $, k, M)
• Subtitle describing the metric, Inter 400, 20px, #94a3b8
• Trend indicator: colored arrow (green up or red down) with change, slides in after count finishes
• Glass-morphism card: rgba(255,255,255,0.05), border 1px solid rgba(255,255,255,0.1), backdrop-blur
• tabular-nums font-variant for smooth counting
• Entrance: card scales from 0.8 to 1.0 with spring at frame 10

PANEL 2 — Bar Chart:

• Horizontal bars, one per category, using real labels and values from CSV
• Each bar grows from width 0 using spring({ damping: 200, delay: index * 10 })
• Bar colors: gradient from #6366f1 to #8b5cf6
• Labels on left, values appear at bar end after growth completes
• Rounded-right corners (8px)
• Entrance: staggered, starting at frame 25

PANEL 3 — Donut Chart:

• SVG donut using stroke-dasharray / stroke-dashoffset
• Segments draw clockwise, each starting after previous finishes
• Colors: #3b82f6, #22c55e, #f59e0b, #ef4444 (cycle if more segments)
• Radius 80px, stroke-width 24px
• Center text: category name swaps as each segment draws
• Colored legend dots below, staggered fade-in
• Entrance: starts at frame 50

PANEL 4 — Line Chart:

• SVG polyline drawing left to right via stroke-dashoffset + interpolate()
• Data point circles (r=4) pop in with scale spring as line reaches them
• Gradient fill below line (color to transparent) reveals with the draw
• Axis labels from CSV data
• Line color: #22c55e
• Entrance: starts at frame 70

Global elements:

• Dashboard title (from analysis) fades in at frame 0, top safe zone, Inter 800, 36px
• Source subtitle fades in at frame 5, Inter 400, 16px, #64748b
• All panels use matching glass-morphism card style

Reusable components to create:

• CountUp — accepts from, to, durationInFrames, suffix
• AnimatedBar — accepts width, delay, label, value
• DonutSegment — accepts percentage, color, delay
• AnimatedLine — accepts points, drawDuration

Visual Style

Dark theme from defaults.md. Chart colors: #6366f1 / #8b5cf6 gradient for bars, #22c55e for line, #3b82f6 / #22c55e / #f59e0b / #ef4444 for donut.

Duration

15 seconds. 4 panels.

Output

• Remotion composition at 1080x1920, 30fps
• Launch npx remotion studio for preview

Shared Defaults

All video types share these defaults unless a type-specific reference file overrides them.

Video Specs

Safe Zone

All text and key content must stay within the safe zone — nothing important should touch the edges.

Rule: If in doubt, give more padding, not less.

Font Size Minimums

Use Inter font family (weights 400, 600, 800) unless a type specifies otherwise.

Visual Style (Dark Theme)

Default for Education Explainer, Product Demo, Avatar Overlays, and Data Viz:

Visual Style (Light Theme)

Used by Testimonial type:

Animation Rules

Common Remotion Patterns

Spring Entrance

const scale = spring({
  frame,
  fps,
  config: { damping: 200 },
  from: 0,
  to: 1,
});

Count-Up Animation

const value = interpolate(frame, [0, durationInFrames - 10], [0, targetValue], {
  extrapolateRight: "clamp",
});
// Apply: style={{ fontVariantNumeric: "tabular-nums" }}

SVG Path Drawing

const pathLength = interpolate(frame, [0, duration], [0, 1], {
  extrapolateRight: "clamp",
});
// Apply: strokeDasharray="1" strokeDashoffset={1 - pathLength}

Staggered Entrance

items.map((item, i) => {
  const delay = i * 10; // 10 frames between items
  const opacity = spring({ frame: frame - delay, fps, config: { damping: 200 } });
  return <div style={{ opacity }}>{item}</div>;
});

Preview & Render

After building, launch Remotion Studio for preview:

npx remotion studio

For final render:

npx remotion render <composition-id> out/video.mp4

Education Explainer Video

Create an animated explainer video that teaches any topic. Research the topic, write a 5-scene script, then design and animate all scenes.

Input

User provides a topic string (e.g., "How AI Agents Work", "How DNS Works", "How Photosynthesis Works").

Workflow

Step 1: Research & Script

Before writing any code, research the topic and write a 5-scene script. Each scene needs:

• Headline: One-line title (max 6 words)
• Explanation: 1-2 sentences of key information
• Visual: Description of what to animate (diagram, flowchart, icons, step-by-step)

Present the script to the user and wait for approval before coding.

Scene pacing guidance:

• Scene 1 (Hook): 3-4 seconds — pose a question or state a surprising fact
• Scenes 2-4 (Core): 7-8 seconds each — teach the key concepts
• Scene 5 (Recap): 4-5 seconds — summarize with a memorable takeaway

Step 2: Design & Animate

After approval, build all 5 scenes.

Visual style: Use the dark theme from defaults.md.

Scene design principles:

• Each scene needs a clear visual metaphor — diagrams, flowcharts, icons, or step-by-step animations
• No walls of text — dense information, beautiful motion, fast pacing
• Think Kurzgesagt meets Fireship: complex ideas made visually intuitive
• All icons/diagrams built as SVG components (no external assets)

Animation specifics:

• Every element enters with spring({ damping: 200 }) — no linear motion
• Stagger related items by 8-12 frames
• Use TransitionSeries with 12-frame fade transitions between scenes
• Diagrams and flowcharts draw themselves (SVG stroke-dashoffset)
• Key numbers use count-up animation with interpolate() and tabular-nums
• Final scene: particle effect background (10-15 circles drifting upward)

Duration

30 seconds total. Default 5 scenes.

Output

• Remotion composition at 1080x1920, 30fps
• Launch npx remotion studio for preview

Product Demo + Launch Video

Create a product demo and launch video from any product URL. Scrape real branding, download product images, and build an animated ad with simulated demo and screenshot showcase.

Input

User provides a product URL (e.g., https://your-product-url.com).

Workflow

Step 1: Research & Asset Download

Visit the URL. Extract:

• Product name and logo — download logo/favicon to public/
• Brand colors — pull from the site's CSS or visible design
• Tagline / hero headline
• Core user flow — what does someone DO with this product?
• 3 key features or value propositions
• Social proof — user counts, testimonials, logos
• Product images — find product screenshots/images the site already displays (hero images, product UI screenshots, feature images, app previews). Download 2-3 of the best to public/product-1.png, product-2.png, etc. Look for <img> tags, og:image meta tags, background images. Prefer PNG/JPG product mockups over generic stock photos. Only take browser screenshots as a last resort.

Present findings and a proposed 6-scene outline. Wait for approval before coding.

Step 2: Build the Video

Build 6 scenes (25 seconds total):

SCENE 1 — Hook (3s):

• Bold text: a pain-point question relevant to the product (e.g., "Still editing videos manually?")
• Text slams in with spring from 2x scale, holds 2s, fades out
• Dark background with subtle brand-color radial glow

SCENE 2 — Product Intro (3s):

• Product name/logo scales in with spring from 3x to 1x
• Real tagline slides up below
• Particle burst behind logo: 20 circles expanding outward with random trajectories, fading out, using brand accent color

SCENE 3 — Simulated Demo (8s):

• Recreate a simplified, MOBILE-SIZED version of the product's core interaction using React components (styled divs, inputs, buttons, cards in brand colors)
• NO device mockup frame — build UI elements directly on dark background, large enough to fill safe zone width (960px+)
• Animate a cursor (small white circle with subtle trail) that:
• Moves to an input field (full width, 72px tall, 36px text) using spring({ damping: 15 })
• Click ripple effect (expanding circle that fades)
• Text types into field character by character at 36px font size
• Cursor moves to a large button (full width, 64px tall)
• Click ripple on button, button depresses (scale 0.95)
• Loading spinner appears (0.5s), then results animate in with staggered spring
• Result cards/text: 36px+ body text

SCENE 4 — Product Image Showcase (5s):

• Display downloaded product images LARGE (near-full width, 900px+), centered with drop shadow and rounded corners (16px)
• NO device mockup frame — product images already look polished
• Animate through 2-3 images:
• Image 1 scales in from 0.9 to 1.0 with spring, holds 1.5s
• Crossfade to Image 2, holds 1.5s
• Crossfade to Image 3, holds 1.5s
• Feature headline (56px, Inter 700) fades in above or below, updating with each transition

SCENE 5 — Feature Callouts (3s):

• Product image scales down to 40%, moves to top
• 3 feature lines animate in below, staggered by 10 frames:
• Each line: colored icon (checkmark, lightning, star) + short text (36px+)
• Lines slide in from right with spring()

SCENE 6 — Social Proof + CTA (3s):

• Everything fades out
• If social proof found: animate number counting up from 0 (e.g., "50,000+ users")
• Product URL pulses gently (scale 1.0 to 1.03), positioned above bottom safe zone
• Fade to black

Cursor Design

White circle (12px), 50% opacity trailing shadow, smooth bezier paths between click targets. Never teleport — always animate movement.

Visual Style

Use dark theme from defaults.md, but adapt accent colors to match the product's brand. If the website uses a distinctive Google Font, match it instead of Inter.

Duration

25 seconds. 6 scenes.

Output

• Remotion composition at 1080x1920, 30fps
• Launch npx remotion studio for preview

Testimonial / Social Proof Video

Create an animated testimonial video featuring real customer reviews, star animations, and social proof counters. Scrape data from a Google Business Profile.

Input

User provides a Google Business Profile / Google Maps URL (e.g., https://maps.google.com/some-business).

Workflow

Step 1: Scrape Reviews

Visit the Google Business Profile URL. Extract:

• Business name and category
• Overall star rating (e.g., 4.8)
• Total number of reviews (e.g., "2,340 reviews")
• 3 best/most compelling reviews — 5-star, with actual review text and reviewer first name
• Business photo or logo if available (save to public/)

If the page can't load Google reviews directly, use an alternative: search for the business name + "reviews" and scrape from the search results card.

Present business info and 3 selected reviews. Wait for approval before coding.

Step 2: Build the Video

Build 5 scenes (20 seconds total). Uses light theme (see defaults.md Visual Style — Light Theme).

SCENE 1 — Hook (3s):

• Clean white/light background (#f8f9fa) with subtle warm gradient (soft peach #fff7ed fading to white)
• Large gold star cluster: 3 overlapping star SVGs at different sizes/rotations, scattered in upper area, 15% opacity as decoration
• Bold text centered in safe zone, two lines:
• "What people are saying about" — Inter 700, 44px, dark #1a1a1a
• "[Business Name]" — Inter 800, 56px, gold #f59e0b
• Text enters with spring from below (translateY 40px to 0)
• Below text: overall star rating as 5 inline stars (40px, gold filled) with number ("4.8") — fades in 10 frames after text

SCENE 2 — Star Rating Reveal (3s):

• Light background (#f8f9fa)
• 5 large star SVGs (60px each) in a row, centered
• Stars fill in one by one left to right with gold (#f59e0b) using spring animation, staggered 8 frames
• If rating is not a whole number (e.g., 4.8), the last star fills proportionally (use clip-path or width mask)
• Below stars: rating number counts up from 0.0 using interpolate(), dark text #1a1a1a
• Below that: "Based on [X] reviews" fades in, #64748b, with number counting up from 0
• Subtle gold particle shimmer behind stars

SCENE 3 — Review Carousel (9s, 3 reviews x 3s each):

• Light background (#f8f9fa)
• Each review is a card taking full safe zone width:
• Top: 5 small gold stars (28px)
• Middle: review text in quotes, Inter 400, 36px, dark text #1a1a1a — max 3 lines, truncate with "..."
• Bottom: reviewer first name + "Google Review" label, Inter 400, 28px, #64748b
• Card background: white (#ffffff), subtle border (#e2e8f0), rounded corners (16px), soft shadow
• Card transitions: each card slides out left while next slides in from right, using TransitionSeries with slide transitions
• Small Google "G" logo icon (built as SVG — the 4-color G) next to "Google Review"
• Progress indicator: 3 dots below card, active dot is gold

Decorative graphics around each review card (fill empty space):

• ABOVE: large quotation mark SVG in gold at 10% opacity, 200px tall, top-left of safe zone
• BELOW (pick ONE per review, stagger entrance with card):
• Review 1: animated 5-star rating bar chart (5 horizontal bars, gold fill on light gray track, spring)
• Review 2: thumbs-up icon with spring + count-up number showing total reviews
• Review 3: map pin icon with location text, subtle pulse animation
• Decorative elements: muted colors, 30-50% opacity, gold (#f59e0b) or muted gray (#94a3b8)

SCENE 4 — Social Proof Stack (3s):

• Light background (#f8f9fa)
• 3 stat lines stagger in from bottom with spring, 10-frame delays:
• Gold star icon + "[X] star rating" — dark text #1a1a1a
• People icon + "[X]+ happy customers" (count up)
• Map pin icon + "[City, State]"
• Icons gold (#f59e0b), text dark #1a1a1a

SCENE 5 — CTA (2s):

• Light background (#f8f9fa)
• Business name in large text (Inter 800, 56px, #1a1a1a), scales in with spring, centered
• Prominent CTA button: full safe-zone width, 72px tall, rounded 16px, gold background #f59e0b, white text "Book Now" or "Call Today" at 40px
• Button enters with spring from below
• Below button: website URL or phone number, Inter 600, 36px, #64748b
• No fade to black — end on clean light background with CTA visible

Visual Style

Uses the light theme from defaults.md. Gold (#f59e0b) replaces indigo as the accent color throughout.

Duration

20 seconds. 5 scenes.

Output

• Remotion composition at 1080x1920, 30fps
• Launch npx remotion studio for preview