The Beat Is the Clock

The motion videos Claude makes don't come from a video model. Every frame is drawn by code the model writes: HTML and CSS, a canvas, three.js, a React component, sometimes a Blender script. A curated list of Fable 5.2 videos puts it in one line: "Almost every video here was made by asking Fable 5.2 to produce the animation as code ... no video model involved" (awesome-fable52-videos).

I already had a film studio that works this way. It makes narrated explainers: the narration is the clock, scenes are React components, and Claude Code writes them. What it couldn't make was the other kind of film, the thirty-second piece with no voice where the type is the design and every cut lands on the music. So I looked at what those videos actually use, picked one route, added a motion mode to my harness, and made the film above with it.

What the videos actually use

Only some posts credit a repo or a tool. Across those posts and the curated indexes, four routes account for what I found.

1. One HTML file, captured. Claude writes a single HTML page using Canvas, SVG or three.js. A headless browser (usually Playwright) steps through it, and FFmpeg encodes the frames. Many Fable 5.2 posts appear to be this route, though most credit no repo. One post describes "pure three.js, zero video model ... 3,000 code-rendered frames ... music + sound effects synthesized in code." Starter kits such as claude-motion-design ("HTML + Playwright + ffmpeg. No After Effects"), onetake and ClaudeAnimationBase package this route. It gives you the most freedom and no timeline contract. Determinism and audio sync are your problem.

2. Remotion and its official Agent Skills. This was the January 2026 wave. Remotion's launch post on January 20 ("Remotion now has Agent Skills - make videos just with Claude Code!") drew 21,886 likes and about 18.9 million views. Remotion builds the video in React. Headless Chrome renders it, FFmpeg encodes it, and every frame is a pure function of useCurrentFrame().

3. HeyGen HyperFrames. This route appeared from April 2026. HyperFrames turns HTML, CSS and seekable animation (GSAP, Lottie, three.js, WAAPI) into MP4 by seeking each frame in headless Chrome. HeyGen's launch post on April 16 read: "We built our launch video in Claude Code using HyperFrames. Now it's yours." It drew 8,321 likes and about 3 million views.

4. Blender driven from Python or MCP. This route produced the photoreal 3D pieces. Claude writes bpy scripts or drives Blender through MCP for Blender. Renders are offline and heavy.

Anthropic also ships Claude Motion, a beta on Team and Enterprise plans that "doesn't use a video generation model." It is a claude.ai feature rather than a Claude Code engine, and its pages do not mention audio. That puts it outside this article.

The engines, compared

Figures come from GitHub and npm on 2026-11-14. Stars measure attention, not quality.

Dozens of community skill packs sit on top of these engines. Some have five-figure star counts. One vendor-neutral test, described below, found that 6 of 16 skills produced a film "close to the no-skill film." The same test's summary is the best filter I've seen: "A skill earns its place with a look, a workflow, or footage to edit."

What I picked, and why

Does keynote-style motion need a second engine next to a Remotion studio? My answer is no. Add a motion mode to Remotion and keep HyperFrames in reserve for HTML-native work.

Every capability in the viral pieces except photoreal 3D has an official, deterministic Remotion path.

• GSAP. GSAP is how most HTML motion gets its easing vocabulary, and @remotion/gsap (since 4.0.517) "builds a paused GSAP timeline and seeks it to the current frame, so previews, scrubbing and renders are deterministic."
• 3D. 3D goes through @remotion/three and React Three Fiber, with two hard rules from Remotion's skill: wrap 3D in <ThreeCanvas>, and never use useFrame().
• Motion blur. Real sub-frame blur comes from <HtmlInCanvasMotionBlur> (since 4.0.529; 180° shutter and 8 samples by default).
• Everything else. Transitions, light leaks, Lottie and Rive all have official packages.

The licence is generous to small teams. Under Remotion's licence, individuals and for-profit companies with up to 3 employees use Remotion free, commercially, "for the purpose of creating videos and images." Above that size, the Creators tier costs $25 per seat per month. Watch one thing: the planned 5.0 licence, still an open PR, says "Contractors also count towards team size."

HyperFrames is good, but its advantages don't apply to a React studio. Its pitch is "No React requirement," because agents already write HTML. That is a real advantage if your source material is a website, a product UI or a Figma file. Its brand-token capture and ~450 registry blocks are useful there. But if your scenes, look registry and timing library are already React, switching means porting all of them. HyperFrames' own comparison guide says: "Migrate because your source material or your team fits better on this side. Not because one framework looks newer."

The speed numbers are mixed, and every one is a single run.

• HeyGen's own comparison is a vendor number from one run each with Claude Code on Opus 5.5. HyperFrames took 11 min 50 s and Remotion took 12 min 30 s. Remotion wrote "10 TypeScript files, 1,037 lines" with no sound. HyperFrames wrote "4 HTML files, 822 lines" and added a music bed and five sound effects. HeyGen itself says "a single run decides nothing about quality," and concedes Remotion "is older and much more established."
• The same vendor-neutral test is also one run each, from October 11, also on Opus 5.5. It ranked HyperFrames the slowest of 16 skills, at 23.5 minutes for a 15-second promo. Remotion's official skills took 4.5 minutes.

There is an awkward detail in that test. The Remotion skills produced a look "close to the no-skill film." Plain Claude Code with no skill "made a film that passed every check in 4.4 minutes."

My reading: the engine decides determinism and plumbing, not taste.

Blender stays a plate source. For photoreal product shots, render in Blender and composite the plates inside Remotion. That is my approach, not a sourced benchmark.

What separates professional motion from generated motion

The most precise craft rules I found are in HyperFrames' reference files, motion.md, sound.md and look.md. They are Apache-2.0, and the motion rules were "measured frame by frame from the official HyperFrames launch films." They are engine-neutral, and I restate them here with attribution. Additions from Remotion's docs and Material Design 3 are marked.

Ease by role. Use one ease per role, not one ease for everything:

• Arrivals land on a long tail (expo.out, power4.out).
• Camera moves and colour floods ease both ways (power2.inOut).
• Exits and zoom-throughs accelerate (power3.in).

HyperFrames names the tell directly: "The same power2.out at 0.5 s on everything is the flat default that makes a film feel generated." For UI elements, Material 3's emphasized curves are a reasonable source: enter cubic-bezier(0.05, 0.7, 0.1, 1), exit cubic-bezier(0.3, 0, 0.8, 0.15). When you scale something up, Remotion recommends interpolating in perceptual scale, because linear scale reads as slowing down as the object grows.

Springs. By damping ratio, "1.0 never bounces, 0.7-0.85 reads premium, 0.4-0.6 playful, under 0.3 a cartoon." Position and size may bounce; opacity and colour never do. In Remotion, damping: 200 gives a push with no bounce.

Staggers and overlap.

• Stagger: letters a frame apart, words 60–120 ms apart, list items 40–80 ms apart.
• Overlap: the next element starts when the previous one is 30–50% done. "Fully sequential looks robotic, all at once looks cheap."

Exits shorter than entrances. Exits should be 40–50% shorter than entrances.

Motion blur on fast moves. A fast move takes 0.3–0.6 s and carries blur that peaks at its fastest frame: 6–12 px on text-sized elements, 15–20 px for full-frame moves. Without blur, fast motion strobes.

A beat grid computed from the index. Frames per beat = fps × 60 / BPM. Compute each beat's frame from its index and round it. Do not keep adding a rounded beat. At 128 BPM and 30 fps, a beat is 14.0625 frames. Rounding to 14 and accumulating drifts 2 frames over 32 beats. Cut on the beat, and change the layout on the bar.

Cut at the fastest frame. Cut mid-move, at peak speed, with matching direction and speed on both sides. The eye carries the motion across the cut.

Sound one frame after picture. "Place a clip so its peak lands one frame after its picture (light arrives before sound; a sound early feels wrong sooner than one late)." Three more rules from the same file:

• Level: hits sit 3–6 dB over the bed.
• Variety: rotate two or three takes of a repeated sound. "The same whoosh on every cut is the most common tell."
• Loudness: for social, mix around −16 to −14 LUFS, with true peak at −1 dBTP or lower.

Landed titles are dead still. Once a title arrives, it stops. HyperFrames lists the giveaways of generated motion:

• "breathing, floating or pulsing loops standing in for motion on titles and UI"
• "titles that keep sliding or scaling after they land"
• "every scene entering the same way; every element fading and sliding up"

Transitions with a cause. Use 3–5 kinds of transition in a film, each one "caused by something on screen." At most a third of the seams should be hard cuts, and "worlds never crossfade into each other."

Default-font tells. "Inter, Space Grotesk, Instrument Serif, Geist and JetBrains Mono are where generated design lands; use them when the brand does, not by default." The same file warns that "left alone, the same brief comes out with the same look run after run." Write the look first, with exact hex values, faces and sizes, before any scene exists.

Explainer or motion: how to pick

These are two different films, with different clocks.

The test: turn the sound off. If the viewer loses the point, it's an explainer. If it still works, it's a motion film.

Hybrids are normal. An explainer can open with a motion title and use motion idents between chapters. A motion film that needs more than a few spoken lines, or runs past about 90 seconds, has become an explainer. The thresholds are my own synthesis of the research, not a standard. HeyGen draws a similar, stricter line: "If the result needs narration, several scenes, or a longer story, make a custom video."

What I added to my harness

My harness is the set of skills, hooks and commands around Claude Code that I keep in ~/dotfiles. Its film studio is ai video. The motion mode added:

• A second film kind. ai video new SLUG --kind motion starts a film whose script.json has no narration. Scenes last a number of bars, and marks (hit, drop, riser, braam, breath) land on beats.
• A timeline from the beat grid. Every beat's frame is computed from its index. 64 beats at 128 BPM and 60 fps end exactly on frame 1,800.
• A motion library. Scenes ask useBeats() for beat(n), bar(n) and mark('drop'), the way explainer scenes ask for the frame where a word is spoken. On top of that: easing by role, spring presets by damping ratio, kinetic type, a GSAP bridge, motion blur, seam transitions, a 2.5D camera rig, particles, a lit 3D hero and grain.
• A score built for it. A new procedural style, a hybrid trailer score in G minor at 128 BPM with braams, risers, sub drops and impacts on the marks, mixed with no ducking and delayed one frame.
• QA that knows the difference. No caption checks, holds of up to 1.5 seconds allowed (a landed title is meant to be still), and stills on both sides of every scene cut.
• The rule above, in the video skill, so a session picks the kind before it writes a scene.

The film at the top is the first one made this way: 18 bars at 128 BPM, 60 fps, seven scenes, no voice. Its script is built around the test from the previous section.

Caveats

"One prompt" is marketing. Many posts imply a one-shot result. Remotion published the full multi-prompt history behind its own launch video. One user's widely shared January report is the counterweight: "I typed the prompt, and it created an extremely bland, untasteful, stock-looking video." The poster reports "2-3 days of work" and that the reference videos that inspired the attempt "were all fake." Budget for iteration. The craft rules exist to shorten it, not to eliminate it.

Cost figures are user claims, not measurements. One user reported $4.51 on Opus 5.5 against $16.97 on Fable 5.2. Another reported Fable 5.2 runs from $7.09 at low effort (about 29 minutes) to $42.10 at the highest setting (about 86 minutes). I have not reproduced either.

The naming is muddled. Several October 2026 lists and posts are labelled "Fable 5.5." Anthropic's Fable 5.2 page names Fable 5.1 as the previous version. Treat "Fable 5.5" as unverified.

I haven't verified everything. I did not open the prompts most Fable 5.2 posts link in replies, so whether those used a framework is unknown. Which @react-three/drei helpers are safe under Remotion's no-useFrame rule is unverified.

Where to put your effort

The engine choice is smaller than the posts suggest. If you already run Remotion, stay. Add @remotion/gsap, motion blur and a beat grid, and keep HyperFrames for pieces that start as HTML. If you're starting fresh with HTML-native material, HyperFrames is a legitimate first choice. Avoid Theatre.js and Motion Canvas for new work.

Put the effort into rules: write the look before any scene, then work through the checklist above.