Remotion

Write videos as React components; render frames programmatically.

Remotion License · ★ 61.3k · 137 clips

Remotion clips137

Filter in Explore
Frame from “One-shape UI morph loop synced to music” by @twoclipping0:14
One-shape UI morph loop synced to musicby @twoclippingPromptRemotion
Frame from “AI Singularity Pop Music Video” by @anabology5:06
AI Singularity Pop Music Videoby @anabologyPromptRemotion
Frame from “UX Design Decision Animation” by @moguzbulbul0:42
UX Design Decision Animationby @moguzbulbulRemotion
Frame from “What is a Transformer, a 12-minute explainer” by @dotey12:12
What is a Transformer, a 12-minute explainerby @doteyPromptRemotion
Frame from “A Code-Rendered Film on the History of AI” by @kimmonismus3:00
A Code-Rendered Film on the History of AIby @kimmonismusPromptRemotion
Frame from “CodePilot product promotional video” by @op74180:50
CodePilot product promotional videoby @op7418Remotion
Frame from “Motion design launch video” by @gauravsbuilding0:15
Motion design launch videoby @gauravsbuildingRemotion
Frame from “SaaS Product Launch Video” by @pbteja19981:05
SaaS Product Launch Videoby @pbteja1998PromptRemotion
Frame from “@0x0funky” by @0x0funky6:34
@0x0funkyby @0x0funkyRemotion
Frame from “16:9/9:16 产品宣传片” by @aiwarts0:30
16:9/9:16 产品宣传片by @aiwartsRemotion
Frame from “A Fully Coded Launch Film for a Fictional Calendar App” by @LexnLin0:33
A Fully Coded Launch Film for a Fictional Calendar Appby @LexnLinRemotion
Frame from “One-shot animated video demo” by @shapelayer0:21
One-shot animated video demoby @shapelayerRemotion
Frame from “Promo video for the Wrapscribe app” by @shribuilds0:41
Promo video for the Wrapscribe appby @shribuildsPromptRemotion
Frame from “Self-introduction PR video in flat design” by @mmmiyama_D0:15
Self-introduction PR video in flat designby @mmmiyama_DRemotion
Frame from “Product video for Distilbook” by @ajith_io0:40
Product video for Distilbookby @ajith_ioPromptHyperFrames
Frame from “30-second flat design promo video coded with Claude” by @mmmiyama_D0:30
30-second flat design promo video coded with Claudeby @mmmiyama_DRemotion
Frame from “Motion workflow breakdown” by @rexan_wong0:11
Motion workflow breakdownby @rexan_wongHyperFrames
Frame from “Shipper AI employee product ad” by @chhddavid0:49
Shipper AI employee product adby @chhddavidRemotion
Frame from “@reg_andr ADB product film” by @reg_andr0:54
@reg_andr ADB product filmby @reg_andrRemotion
Frame from “Reddit marketing tool launch video” by @anthonyriera0:52
Reddit marketing tool launch videoby @anthonyrieraRemotion
Frame from “One-shot video outdoing a 2-month editing pipeline” by @SimonHoiberg0:15
One-shot video outdoing a 2-month editing pipelineby @SimonHoibergRemotion
Frame from “Pixel-art Paris night diorama lofi loop” by @minosdevs0:06
Pixel-art Paris night diorama lofi loopby @minosdevsPromptRemotion
Frame from “The Steep Part: The Next 50 Years of AI” by @andrewjiang4:00
The Steep Part: The Next 50 Years of AIby @andrewjiangRemotion
Frame from “AI-produced faceless YouTube video service demo” by @drecamz0:54
AI-produced faceless YouTube video service demoby @drecamzRemotion

How people build with Remotion

Works where the prompt, the code or the video is public. Videos load from the creator's own host when you press play.

Travel Route on Map with 3D landmarks

by JNYBGR · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Prompt
use remotion best practices. make a new composition and add a map and zoom out of LA while staying focused on it. once done, animate a line from LA to NY and make the camera follow it.
add another stop to the trip, this time we go to paris. animate the eiffel tower and show it in 3D!

News article headline highlight

by Remotion · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Prompt
use remotion best practices. import the following image into the project: '~/Desktop/Screenshot 2026-01-31 at 17.15.12.png' use tesseract CLI to do OCR and find the positions of the text. in remotion, make a new composition where you load the image and pad the article generously on a white full HD background. while the composition is running for 5 seconds, slowly, very subtly, zoom into it and slightly rotate the article in 3d from left to right. the overall rotation should be around 15deg for each axis. at the beginning, blur the whole composition and unblur it over 1 second. after the blur is done, evolve a highlighter from left to right using rough.js over the words "government shutdown" and "funding lapses". the image has a white background. make sure the the marker appears behind the text. when installing new dependencies, check for existing lockfiles and use the right package manager.

Product Demo for Presscut

by Shpigford · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Claude Opus 4.5); prompt and render are public, source is not.

Prompt
Create a demo video of the Presscut app/product using remotion. Use react componenents to replicate VI elements and replicate the UI of the app as closely as possible. The app has a LOT of features/ functionality, so take guidance from the marketing home page/index for what to highlight, while keeping language simple and to-thepoint. Really grill me with questions to nail down exactly how the final video should look/feel and what content should be there. The ultimate goal of this is to replicate what me, the founder, would be showing/doing with a product demo with a customer.

Cinematic Tech Intro

by tiw_ari_ayu · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Gemini (k2.5); prompt and render are public, source is not.

Prompt
Create a high-energy Remotion video component (1920x1080, 30fps) for a cinematic "CEO Introduction" featuring Jensen Huang, styled with a Cyberpunk/Tech-Corporate aesthetic. The scene should use a clean white background with a subtle radial noise texture and feature masssive, centered "JENSEN HUANG" text in the "Knewave" font (NVIDIA Green #76B900) that animates with a dramatic "pop-in" effect (scaling down from 3x to 1x). At frame 40, introduce a cutout image of Jensen on the right side with an explosive spring entrance, continuous floating motion, and occasional digital glitch distortion (skew/hue-rotate), layered above rotating dashed tech rings and falling Matrix-style data streams. Simultaneously, slide in a Glassmorphism HUD panel from the left (dark semi-transparent green with a cut-corner clip-path) that displays "CEO & Co-Founder" and bio details using a Monospace font; ensure the text slides in from the far left (-600px) for a dynamic reveal. Enhance the visual depth with a vertical green scanner line, animated corner brackets, and floating geometric particles (triangles/hexagons), using spring and interpolate for all smooth physics-based transitions.

Transparent Call-To-Action overlay

by Remotion · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Prompt
use remotion best practices. this is our youtube channel: https://www.⁠youtube.⁠com/@⁠remotion_dev. use curl scrape youtube to find the avatar and the subscriber count. multiple subscriber counts appear on the page, find the right one. make a white lower third that slides in from the bottom center. show the name, subscriber count and avatar.  display a typical fixed width black youtube subscribe button that changes from "Subscribe" to "Subscribed". use a ease-out animation and for pressing in the button and a spring animation with a slight bounce once the button is released. fade out the lower third. render it as a transparent prores video.

Rocket Launches Timeline

by crispynotfound · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with a coding agent; prompt and render are public, source is not.

Prompt
Animate every SpaceX rocket launch from 2015–2025 in chronological order. Show the launch parabolas with trajectory fading. Use an abstract, minimalist aesthetic. Give me three versions first, then I’ll pick one and refine it via feedback.

Real Estate Investing

by HarisShah2345 · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Three.js "Top 20 Games Sold" Ranking

by DilumSanjaya · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code; prompt and render are public, source is not.

Prompt
here is an empty remotion project with the default react three fiber example.
I want to create a 3D video to visualize top 20 videos games by copies of all time.Create a Remotion video that visualizes the top 20 best-selling video games as a vertical "tower", use boxes as towers with height representing the amount of copies.
remove the default example from this project and create a remotion + react three fiber example to do this visualization.
Resolution: 1920x1080
FPS:60
animate the camera from the bottom of the last rank to the top of the first rank. stop the camera on the top of each rank for a few miliseconds.
here is the game ranking data you need
# [data as a JSON string]
# More instructions: https://x.com/DilumSanjaya/status/2018367621381620142

Promotion video for VVTerm

by wiedymi · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Prompt
Make a promotion video in Apple presentation style for VVTerm. Check its website VVTerm.com for details and assets like logo. Use nerd fonts and inter. Make it around 20 seconds.

Bar + Line Chart (combined)

by samohovets · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with OpenCode (Opus 4.5); prompt and render are public, source is not.

Prompt
Create a 1920x1080 dark-themed (#1A1A2E) composition called 'BarLineChart' with a combination chart showing monthly sales data — bars for revenue ($8K, $12K, $15K, $11K, $18K, $22K for Jan-Jun) that grow upward from the baseline, overlaid with a blue (#0B84F3) line tracking conversion rate (2.1%, 2.8%, 3.2%, 2.9%, 3.8%, 4.2%) that draws progressively with a glowing effect, bars animate sequentially with slight overlap while the line follows behind, include axis labels and a pulsing dot marker at the line tip, smooth spring-based timing over 120 frames at 30fps — use remotion-best-practices skill.

Cursor Agent Skills Announcement

by edwinarbus · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Cursor; prompt and render are public, source is not.

Prompt
Create a video project announcing Agent Skills, following Cursor brand rules. 1920×1080, 60fps. Typewriter text effect at about 1 character per frame, then hold for 3 seconds after typing on every title card. Line 1 types first, then line 2.
Card 1: “Agent Skills are now available” on line 1 and “in Cursor” on line 2
Card 2: “Skills let agents discover and run” and line 2 “specialized prompts and code.”
Then play the skills.mp4 recording full-screen, framed top-aligned for first 2 seconds, then zoom in (with easing) to the top-left by about 125%. Should be continuous zoom!
Final card: “This video was made entirely in Cursor" on line 1 and "with Remotion skills.” on line 2, then hold;
End with the existing end.mp4 animation full-screen.
Render and open the file inside Cursor’s browser tool to let me see it here!
# Notes:
# 1. Uses an existing screen recording @ericzakariasson made.
# 2. Uses our existing end card animation.
# 3. Had a Cursor rule with our brand guidelines and colors.

Spinning, glitching SVG Logo turned 3D

by Remotion · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

3D Retro Pixel Font

by GogHeng · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus4.6); prompt and render are public, source is not.

Prompt
use remotion skills Create a 1080×1080 brand animation video, 8 seconds, black background.
Core effect: Pixel block text-building animation. 4 colored cursors (purple, blue, pink, indigo) fly in from off-screen, scatter to
four corners, line up on the left side, then each cursor "builds" its assigned section of pixel text — blocks light up one by one as
the cursor passes over them, like multiple people collaboratively editing code in real-time.
Text: Line 1 "SHILIU", Line 2 "VIBEKNOW"
Block style: 20px squares with 3D layered depth effect — dark purple base with concentric inset borders creating an
embossed/recessed look.
Timeline:
- 0–0.4s: First cursor enters from top-left
- 0.4–0.9s: 4 cursors scatter to different positions
- 0.9–1.6s: Cursors line up on the left side
- 1.6–5.0s: Cursors split up and build the pixel text simultaneously
- 5.0–5.8s: Subtitle "coming soon" types in at the bottom
- 5.5–8.0s: Cursors float away to the top, gently bobbing
Color variant: Red edition (replace purple block palette with red tones)

Apple-Style Device Rise Animation

by gaucho_booleano · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Strava Run visualized

by JNYBGR · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.5); prompt and render are public, source is not.

Prompt
[download GPX from strava website]
use remotion best practices. turn my run today into an animated instagram story: ~/Downloads/Afternoon_Run.gpx
show a map, the route and live metrics for my run. use font sizes that will be legible when user watches as a story

HTML-in-canvas magnifying glass

by JNYBGR · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.7 xhigh); prompt and render are public, source is not.

Prompt
use remotion best practices, especially html in canvas. make a new composition and write a simple one line text. then implement a round magnifying glass that animates from left to right. there should be slight glass refraction

The Kinetic Marketing

by tiw_ari_ayu · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Gemini (k2.5); prompt and render are public, source is not.

Prompt
A high-velocity kinetic typography promo for a modern developer tool.
Visual Style: Premium "Aurora Glassmorphism" aesthetic. Backgrounds are seamless, breathing radial gradients in Pastel Pink, Lavender, and Soft Blue. Key Elements: Dozens of 3D Floating React Logos drift through the scene with heavy depth-of-field blur. Rotating dashed "Radar Rings" and "Pulse Circles" add technical texture behind the text. Color Palette: Electric Azure Blue (#0b84f3) for primary accents against Deep Black bold typography (Poppins Black). Motion Physics: Elastic "Layout Smoothing" – new words crash in and physically push existing text aside. Transitions: Elements rotate -15° and shrink to zero to vanish. Scenes switch via massive Blue Iris Wipes and Ring Tunnels. Matches a 140 BPM fast-paced beat.

Audio Spectrum Visualizer

by samohovets · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with OpenCode (Opus 4.5); prompt and render are public, source is not.

Prompt
Create a 1920x1080 dark-themed composition called 'AudioSpectrum' featuring an audio spectrum visualizer synced to funk.mp3 from the public folder, displaying 32 vertical frequency bars that bounce and pulse reactively to the bass, mids, and highs, with a vibrant gradient from magenta to cyan across the bars, each bar having a subtle glow effect and smooth rounded tops, the bars reflecting faintly on a glossy dark surface below, centered horizontally with gentle horizontal padding, the whole visualization fading in smoothly at the start, duration matching the full audio length at 30fps — allow changing the bar count, gradient colors, bar width, and glow intensity — use remotion-best-practices skill."

Vintage screen effect (HTML-in-canvas)

by JNYBGR · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.7); prompt and render are public, source is not.

Prompt
https://www.remotion.dev/docs/remotion/html-in-canvas
make a new composition and implement a subtle CRT convex shape shader on top of a HTML element.
content: terminal and remotion themed. the command and output of "npx create-video@latest --yes --blank my-video"
should be animated.
then "claude" should be invoked and the prompt "Add a CRT effect using HTML-in-canvas " should be shown

Glitch effect (HTML-in-canvas)

by remotion · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.7, xhigh); prompt and render are public, source is not.

Prompt
use remotion html-in-canvas best practices.
create a sample composition and apply a glitch effect to it!

BMS Active Cell Balancing Animation - 8S1P Pack with Energy Flow Visualization

by pasrom · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus 4.6); prompt and render are public, source is not.

Solar System Orbit Animation

by GogHeng · AI-made

Prompt-to-video entry from Remotion's official Prompt Showcase, made with Claude Code (Opus4.6); prompt and render are public, source is not.

Dynamic 15-second motion-design showreel

by ajith_io · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

Dynamic 15-second motion-design showreel — generated with claude-opus-5.5; public prompt, source, render.

Prompt
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

UX Design Decision Animation

by moguzbulbul · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, NOASSERTION, none · AI-made

UX Design Decision Animation — generated with claude-opus-5.5; public prompt, source, render.

Prompt
I was struggling to explain my UX decisions in interviews, so I made this kind of animation with Opus 5.5

Anyone want the skill?

App Store preview video with one prompt (Claude Opus 5.5 + Remotion)

by bilaldemirerr · MIT · AI-made

App Store preview video with one prompt (Claude Opus 5.5 + Remotion) — generated with claude-opus-5.5; public prompt, source, render.

Prompt
simdi us  icin gereken her icerigi verdim, us store gorselelriin ve videosunu hazirlayabilir miins? baska eksik va rmi?

One-shape UI morph loop synced to music

by twoclipping · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

One-shape UI morph loop synced to music — generated with claude-opus-5.5; public prompt, render.

About Remotionagents, rendering, runtime
With agents
Official Agent Skills (npx skills add remotion-dev/skills) teach agents Remotion best practices; docs serve Markdown to agents (.md URLs, llms.txt) and a public Prompt Showcase collects prompts with their rendered videos.
Render path
npx remotion render (local), @remotion/renderer API, or Remotion Lambda / Cloud Run for distributed MP4 rendering.
Runtime
TypeScript/React; Node; headless Chrome + FFmpeg
Best for
product promos · data-driven/personalised video · captions & social clips · year-in-review campaigns · 3D via React Three Fiber

Worth knowing

  • 'Make videos programmatically with React' — ~61.3k stars, since 2020 source ↗
  • Free for individuals, for-profits with up to 3 employees, and non-profits; company license above that source ↗
  • Official Agent Skills (npx skills add remotion-dev/skills, ~4.8k stars); docs serve Markdown to agents (.md URLs, llms.txt) source ↗
  • Runs an official Prompt Showcase listing prompt, agent, model and rendered video source ↗
  • Local, Lambda or Cloud Run rendering; flagship data-driven app GitHub Unwrapped source ↗

For the Remotion team

Featured on 24fps

This page is free and always will be. If it helps your users, drop the badge on your showcase or README.

<a href="https://24fps.dev/tools/remotion"><img src="https://24fps.dev/badge/remotion.svg" alt="Featured on 24fps" height="28"></a>