DEV Community

RyanCwynar
RyanCwynar

Posted on • Originally published at ryancwynar.com

I Built a Programmatic Video Pipeline with Remotion (And You Should Too)

I have been automating everything I can get my hands on lately — prospecting, outreach, blog publishing, social media. But last week I hit a wall that pure text automation could not solve: video content.

Specifically, I needed animated videos for LinkedIn posts and website hero sections. The kind of polished, branded motion graphics that normally require After Effects and a few hours of manual work. I needed them generated programmatically, on demand, from code.

Enter Remotion.

What Is Remotion?

Remotion lets you write video compositions in React. You define scenes as components, use useCurrentFrame() and interpolate() for animation, and render to MP4 with a single CLI command. It is genuinely one of those tools that makes you wonder why it did not exist sooner.

The mental model shift: instead of thinking in timelines and keyframes, you think in frames and React state. If you can build a web app, you can build a video.

What I Built

Two compositions so far:

1. LinkedIn Post Cards

Animated dark/light theme cards that cycle through title, subtitle, bullet points, and author attribution. Each element fades and slides in with spring physics. Feed it a JSON object with your post content, render, upload.

The whole thing is about 80 lines of React:

const frame = useCurrentFrame();
const opacity = interpolate(frame, [startFrame, startFrame + 20], [0, 1], {
  extrapolateRight: "clamp",
});
const translateY = spring({
  frame: frame - startFrame,
  fps,
  config: { damping: 12 },
});
Enter fullscreen mode Exit fullscreen mode

That is it. Spring physics, opacity transitions, and you have professional-looking motion graphics.

2. Homepage Hero Video

A looping background video with floating particles, a circular headshot with a gradient border, and cycling keywords that fade in and out. Rendered at 1920x1080, web-optimized down to 2.2MB for a 36-second loop.

The particles are just divs with randomized positions and velocities, animated frame-by-frame. The keyword cycling uses modular arithmetic on the frame count. Nothing fancy — but the result looks polished.

The Automation Angle

Here is where it gets interesting. Since compositions are just React components that accept props, you can generate videos from data.

My render script takes command-line arguments:

./render.sh LinkedInPost --props='{"title": "Why AI Outreach Works", ...}'
Enter fullscreen mode Exit fullscreen mode

Which means a cron job can:

  1. Pull the latest blog post from my CMS
  2. Generate a LinkedIn-formatted video card
  3. Upload it
  4. Schedule the post

All without human intervention. The video becomes just another artifact in the content pipeline, same as a blog post or a tweet.

Practical Tips

A few things I learned the hard way:

Keep compositions simple. Remotion can handle complex scenes, but render times scale with complexity. My LinkedIn cards render in about 10 seconds. The hero video with particles takes closer to 2 minutes. For automated pipelines, speed matters.

Use spring() for everything. Linear interpolation looks robotic. Springs look natural. Remotion has a built-in spring function with configurable damping and stiffness. Use it.

Web-optimize aggressively. Raw Remotion output can be huge. I pipe renders through ffmpeg with -crf 28 -preset slow and usually cut file size by 80 percent with no visible quality loss.

Think in compositions, not videos. Each composition is a reusable template. I have two now. By next month I will probably have ten — testimonial cards, product demos, data visualizations. The upfront investment pays compound returns.

The Bigger Picture

Video is the last frontier of content automation. Text generation is solved. Image generation is getting there. But programmatic video — where you control every frame, every animation, every data point — is still underexplored.

Remotion bridges that gap. It is not AI-generated slop. It is deterministic, branded, pixel-perfect video that happens to be generated from code instead of a timeline editor.

If you are building any kind of content pipeline and you have not looked at Remotion yet, you are leaving leverage on the table.


I am building automated sales and content systems at byldr.co. If you want to see this stuff in action, check out the site — the hero video was made with the pipeline described above.

Top comments (0)