Opus 5.5 Didn't Generate a Video—It Wrote 750 Frames of Code

There's a post on Twitter with a wildly exaggerated title: HOLY F*CK, animation design studio in 18 repos. The author, @e1genqq, listed 18 free open-source repositories, from Remotion to Three.js, covering scenes, timelines, vectors, particles, and export.

The list itself isn't rare. Search GitHub for animation and you'll find far more repos. What's worth looking at is what these 18 repositories were combined into.

First, a counterintuitive point: in these projects, Claude Opus 5.5 didn't directly generate video. It wrote code. The code draws frame by frame, the browser renders, and FFmpeg encodes.

Why this matters starts with one function.

seek(t): Letting Animation Jump to Any Second

A 25-second video at 30 frames per second is 750 frames total. The time corresponding to frame f is:

t = f / 30

The renderer tells the animation: at time t, draw your state.

The key is that the code must be able to draw frame 600 directly, without first rendering frames 0 through 599. That means: no dependence on the previous frame, no uncontrolled randomness, no timer-driven CSS transitions, and no state of "what it is now because of what happened before."

Every visible property must be calculated from the requested timestamp.

A minimal example:

window.seek = function(t) {
  ctx.fillStyle = "#F7F8FA";
  ctx.fillRect(0, 0, 1080, 1920);

  const progress = ease((t - 3) / 2);

  ctx.fillStyle = "#2563EB";
  ctx.fillRect(96, 510, 888 * progress, 26);
};

At seek(3), the progress bar is empty; at seek(4), half; at seek(5), full. Call it twice at the same timestamp, and the drawn state is exactly the same.

This is the dividing line between "programmable animation" and "generative video." The former can be re-rendered by changing one time parameter; the latter may require rerunning the whole segment to change a single word.

18 Repositories, in Four Categories

The list in the original post can be broken down by responsibility.

Video frameworks. Remotion renders video with React components and supports parameterization, so different data can be fed into the same composition. Motion Canvas writes animations with TypeScript generators, includes live preview, and is suitable for explainer-style vector animation.

Animation libraries. Motion handles layout transitions, Anime.js manages timelines and staggering, Ola does smooth interpolation, Shifty handles tweens and easing, TweenJS handles property sequences, and Proton is a particle emitter.

2D and Canvas. Two.js builds vector scenes, Konva creates interactive Canvas animation, Lottie Web plays vector animations, and gifenc encodes GIFs.

3D and engines. Three.js, Babylon.js, LUME, Godot, Blender. Manim is in a category of its own: mathematical animation.

A commenter said that Remotion Skills plus Konva is a real animation studio. @e1genqq replied: "and Three.js."

The most practical item on the list may be the Agent Skills officially provided by Remotion. The install command is short:

npx skills add remotion-dev/skills

After installation, agents like Claude Code get best practices for Remotion projects, including how to write compositions, how to do animation, subtitles, rendering, and SaaS architecture. No need to explain the framework from scratch every time.

The Six Components of a Production System

A single good-looking video and a production system are two different things. The original article breaks the system into six parts:

Brief Compiler, which turns client information into structured project data. Scene Engine, which turns data into animation instructions. Renderer, which outputs frames by timestamp. Quality Controller, which finds problems before delivery. Variant Generator, which generates different hooks, aspect ratios, and CTAs. Delivery System, which packages and delivers.

One detail deserves separate mention: brand data and animation code should be separated.

The project file looks like this:

{
  "project": "nova-launch",
  "brand": { "primary": "#2563EB", "font": "Inter" },
  "scenes": [
    { "id": "hook", "start": 0, "end": 3, "type": "kinetic-title" },
    { "id": "product", "start": 3, "end": 9, "type": "interface-reveal" }
  ],
  "variants": { "hooks": 3, "formats": ["9:16", "1:1", "16:9"], "ctas": 2 }
}

Change the text, brand colors, or CTA without rewriting the animation engine. This is the prerequisite for batch production.

There's another check that's easy to skip: validation before rendering. Are assets present, can fonts load, will CTA text overflow the component, has the product claim been confirmed by the client. The system should reject bad input rather than generate a beautiful video with incorrect data.

Four Details That Make Motion Design Feel Expensive

A renderer that runs doesn't mean the motion design looks good. Most failed AI animations have problems with pacing and composition, not the number of effects.

First, closed-form springs. Ordinary frame-by-frame spring simulation depends on the previous frame and cannot jump directly to an arbitrary time. Use a closed-form solution, treating each target change as an independent spring response and summing them:

value(t) = initial + Σ(targetChange × springResponse(t - changeTime))

It can be calculated at any time without simulating from the beginning.

Second, move different edges separately. For a moving tab indicator, use slightly different spring parameters for the leading and trailing edges. The leading edge moves first, the trailing edge follows, briefly stretching in the middle before settling. It looks more human-made than translating the whole rectangle at a constant speed.

Third, separate the container and the text. When a button expands into a card, the container starts moving immediately, but the new text doesn't have to appear at the same time. Wait until there's enough space before bringing in the text; remove the old label before switching. Many AI-generated UI animations look unfinished because the text is already layered on before the container has arrived.

Fourth, put sound on the timeline. Don't add music after rendering. First analyze the beat and peaks of the audio track, and attach button clicks, chart completions, transitions, and logo appearances to the corresponding timestamps. If there's no audio track, use licensed music or have the model generate it. A commenter mentioned that Opus 5.5 isn't bad at music either. Sound should be checked as carefully as visuals.

QA: Five Rounds, Don't Skip

The original article is very practical here. The model can write code and can look at rendered images. Both capabilities should be used.

Round one, storyboard. Generate a few representative frames per scene and check whether the narrative is coherent.

Round two, timing. Generate frames before, during, and after transitions, and check for overlapping text, sudden motion changes, disappearing elements, and jumps that shouldn't be there.

Round three, phone size. Shrink preview frames to the actual viewing size on social media. A design that looks good at 1080 pixels may be completely unreadable when shrunk to a phone screen.

Round four, brand and facts. Compare against the logo, fonts, colors, screenshots, and product claims confirmed by the client.

Round five, full video and audio. Check the encoded file, audio-visual sync, duration, and aspect ratio.

Contact sheet command:

ffmpeg -i output.mp4 -vf "fps=1,scale=270:-1,tile=5x5" -frames:v 1 contact.png

A 25-second video produces one 5x5 overview. But fixed intervals aren't enough; sample separately before and after transitions. A broken transition may fall exactly between two contact sheets.

The original article states one rule very plainly: don't trust an agent that hasn't looked at the rendered output when it says "the animation looks good." Require it to submit an inspection report explaining which timestamps it looked at, what problems it found, what it changed, and what concerns remain. Only deliver after human confirmation.

One Video Is a Portfolio Piece; the Engine Is the Asset

In the commercialization section, the author suggests not selling tools but selling finished products. A product launch motion pack: one product, one narrative, three opening hooks, three aspect ratios, two CTAs, plus the finished MP4, cover frames, and an agreed number of revision rounds.

Using his hypothetical numbers, one $750 launch package, two of them is $1,500 in gross revenue. Before tax, and without deducting software, compute, audio licensing, sales time, and revision costs. These are illustrative numbers, not market prices.

The metric worth tracking isn't how many MP4s the machine can export; it's how much labor it takes to produce a campaign the client is willing to approve. Time for the first design, time for each additional variant, rendering and API costs, revision requests, delivery errors, and repeat purchases.

There's a counterexample worth including. Creator @mablesjoseph made a 45-second hand-drawn animation short in watercolor style, and according to their own account used 163 model calls and several hours. The result is exquisite, but it clearly didn't come from a single prompt. The original article cites this example to show that a polished result is usually not the first result.

So in the whole system, the most valuable thing isn't those 18 repositories, nor any single prompt. It's that after breaking motion production into reusable components, you can change text, colors, aspect ratios, and CTAs without redoing everything.

A good video is a portfolio piece. A motion engine that can repeatedly produce videos is the asset.

The original post includes a demo video:

The complete list of 18 repositories is in the original post, with all links. You can bookmark the list, but what's more worth copying is the process: Brief → build → animate → refine → render.