Making videos with code: a plain-English guide for creators

Making videos with code means you describe what should appear on every frame in a text file, and a program turns that description into a real video file. Instead of dragging clips on a timeline, you write (or ask an AI to write) instructions like "show this title from second 1 to second 4, fade it in, use this font". Tools such as Remotion, HyperFrames, FFmpeg and Manim do the drawing and encoding. The payoff is precise timing, results you can repeat exactly, and brand rules you set once.

The idea in one picture: a flipbook

A video is a fast flipbook: dozens of still images shown every second. A timeline editor lets you arrange those images by hand. Code lets you write a rule for them.

Remotion's own docs put it neatly: you get a frame number and a blank canvas, and you decide what to draw on each frame. If the frame number changes the picture a little each time, you get animation.

So "frame 0 to frame 20: title goes from invisible to visible" is not a drag of a keyframe. It is one line of logic, and it will behave the same way every single time.

What "rendering" means

Rendering is the step where the computer actually draws every frame and packs the frames into a video file like an MP4. Think of it as printing the flipbook.

For browser-based tools this happens in a headless browser, which is a web browser running invisibly without a window. Remotion uses one to render a sequence of images and work out the audio mix. HyperFrames seeks each frame in headless Chrome and encodes the result with FFmpeg.

That is why rendering takes time. A 30-second Reel at 30 frames per second is 900 frames, and each one is drawn separately. As OpenReplay notes, render time grows with the number of frames and how complex each frame is.

The four tools you will hear about

Remotion

Remotion lets you build videos from React components, the same building blocks used for many websites. Each video is a "composition" with a width, height, frames per second and duration, for example 1080x1920 for a vertical video. Its license FAQ says individuals and organizations of up to 3 people can use it for free, including commercially; organizations with 4 or more people need a company license.

HyperFrames

HyperFrames is an open-source framework from HeyGen that turns HTML, CSS, media and animations into deterministic MP4 videos. "Deterministic" means the same input always produces the same video. You mark when each element starts and how long it lasts with simple attributes in the HTML. It needs Node.js 22 or newer plus FFmpeg, and HeyGen says it uses it in production.

FFmpeg

FFmpeg describes its main tool as a universal media converter. Almost every video pipeline uses it somewhere. A single line like ffmpeg -ss 00:01:00 -i input.mp4 -t 30 -c copy clip.mp4 cuts a 30-second clip starting at the one-minute mark without re-encoding. It is not a design tool; it is the engine that cuts, joins and converts.

Manim

Manim started as the tool Grant Sanderson built for his 3Blue1Brown math videos, and the community edition is now a Python framework for explanatory animations. If you have seen a formula smoothly morph into a graph, that is Manim territory. For Reels it is a niche choice, great for educators who explain with diagrams.

What the code actually looks like

Here is a tiny Remotion component that fades in a headline over the first 20 frames, then keeps it fully visible. It uses Remotion's interpolate function, which maps one range of numbers onto another.

import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const Title = () => {
  const frame = useCurrentFrame();
  // frames 0 to 20 become opacity 0 to 1, then it stays at 1
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
      <h1 style={{fontSize: 120, opacity}}>Make Reels. Not edits.</h1>
    </AbsoluteFill>
  );
};

Read it like a sentence: "take the current frame number; between frame 0 and frame 20 turn it into an opacity from 0 to 1; never go past those limits; show the headline with that opacity." Change 20 to 10 and the fade is twice as fast. That is the whole appeal.

Why creators and brands care

• Precision. A caption can land on the exact frame a word is spoken. No nudging clips by eye.
• Repeatability. Render the same file next month and you get the same result. Fix one value and every future video follows.
• On-brand by default. Fonts, colors, margins and timing live in one place. A new video cannot "forget" your brand.
• Variations at scale. Swap the text, the language or the data and render ten versions from one template.
• Edits are readable. On a project edited with Claude Code, a member of the Claude Code team noted that keeping the edit as text made it readable, easy to compare and easy to re-render.

Effects like these word-timed captions are a classic job for code. We break down several popular ones in How Reels effects work in code.

How AI assistants now write the code for you

The big change in 2025 and 2026 is that you no longer have to write this code yourself. AI coding assistants can do it, and video tools now ship "skills" for them.

A skill is a folder of instructions and scripts that teaches an AI agent how to do a specific job well. Anthropic introduced Agent Skills in October 2025 and later published them as an open standard, so other tools can use them too.

• Remotion publishes official Agent Skills for assistants like Claude Code, Codex and Cursor, covering animation, captions and rendering.
• HyperFrames ships skills that it says work with Claude Code, Codex, Cursor, Gemini CLI and other agents.

In practice you describe the video ("a 15-second vertical intro, my logo, three bullet points, brand colors") and the assistant writes the files, starts a preview and renders when you approve. We walk through a realistic version of this in Claude Code for video editing.

The honest limits

1. Setup is still developer-shaped. You install Node.js, run commands in a terminal and keep a preview server running.
2. Generated code makes predictable mistakes. OpenReplay lists animations that all start at frame 0, durations that cut the video short and linear motion that feels mechanical.
3. Preview is not the final file. Fonts or media that load in the preview can fail at render time, so always watch the exported video.
4. Taste is not in the code. Code makes a decision exact; it does not make it good. Someone still has to choose the font, the pace and what to cut.

That last point is why we built Reel Maker as a directed studio: the code-level precision stays under the hood, and a designer has already made the taste decisions in each look. You direct in plain words instead of reading components. If you are curious, see what Reel Maker is.

Want to follow how we turn code-level precision into a few plain-language steps? Join the waitlist or hop into the Telegram community for early access news and founding-member offers.