Claude + Remotion Unlocks UNLIMITED Cheap Video Generation
Claude + Remotion skill unlocks animated explainer videos, product demo videos, editing existing videos, and data visualizations!
Spring is here!! If you’re procrastinating posting on socials, don’t miss this awesome deal. Expires TOMORROW 3/31!
Get 50% OFF your first month Blotato and 5000 credits for AI images/videos. Promo code:
“SPRING2026”
Welcome to part 2 of my Claude + Remotion video series.
Watch part 1 here to get the hang of basics.
Remotion is an existing open-source framework for making videos.
The magic here is Claude Code’s “skills” system.
Remotion ships a set of pre-built skills, i.e. instructions that teach Claude exactly how Remotion works - its APIs, animation patterns, best practices, and pitfalls. You install them once, then every prompt you paste into Claude has that full context.
Below are 5 ready-to-paste prompts.
Each one produces a different style of video.
Swap in your own topics, hit enter, and watch Claude make videos :)
Follow Along Youtube Tutorial for Best Results!
Setup
Open a terminal and run these 2 commands:
npx skills add remotion-dev/skills # install all Remotion skills
claude # open Claude Code, paste your promptWhat you need per prompt
Education Explainer — Your input: Change the topic in quotes. Claude: Claude researches, scripts, designs, animates
Product Demo + Launch — Your input: Change the URL. Claude: Claude scrapes branding, takes screenshots, rebuilds UI, creates simulated demo + real screenshot showcase in one video
Google Reviews Testimonial — Your input: Paste Google Business Profile link. Claude: Claude scrapes real reviews/rating, creates animated testimonial with star animations + review carousel
Avatar + Animated Overlays — Your input: Drop 9:16 talking-head video in
public/. Claude: Claude transcribes speech, overlays animated titles/badges/captions on top of your full-frame videoData Viz Dashboard — Your input: Drop a CSV in
public/. Claude: Claude analyzes data, picks chart types, animates
Pro Tips
Always start with “Use the Remotion best practices skill” — already included in every prompt
Visual controls — prompts 2 and 4 ask Claude to add position sliders you can tweak in Remotion Studio
Iterate — after the first render, give correction prompts (”make the bars wider”, “slow the typing to 10 chars/sec”, “change accent color to orange”)
Render — ask Claude to open “Remotion Studio” so you can preview the video
1. Education Explainer Video
Use case: Turn any topic into a full animated explainer video. Just change the topic — Claude researches it, writes the script, designs the scenes, and animates everything.
Prompt:
Use the Remotion best practices skill.
Create an educational explainer video (1080x1920, 30fps, 30 seconds) that teaches “How AI Agents Work”.
SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. Nothing important should touch the edges. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it’s unreadable on mobile.
STEP 1 — RESEARCH & SCRIPT: Before writing any code, research the topic and write a 5-scene script. Each scene needs: a one-line headline, 1-2 sentences of explanation, and a visual description of what to animate. Show me the script and wait for approval before coding.
STEP 2 — DESIGN & ANIMATE: After I approve the script, build all 5 scenes with these specs:
VISUAL STYLE:
- Background: #0a0a0a
- Primary text: white
- Accent: #6366f1 (indigo)
- Success/emphasis: #22c55e (green)
- Font: Inter (weights 400, 600, 800)
- All icons/diagrams built as SVG components (no external assets needed)
ANIMATION RULES:
- 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 should draw themselves (SVG stroke-dashoffset animation)
- Key numbers use count-up animation with interpolate() and tabular-nums
- Final scene: particle effect background (10-15 circles drifting upward)
Each scene should have a clear visual metaphor — diagrams, flowcharts, icons, or step-by-step animations. No walls of text. Think Kurzgesagt meets Fireship: dense information, beautiful motion, fast pacing.
PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.You literally just swap the topic in quotes. “How AI Agents Work” becomes “How Blockchain Works” or “How DNS Works” or “How Photosynthesis Works.”
Claude handles research, scripting, visual design, and animation. Zero assets needed - everything is generated as SVG.
2. Product Demo + Launch Video
Use case: Give Claude any product URL.
It scrapes real branding, downloads product images/screenshots FROM the website (not screenshots OF the website), and creates a full product ad with animated visuals, feature callouts, and a simulated demo. All from one URL.
Prompt:
Use the Remotion best practices skill.
Create a 25-second product demo and launch video (1080x1920, 30fps) for the product at https://your-product-url.com.
SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. Nothing important should touch the edges. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it’s unreadable on mobile.
STEP 1 — RESEARCH & ASSET DOWNLOAD: Visit the URL. Extract:
- Product name and logo (download any logo/favicon to public/)
- Brand colors (pull from the site’s CSS or visible design)
- Tagline / hero headline
- The core user flow (what does someone DO with this product?)
- 3 key features or value propositions
- Any social proof (user counts, testimonials, logos)
- IMPORTANT — PRODUCT IMAGES: Use the Claude in Chrome MCP tools to navigate to the website, read the page, and find product screenshots/images the site already displays (hero images, product UI screenshots, feature images, app previews). These are images the company designed to showcase their product — they’ll look much better than browser screenshots. Download 2-3 of the best product images and save them to public/product-1.png, product-2.png, etc. Look for <img> tags, og:image meta tags, and background images in the hero/features sections. Prefer PNG/JPG product mockups over generic stock photos.
- Only take browser screenshots as a LAST RESORT if the website has no downloadable product images.
Show me what you found (including which product images you downloaded) and a proposed 6-scene outline. Wait for approval before coding.
STEP 2 — BUILD THE VIDEO: After approval, build 6 scenes:
SCENE 1 - Hook (3s):
- Bold text in safe zone: 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 (use the downloaded logo, or render name in brand font)
- 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 the brand’s colors)
- NO device mockup frame — build the UI elements directly on the dark background, large enough to fill the safe zone width (960px+)
- Keep it simple: just the ONE core interaction (input field + button + result), not the full app UI
- Animate a cursor (small white circle with subtle trail) that:
- Moves to an input field (full width, 72px tall, 36px text) using smooth bezier motion
- Click ripple effect on the field (expanding circle that fades)
- Text types into the field character by character at 36px font size
- Cursor moves to a large “Go” / “Generate” / “Submit” 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 animations
- Result cards/text must also be large (36px+ body text)
- All cursor movement uses spring({ damping: 15 }) for natural, human-like motion
- Everything must be readable on a phone screen — if in doubt, make it bigger
SCENE 4 - Product Image Showcase (5s):
- Display the downloaded product images LARGE — these are polished marketing images, not browser screenshots, so show them big
- Each image is displayed at near-full width (900px+), centered in the frame with drop shadow and rounded corners (16px)
- NO device mockup frame needed — the product images already look polished on their own
- Animate through 2-3 product images as a sequence:
- 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
- While each image is visible, a short feature headline (56px, Inter 700) fades in above or below the image, updating with each transition
- If product images are landscape, display them in the center of the frame at full width with dark background above and below
SCENE 5 - Feature Callouts (3s):
- Product image scales down to 40% and moves to the top
- 3 feature benefit lines animate in below it, staggered by 10 frames:
- Each line has a colored icon (checkmark, lightning bolt, star) + short text (36px+) pulled from real features
- Lines slide in from right with spring()
- Feature text must be LARGE and readable — 36px minimum for each line
SCENE 6 - Social Proof + CTA (3s):
- Everything fades out
- If social proof was found, animate the real 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.
FONT: Inter (800 headlines, 400 body) unless the website uses a distinctive Google Font — match it.
Use spring() for entrances, interpolate() with clamp for counting.
PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.Paste any product URL. Claude scrapes real branding, takes real screenshots, and builds the video.
You get a simulated demo (cursor clicking through a fake version of the app) that crossfades into real screenshots scrolling in a phone mockup.
It’s a complete product ad: hook, demo, proof, CTA. Change the URL, get a new video.
3. Google Reviews Testimonial Video
Use case: Paste any business’s Google Maps/Business Profile link. Claude scrapes the real reviews, star rating, and business info, then creates an animated testimonial ad featuring real customer quotes with star animations and social proof counters.
Prompt:
Use the Remotion best practices skill.
Create a 20-second testimonial/social proof video (1080x1920, 30fps) for the business at this Google Business Profile: https://maps.google.com/your-business-link-here
SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. Nothing important should touch the edges. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it’s unreadable on mobile.
STEP 1 — SCRAPE REVIEWS: Visit the Google Business Profile URL using Playwright. Extract:
- Business name and category
- Overall star rating (e.g., 4.8)
- Total number of reviews (e.g., “2,340 reviews”)
- The 3 best/most compelling reviews (5-star, with actual review text and reviewer first name)
- Business photo or logo if available (screenshot it to public/)
If Playwright can’t load Google reviews directly, use an alternative: search for the business name + “reviews” and scrape from the search results card, or use the Google Maps page.
Show me the business info and 3 selected reviews. Wait for approval before coding.
STEP 2 — BUILD THE VIDEO: After approval, build 5 scenes:
SCENE 1 - Hook (3s):
- Clean white/light background (#f8f9fa) with a subtle warm gradient (soft peach #fff7ed fading to white)
- Large gold star cluster: 3 overlapping star SVGs at different sizes and rotations, scattered in the upper area, faded to 15% opacity as a decorative background element
- Bold text centered in safe zone, two lines:
- Line 1: “What people are saying about” — Inter 700, 44px, dark text #1a1a1a
- Line 2: “[Business Name]” — Inter 800, 56px, gold #f59e0b
- Text enters with spring from below (translateY 40px to 0)
- Below the text: the overall star rating as 5 inline stars (40px, gold filled) with the number next to them (e.g., “4.8”) — fades in 10 frames after the text
SCENE 2 - Star Rating Reveal (3s):
- Same light background (#f8f9fa)
- 5 large star SVGs (60px each) in a row, centered
- Stars fill in one by one from left to right with gold (#f59e0b) using spring animation, staggered by 8 frames
- If rating is 4.8, the 5th star fills only 80% (use clip-path or width mask)
- Below the stars: the rating number counts up from 0.0 to the actual rating using interpolate() with 1 decimal place, dark text #1a1a1a
- Below that: “Based on [X] reviews” fades in, #64748b, with the number counting up from 0
- Subtle gold particle shimmer behind the stars
SCENE 3 - Review Carousel (9s, 3 reviews x 3s each):
- Same light background (#f8f9fa)
- Each review is a card that takes the full safe zone width:
- Top: 5 small gold stars (28px) in a row
- Middle: the review text in quotes, Inter 400, 36px, dark text #1a1a1a — max 3 lines, truncate with “...” if longer
- Bottom: reviewer first name + “Google Review” label, Inter 400, 28px, #64748b
- Card background: white (#ffffff) with subtle border (#e2e8f0), rounded corners (16px), soft shadow (0 4px 20px rgba(0,0,0,0.08))
- Card transitions: each card slides out to the left while the next slides in from the right, using TransitionSeries with slide transitions
- Add a small Google “G” logo icon (built as SVG — the 4-color G) next to “Google Review” for authenticity
- A thin progress indicator below the card shows which review we’re on (3 dots, active dot is gold)
DECORATIVE GRAPHICS AROUND EACH REVIEW (fill the empty space above and below the card):
- ABOVE the review card: large quotation mark SVG in gold at 10% opacity, 200px tall, positioned top-left of safe zone. Fades in with the card.
- BELOW the review card: an animated graphic relevant to the review content. Pick ONE per review:
- Review 1: animated 5-star rating bar chart showing the business’s rating distribution (5 horizontal bars, gold fill on light gray #f1f5f9 track, spring animation)
- Review 2: a thumbs-up icon that scales in with spring + a count-up number showing total reviews
- Review 3: a simple map pin icon with the business location text, with a subtle pulse animation
- These decorative elements enter with the card and exit with it
- Keep them subtle (muted colors, 30-50% opacity) so they don’t compete with the review text
- All decorative icons/graphics use gold (#f59e0b) or muted gray (#94a3b8)
SCENE 4 - Social Proof Stack (3s):
- Same light background (#f8f9fa)
- 3 stat lines stagger in from the bottom with spring, 10-frame delays:
- Line 1: gold star icon + “[X] star rating” — dark text #1a1a1a
- Line 2: people icon + “[X]+ happy customers” (count up animation)
- Line 3: map pin icon + “[City, State]” location
- Each line has an icon (SVG) on the left and text on the right
- Icons are gold (#f59e0b), text is dark #1a1a1a
SCENE 5 - CTA (2s):
- Same light background (#f8f9fa)
- Business name in large text (Inter 800, 56px, #1a1a1a), scales in with spring, centered in safe zone
- Below: a prominent CTA button (full safe-zone width, 72px tall, rounded corners 16px, gold background #f59e0b, white text “Book Now” or “Call Today” at 40px)
- Button enters with spring from below
- Below the button: the business’s website URL or phone number in Inter 600, 36px, #64748b — generate a plausible URL based on the business name (e.g., “www.flplumber.com” or “(555) 123-4567”)
- Positioned above bottom safe zone
- No fade to black — end on the clean light background with CTA visible
COLORS: Light theme throughout. Background #f8f9fa on all scenes. Card backgrounds white #ffffff. Primary text dark #1a1a1a. Secondary text #64748b. Accent gold #f59e0b for stars, highlights, and CTA button. Card borders #e2e8f0.
FONT: Inter (weights 400, 600, 700, 800)
Use spring() for all entrances. Use interpolate() with clamp for counting animations.
PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.Paste any business’s Google Maps link. Claude scrapes the real star rating, review count, and actual customer reviews, then creates an animated testimonial video with star-fill animations, review cards sliding through a carousel, and social proof counters — all using real data.
Works for restaurants, agencies, dentists, salons, any local business. This is the kind of video businesses pay $200-500 for on Fiverr. Change the link, get a new video.
4. Avatar Video with Animated Overlays
Use case: Drop in a 9:16 talking-head video. Claude transcribes what you’re saying, then overlays animated titles, topic graphics, captions, and progress indicators on top of the video — synced to your speech. Your original video stays full-frame, untouched.
Prompt:
Use the Remotion best practices skill.
I’ve placed my talking-head video in public/avatar.mp4. This is a 9:16 vertical video (1080x1920) of me talking to camera — a selfie-style shot where my face is in the lower 60% of the frame, with open space above my head.
Create a Remotion composition (1080x1920, 30fps) that plays this video FULL FRAME as the background layer, then overlays animated graphics on top — specifically in the open space above my head (roughly the top 35-40% of the frame). The video itself is never cropped, split, or resized. It plays edge-to-edge at its original 1080x1920 resolution.
SAFE ZONE: All overlay text and graphics must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and at least 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it’s unreadable on mobile.
STEP 1 — TRANSCRIBE & PLAN: Use Whisper to transcribe public/avatar.mp4. Analyze the transcript to identify:
- The 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 to display in the top portion of the frame (above my head). Examples:
- Topic title with a large step number (e.g., “01” faded in background, “Elements of AI” as headline)
- Keyword pill/badge that highlights the current topic
- Simple animated icon or diagram illustrating the concept
- Progress bar or step indicator showing where we are in the video
- Animated caption/quote pulling a key phrase from what I’m saying
Show me the transcript segments and proposed overlay for each. 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” }}
- This is the background. It plays from frame 0 for the full duration.
- Audio from this video is the composition’s audio track (me speaking)
- Do NOT crop, resize, split, or put this in a panel. It IS the full frame.
OVERLAY LAYER — ANIMATED GRAPHICS (positioned in top ~35% of frame, above my head):
- Use AbsoluteFill on top of the video layer
- All graphics positioned in the top portion of the frame (y: 150px to ~700px) — this is the open space above my head
- Add a subtle dark gradient overlay ONLY in the top 40% of the frame (transparent at bottom, rgba(0,0,0,0.6) at top) so white text is readable against any background
For each topic segment, display an overlay timed to the transcript:
OVERLAY STYLE (like the reference image):
- Large faded step number in background (”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 the badge — thin line that fills to show progress through current segment, accent color #22c55e
- Each overlay enters with spring({ damping: 200 }) at its segment’s start timestamp
- Previous overlay fades out (opacity 0 over 10 frames) as the new one enters
- Use Sequence components with from={Math.round(timestamp * fps)} to sync to speech
OPTIONAL BOTTOM OVERLAY — CAPTIONS:
- If you can extract word-level timestamps from Whisper, add animated captions in the lower portion of the frame (above bottom safe zone, around y: 1600-1700px)
- Style: bold white text, 36px, with a subtle text shadow for readability
- Highlight the current word in accent color (#6366f1)
COLORS: Accent #6366f1 (indigo), secondary #22c55e (green), text white
FONT: Inter (weights 400, 600, 700, 800)
PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.Why it’s mindblowing: Drop in any selfie talking-head video. Claude transcribes your speech, then layers animated titles, step numbers, keyword badges, progress bars, and captions on top of your original video — all synced to what you’re actually saying. Your video stays full-frame and untouched. It’s like having a motion graphics editor watch your video and add overlays in real time.
5. Data Visualization Infographic
Use case: Give Claude a CSV file or paste raw data. It designs and animates a full dashboard with charts, KPIs, and trend indicators — no design skills needed.
Prompt:
Use the Remotion best practices skill.
I’ve placed a data file at public/data.csv. Create an animated data dashboard video (1080x1920, 30fps, 15 seconds) that visualizes this data.
SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. Nothing important should touch the edges. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it’s unreadable on mobile.
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. Show me the proposed dashboard layout. Wait for approval before coding.
STEP 2 — ANIMATE:
LAYOUT: Vertical stack of 4 panels with 30px padding between. Top margin at 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 appropriate suffix (%, $, k, M)
- Subtitle describing the metric in Inter 400, 20px, #94a3b8
- Trend indicator: colored arrow (green ▲ or red ▼) with YoY change, slides in after count finishes
- Glass-morphism card background (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 the 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 the line reaches them
- Gradient fill below the line (color to transparent) reveals with the draw
- Axis labels from the CSV data
- Line color: #22c55e
- Entrance: starts at frame 70
GLOBAL:
- Dashboard title (from your 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
Use spring() for entrances, interpolate() with clamp for counts and line drawing. Create reusable CountUp and AnimatedBar components.
PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.Drop any CSV into the public folder. Claude reads the data, picks the best visualization for each chart type, and animates a full dashboard with real numbers.
Swap the CSV, get a completely different video.
Works for quarterly reports, survey results, API analytics, anything with numbers.
P.S. Need More Help? 👋
1/ Free AI courses
2/ Free AI prompts
3/ Free AI automations
4/ Free AI vibe coding
5/ Ask me anything @ Friday livestream
6/ Free private community for Women Building AI
7/ I built Blotato to grow 1M+ followers in 1 year
Thank you so much for your generosity in sharing these tips Sabrina.
Are you using remotion with notebooklm?