Make videos with code, not a timeline. Ten things to build, the prompts to build them, and a step-by-step setup.
Remotion is not a video editor.
It's a framework that lets you generate videos using code. You describe what you want, an AI agent writes the React components, and Remotion renders a real MP4 — frame by frame, exactly the way you specified.
This means two things:
This guide assumes zero coding experience. If you can copy-paste a prompt and describe what you want, you can do everything in this guide.
There are three pieces talking to each other:
public/. Anything you want Remotion to use goes here.src/. This is where the React components describing your video live. You don't write this. Claude Code does.localhost:3000. Plays your video, lets you scrub frame-by-frame, reloads instantly every time Claude edits a file. Your control room.What you need installed:
Create your first project:
Open Claude Code. Paste this:
Set up a new Remotion video project called "my-videos" using the Hello World template, with TailwindCSS and the Remotion agent skills enabled. Then open Remotion Studio so I can preview.Claude Code will scaffold the project, install dependencies (~2 minutes), and open Remotion Studio at localhost:3000 in your browser. You'll see a default animated demo. That's your starting point.
public/ folder. Code → src/ folder (handled for you). If you put a video in src/ by mistake, Remotion won't find it. This is the single most common beginner mistake.Each idea below includes what it is, who it's for, and a starter prompt you can copy directly into Claude Code. Mix and match — most ideas combine.
Pick one that excites you. Build that one first. The next nine will feel easy after.
30–60 second educational videos where text, diagrams, icons, and visuals animate in sync with a script or voiceover. Think Kurzgesagt-style or a polished LinkedIn carousel come to life.
Build a 45-second vertical explainer (1080x1920, 30fps) on the topic [YOUR TOPIC]. Use animated text reveals, simple icon-style illustrations, and a clean modern aesthetic. Brand colors: [YOUR COLORS]. Font: Inter for body, Anton for emphasis. Add subtle background motion.Vertical clips that take an audio file plus transcript and turn it into a branded reel with animated captions, waveform visualization, episode artwork, and guest name. Build the template once, generate every future clip from the same template.
Build a 60-second vertical audiogram (1080x1920). Background: my brand color [HEX]. Add animated waveform reactive to public/audio.mp3. Word-by-word captions from public/transcript.json. Episode title at top, guest name and headshot at bottom. Logo bottom-right.Take a video you've already edited (in CapCut, Descript, anywhere) and add scroll-stopping animated captions in your brand style — word-by-word highlights, oversized emphasis words, positioned smartly around the speaker.
Build a composition (1080x1920) that plays public/clip.mp4 full-frame, with word-by-word captions from public/transcript.json. Anchor captions in Inter 48px white at the bottom. Emphasis words (proper nouns, 7+ letter words) in Anton 96px in my brand color, popping in around the frame avoiding the speaker's face.Drop in a CSV or paste numbers, get an animated dashboard video with charts, KPI counters, trend indicators, and conclusions. Bar charts race, numbers count up, pie slices rotate in. Looks like a Bloomberg explainer.
Build a 20-second vertical data viz (1080x1920) from public/data.csv. Animate the top 5 categories as a bar chart race. Add a counter showing the total. Brand colors [HEX]. Title at top: "[YOUR TITLE]". End on the winning category with a checkmark animation.Punchy 15–30 second hype videos for a new product, episode, course launch, or event. Big text claims, animated product mockups, countdown timers, CTA buttons. Designed for the algorithm.
Build a 20-second vertical launch video (1080x1920) for [PRODUCT NAME]. Hook in the first 1.5 seconds: bold claim text "[YOUR CLAIM]". Then 3 benefit cards animating in. End on a CTA: "[YOUR CTA]" with launch date. Brand colors [HEX]. Make it feel premium.Take a paste of a review, a star rating, or a customer quote and turn it into a video that looks like Apple made it. Star fill animations, quote cards sliding in, review carousel. Pulls real data from sources like Google Maps or Trustpilot.
Build a 15-second vertical testimonial video (1080x1920) using the reviews in public/reviews.json. Animate 5 stars filling in, then 3 review cards sliding through with reviewer name and star count. End on overall rating and review count counter. Brand colors [HEX].Step-by-step instructional videos with animated numbered steps, callout boxes pointing at things, progress bars, and clean transitions between steps. Pairs beautifully with screen recordings.
Build a vertical tutorial video (1080x1920) for the topic "[YOUR TUTORIAL]". Show 5 numbered steps, each ~6 seconds. Each step: large number on left, step title on right, brief description below, progress bar at top. Use screen-recording placeholders from public/step1.mp4 through step5.mp4.Turn a written article into a video. Drop the text in, get an animated summary with bullet points appearing, key quotes pulled out as cards, and headline animations. One blog post becomes a week of social content.
Read public/article.md and build a 45-second vertical reel summarizing the 5 key points. Animated headline at start. Each point appears as a card with icon and one-sentence summary. End on a CTA to read the full piece. Modern editorial aesthetic. Brand colors [HEX].Yes, you can make personal stuff too. Animated birthday cards, anniversary videos, baby announcements, save-the-dates. With Remotion you can even make 50 versions personalized for 50 different people, automatically.
Build a 15-second vertical birthday video (1080x1920) for [NAME]. Cake animation, confetti particles, big "HAPPY BIRTHDAY [NAME]" text reveal, three photos from public/photos/ flying in. End on a heartfelt message: "[YOUR MESSAGE]". Warm pastel colors.Build one template, then generate 50 (or 500) variations with one command by changing a JSON file. Different products, different recipients, different markets — all rendered automatically. This is where Remotion stops being a tool and starts being a business.
Build a video template that takes a JSON file at public/items.json (array of objects with name, image, price, tagline). Render one 15-second vertical video per item, each with the item's image, name animation, price reveal, and tagline. Save each as public/out/[name].mp4.Whichever idea you pick, the workflow is the same.
public/localhost:3000 in your browser. As Claude Code writes the code, Studio hot-reloads. You'll see your video appear within a couple of minutes.The biggest unlock isn't the first render — it's the tweaks. Here's the exact language that works.
The intro is too fast — slow the title animation to 1.5 seconds.
Hold the final frame for 2 extra seconds before fading.Move the text down 60px. It's too close to the top safe zone.
The logo should be bottom-right, 40px from each edge.The animation feels stiff — soften the spring (damping 12, mass 0.7).
Make the emphasis words 20% bigger and add a subtle glow.Remove the third bullet point. Add one that says "[NEW TEXT]".
Swap the colors — make the background dark and the text white.When the preview looks right, paste:
Render the composition to MP4 at maximum quality. Save to ~/Desktop/final.mp4.Render time is roughly 0.5–2x the clip length depending on your machine. A 60-second video takes 1–3 minutes on a modern Mac.
Before you post:
public/, not src/Each idea in this guide stands on its own. The real value comes from stacking them.
Make it anyway. The second will be 10x better in half the time. The tenth will look like a motion designer made it. Get the first one out.
Pick one idea from the list. Today. Build it. Post the result and tag @RealMissAI — I'll repost the ones that genuinely move me.
Go build.
← Back to vault