Remotion Prompts

A hand-picked collection of Remotion prompts and examples that turn an AI coding agent into a motion designer. Copy a prompt, point it at your asset, and get a real, editable video.

What you'll find here

Prompts that write video code for you

Remotion is a framework for making videos with React, and it has quietly become the favorite way to generate video programmatically. Now that AI agents can write code, you can describe a clip in words and let the agent build it. The tricky part is finding good Remotion prompts to start from — solid Remotion examples are scattered across tweets and repos and hard to copy.

So we collected them in one place. Each of these Remotion prompts has been rewritten to be clean and copy-ready, with a short note on what it does. If you'd rather generate clips with a text-to-video model, our AI video prompt library covers that side. Both approaches pair nicely with our prompt-writing guide.

The Remotion prompt library

Every prompt is copy-ready. Search the collection, grab the Remotion examples that fit your project, and start rendering.

7 prompts
  • Animated News Screenshot with OCR Highlights

    image-animation

    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 marker appears behind the text. when installing new dependencies, check for existing lockfiles and use the right package manager.

    Try It Yourself
  • Cinematic Mapbox Flythrough of the Top 10 Airports

    data-viz

    use remotion best practices. create a map animation where on each of the 10 biggest airports, you zoom in and rotate around the area by 360 degrees. then you zoom out and fly to the next one. when an airport is visible, show a lower third with the airport name and the passenger numbers. show 3d buildings. from 10th place to 1st place.

    Try It Yourself
  • Transparent YouTube Subscribe Overlay (ProRes Alpha)

    ui-demo

    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 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.

    Try It Yourself
  • Canvas-Based Video Editor Interface

    tools

    Please add a Claude Code Skill along with an interface for video animation. I want you to create an app that very simply allows us to use the Remotion skill (npx skills add remotion-dev/skills). After you create this skill you will then be able to edit a video in a canvas. So the sole purpose of the app should be a little canvas that you can edit and manipulate and change so you can make a video. Optimize this for openness and being able to edit each scene in the video after the first generation. Users can upload their own assets or generate assets they may want to use in the video generations. Figure out how to configure this app and skill so that it works great and is easy to create high quality animated videos such as launch videos. ultrathink, go.

    Try It Yourself
  • Product Demo Video Built from Your Codebase

    ui-demo

    Create a demo video of the Presscut app/product using remotion. Use react components to replicate UI 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-the-point. 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.

    Try It Yourself
  • 30-Second Promotional Brand Video (8 Scenes)

    promo

    Create a 30-second promotional video for prompts.chat using Remotion. Color theme (light): Background #ffffff, Primary #6366f1 (indigo), Accent #22c55e (green), Text #0f172a. Font: Inter (400, 600, 700, 800). Scene 1 — Opening (5s): Logo scales in with a spring animation, then the wordmark reveals left-to-right with clip-path, followed by a tagline. Scene 2 — Global Community (4s): Full-screen world map at 25% opacity with 16 pulsing activity dots over major cities, a headline, and an animated stats row. Scene 3 — Solution (2.5s): Three words appear in sequence with spring physics, each in a different brand color. Scene 4 — Built for Everyone (4s): 8 floating persona icons drift around the edges using sine/cosine motion around a centered title. Scene 5 — Prompt Types (5s): A browser-style frame with macOS traffic lights; a masonry skeleton scrolls with cubic ease-in-out while pill labels float around the edges. Scene 6 — Features (4s): 4 feature cards appear sequentially with spring animation. Scene 7 — Social Proof (4s): An animated counter ticks from 0 to 143,000+ next to a star icon, plus a badge. Scene 8 — CTA (3.5s): A pulsing radial-gradient glow behind a headline and a large gradient call-to-action button. Use spring() for bouncy scale, interpolate() for opacity/position/clip-path, Easing.inOut(Easing.cubic) for scrolling, and Math.sin()/Math.cos() for floating. Manage scenes with TransitionSeries and 0.4s transitions (fade and slide).

    Try It Yourself

Why code-based video

Why creators reach for Remotion prompts

Generative models are magic for organic footage, but Remotion prompts win whenever you need control, precision, and the ability to change one detail without starting over.

Real, editable code

Remotion prompts produce a React project you fully own. Change a color, a font, or a single frame and re-render — no regenerating the whole clip.

Deterministic output

The same prompt and the same data render the same video every time. That makes Remotion examples perfect for data-driven and repeatable videos.

Built to iterate

Because the result is code, you can branch, diff, and refine. Most Remotion prompts are highly steerable with simple follow-up instructions.

The formula

The anatomy of a great Remotion prompt

Nearly every prompt on this page follows the same five-part recipe. Learn it once and you can write your own Remotion prompts from scratch.

Context
Asset
Motion
Style
Output
01

Context

Tell the agent to use Remotion best practices so it scaffolds a clean React composition.

"use remotion best practices…"

02

Asset

Point it at the raw material — a screenshot, logo, channel URL, codebase, or map data.

"import this image…"

03

Motion

Describe the camera and timing: zoom, 3D rotation, spring bounce, scene transitions.

"slowly zoom and rotate 15deg…"

04

Style

Lock in the look — fonts, brand colors, easing curves, and the overall vibe.

"minimal, Inter font, indigo accent…"

05

Output

State the deliverable: duration, resolution, or a transparent ProRes file for compositing.

"render as transparent prores…"

Read the examples below with this formula in mind — you'll start to see the Context, Asset, Motion, Style, and Output baked into each one. That pattern is what separates throwaway one-liners from Remotion examples that render beautifully on the first try.

Animate a screenshot

News screenshot, instantly alive

One of the most popular Remotion prompts takes a flat screenshot and gives it depth: OCR finds the text, a subtle 3D rotation adds motion, and a hand-drawn highlighter sweeps across the key words. It's a great first taste of how much polish a single prompt can add.

Image animationAnimated News Screenshot with OCR Highlights
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 marker appears behind the text. when installing new dependencies, check for existing lockfiles and use the right package manager.
Try It Yourself

Data-driven motion

Cinematic maps from a sentence

Among the most impressive Remotion examples are map flythroughs: the camera dives into each location, spins around 3D buildings, and drops a lower third with live stats. Because it's code, you can swap the dataset and re-render a brand-new video in seconds.

Data vizCinematic Mapbox Flythrough of the Top 10 Airports
Prompt
use remotion best practices. create a map animation where on each of the 10 biggest airports, you zoom in and rotate around the area by 360 degrees. then you zoom out and fly to the next one. when an airport is visible, show a lower third with the airport name and the passenger numbers. show 3d buildings. from 10th place to 1st place.
Try It Yourself

Reusable overlays

Transparent call-to-action overlay

Some Remotion prompts produce assets you reuse forever. This one scrapes a channel's live stats and renders a transparent ProRes overlay you can drop on top of any video in your editor — a tiny piece of code that pays off across every upload.

UI demoTransparent YouTube Subscribe Overlay (ProRes Alpha)
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 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.
Try It Yourself

Get started

How to use these Remotion prompts

  1. 01

    Install the Remotion skill

    Run npx skills add remotion-dev/skills in your coding agent so it knows how to scaffold a composition.

  2. 02

    Copy a prompt

    Pick one of the Remotion prompts below, copy it, and swap in your own asset — a screenshot, logo, URL, or dataset.

  3. 03

    Generate & iterate

    Let the agent write the code, preview the video, then refine the motion and style until it feels right.

Want generative clips too?

Remotion prompts are perfect for code-based video. For organic, model-generated footage, explore our AI video prompts and generate your first clip in minutes.

Remotion prompts FAQ