I Replaced After Effects With 200 Lines of React

I needed a hero video for my homepage. The old me would have opened After Effects, spent four hours tweaking keyframes, exported at the wrong resolution, and done it all again. Instead, I wrote a React component and rendered a production-ready video in under a minute.

The tool is called Remotion, and it has completely changed how I think about video content.

Why Programmatic Video?

I build AI automation tools for local businesses. My website needs to look sharp, but I am a solo founder — I do not have a design team or a video budget. What I do have is the ability to write code.

The insight: video is just frames rendered over time. React already knows how to render UI. What if you could write a video the same way you write a web page?

That is exactly what Remotion does. You write React components, use hooks like useCurrentFrame() and interpolate() for animation, and render to MP4. No timeline editors, no export settings dialogs, no creative suite subscriptions.

What I Built

Two compositions in one afternoon:

1. Homepage Hero Video — A dark-themed animated banner with floating particles, a circular headshot, and cycling keywords that fade in and out. Think "Software Engineer" morphing into "AI Builder" morphing into "Founder." The whole thing runs 36 seconds, loops seamlessly, and weighs 2.2MB after web optimization.

2. LinkedIn Post Cards — Animated text cards that transition from title to subtitle to bullet points to author credit. Dark and light variants. Perfect for turning a text post into a short video clip that stops the scroll.

The hero video is live on my site right now. The LinkedIn cards are ready for whenever I want to spice up a post.

The Code Is Embarrassingly Simple

Here is the core of the particle animation:

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
const y = interpolate(frame, [0, 900], [startY, startY - 200], {
  extrapolateRight: "clamp",
});

That is it. Three lines give you a particle that fades in and drifts upward. Multiply by 50 particles with randomized starting positions and you have a background effect that would take an hour to build in After Effects.

The keyword cycling uses frame math:

const keywordIndex = Math.floor(frame / framesPerKeyword) % keywords.length;
const progress = (frame % framesPerKeyword) / framesPerKeyword;
const opacity = progress < 0.1 ? progress * 10 
  : progress > 0.9 ? (1 - progress) * 10 
  : 1;

No animation library. No state management. Just math and React.

Rendering

Remotion renders using headless Chromium under the hood. You get frame-perfect output at whatever resolution you want:

npx remotion render HomepageHero out/hero.mp4 \
  --width=1920 --height=1080 --fps=30

Render time on my VPS: about 45 seconds for a 36-second video. Then I run it through ffmpeg for web optimization — trim the bitrate, add faststart for streaming — and the final file is small enough to serve directly without a CDN.

Why This Matters for Solo Builders

Three reasons:

1. Videos are now versionable. My hero video lives in a Git repo. I can change the headline, swap the color scheme, or add a new keyword by editing a JSON config and re-rendering. Try doing that with a Premiere Pro project file.

2. Batch generation becomes trivial. Need 50 personalized video intros for an outreach campaign? Write a loop. Each prospect gets a video with their company name and a custom message. The marginal cost of one more video is essentially zero.

3. AI can generate videos. This is the big one. My AI agent already writes blog posts and finds sales prospects. Now it can also generate video content. Give it a topic, let it write the copy, render the Remotion composition, and post it — all without human intervention.

What Is Next

I am building templates for common use cases: testimonial highlight reels, product demo walkthroughs, and social media clips. The goal is to have my AI agent produce one piece of video content per day alongside the blog posts and LinkedIn drafts it already creates.

The tools for solo founders keep getting better. You do not need a production team. You do not need expensive software. You need React, a good idea, and the willingness to treat creative work as an engineering problem.

Remotion is open source. The docs are solid. If you can build a website, you can make a video. Start there.