I Found Remotion and It Changed How I Think About Video

2026-02-18 · 7 min read

blog/development blog/react blog/video

I’ve been building things for years. Websites, apps, keyboards, drones — if it involves code or solder, I’m probably interested. But video? Video was always the thing I needed but never enjoyed making.

The workflow was always the same: write a script, generate some clips, open CapCut or DaVinci, drag things around on a timeline, fight with keyframes for 45 minutes to get a fade-in that looks right, export, realize the aspect ratio is wrong, re-export, upload. Two hours gone for a 60-second short.

Then I found Remotion. And it broke my brain in the best way.

What Even Is Remotion?

Remotion is a React framework for creating videos programmatically. That sentence sounds boring until you internalize what it actually means:

A video is a function of images over time.

You write a React component. That component receives a frame number. You use that frame number to calculate positions, opacities, scales, colours — everything. Remotion renders each frame through headless Chromium, stitches them together with FFmpeg, and hands you an MP4.

const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ opacity, backgroundColor: '#0a0a0b' }}>
      <h1>This is a video.</h1>
    </AbsoluteFill>
  );
};

That’s it. That’s a video. A React component with a frame counter. No timeline. No drag and drop. No “creative suite.” Just code.

The Moment It Clicked

I was building my portfolio site — the one you’re reading this on — and I wanted the hero section to feel alive. Not a static image. Not a Lottie animation. Something that felt like it had weight and intention.

I’d been planning to use Framer Motion for everything. Framer Motion is great — declarative, React-native, perfect for hover effects and page transitions. But I kept hitting the same wall: the animations I wanted weren’t interactions, they were compositions. They had a beginning, middle, and end. They had timing. They had sequences.

They were videos. I just didn’t want to make a video.

Then someone in a Discord linked Remotion’s demo where they generated a full video from a Claude Code prompt. 6 million views on X. I watched it and thought: “Wait. I already know how to do this. It’s just React.”

And that was the moment. Not “I need to learn a video tool.” It was “I already know this tool. It’s the one I’ve been using for years.”

What Actually Changes

1. Your portfolio isn’t static anymore

The @remotion/player package lets you embed Remotion compositions directly in a webpage. No video file. No pre-rendering. The React component plays frame-by-frame in the browser, like a perfectly looped animation.

My project showcase cards don’t have thumbnail images — they have Remotion Players that autoplay on scroll. The drone showreel isn’t an embedded YouTube video — it’s a composition with transitions, text overlays, and telemetry data rendered in real-time.

<Player
  component={DroneShowreel}
  durationInFrames={300}
  compositionWidth={1920}
  compositionHeight={1080}
  fps={30}
  autoPlay
  loop
  style={{ width: '100%' }}
/>

2. One component, three outputs

This is the part that genuinely changed my workflow. The same React component that plays on my website can also:

Render to MP4 for YouTube/Twitter: npx remotion render DroneShowreel
Export a still frame for social previews: npx remotion still DroneShowreel --frame=60
Play inline on the web page via <Player>

One component. Three outputs. Write it once, use it everywhere. Try doing that with After Effects.

3. Video becomes version-controlled

This is the thing nobody talks about. When your video is code, it lives in git. You can diff it. You can branch it. You can roll it back. You can review it in a PR.

When a client says “can you make the logo 10% bigger and change the accent colour,” you don’t reopen a project file and re-export. You change a prop and re-render.

npx remotion render Promo --props='{"accentColor":"#DC2626","logoScale":1.1}'

4. AI can write your videos

This is where things get genuinely wild. Remotion has first-class AI integration — an MCP server for documentation, 33 agent skill files for Claude Code, and LLM-friendly docs.

The workflow becomes:

Describe what you want in natural language
Claude Code writes the React/TypeScript Remotion component
Remotion Studio shows a live preview
You iterate by talking, not clicking
Render when you’re happy

I’ve built entire intro sequences, caption overlays, and project demo animations without touching the code directly. Claude writes it, I watch it in Studio, I say “make the spring bouncier,” Claude adjusts the damping constant. Done.

5. Your entire content pipeline changes

I’m building a video production pipeline that goes: Obsidian note → Claude generates script → AI generates video clips → Remotion composites everything with branded intros, captions, and audio → uploads to YouTube.

Before Remotion, the assembly step — taking raw clips and turning them into a finished video — was 2-4 hours of manual work in CapCut. Dragging clips, adding transitions, timing captions, exporting multiple aspect ratios.

Now it’s a <Series> composition:

<Series>
  <BrandedIntro seriesName="Everything Explained" color="#F97316" />
  {slides.map(slide => (
    <KenBurnsSlide
      image={slide.image}
      audio={slide.audioSegment}
      captions={slide.words}
    />
  ))}
  <Outro channelName="Everything Explained" />
</Series>

That renders 16:9 and 9:16 from the same code. Register two <Composition>s, render both. No re-exporting, no cropping, no second timeline.

What Remotion Is Not

Let me be honest about the limits, because the internet is full of hype-only takes.

Remotion is not a replacement for Framer Motion or GSAP on your website. If you need hover effects, scroll-triggered reveals, or page transitions — use Framer Motion. It’s lighter, faster, and built for browser interaction. Remotion’s <Player> is a React loop running at 30fps. Having six of them on screen simultaneously will make your MacBook sound like it’s about to take off.

Remotion is not a replacement for AI video generators. It doesn’t create photorealistic footage. Veo, Runway, Seedance — those generate the raw material. Remotion is the compositing layer that takes that raw material and makes it publishable. They’re complementary, not competing.

Remotion is not always simpler than a timeline editor. For a one-off 30-second Instagram story, CapCut is genuinely faster. Remotion’s power comes from repeatability and automation. If you’re making one video, open CapCut. If you’re making 100 videos with the same structure but different content, Remotion will save you hundreds of hours.

The Mental Model Shift

The real thing Remotion changed isn’t my tech stack. It’s how I think about video.

Before: video was a file. A thing you produce in a special application, export, and distribute. A fundamentally different medium from code.

After: video is a function. It takes inputs (text, images, audio, data) and produces frames. It’s deterministic. It’s composable. It’s testable. It’s React.

That shift — from “video is a creative tool problem” to “video is a programming problem” — unlocks everything. Suddenly the same skills I use to build web apps are the skills I use to produce content. The same CI/CD pipeline that deploys my website can render my videos. The same AI coding assistant that writes my components can write my animations.

If you write React and you’ve ever thought “I wish I could just code my videos instead of fighting with timelines” — go look at Remotion. It’s exactly what you think it is. And it’s better than you think it’ll be.

Remotion is open-source, free for individuals, and has genuinely excellent docs. remotion.dev to get started. If you want to see it in action, the hero animation on this site and the project showcase players are all Remotion compositions.