Claude Opus 5.5 Motion Design · The Complete Code-Only Workflow

Quick Summary

• zero's workflow treats motion design as a deterministic code project. Claude writes an HTML scene with a seek(t) function, Playwright captures exact frames and FFmpeg assembles them into a finished video.
• The production loop has six stages: deconstruct a reference, define the visual system, set up the renderer, collect licensed assets, plan every beat, then render and review frame by frame.
• The premium look comes from continuity rather than decoration. Objects transform into the next scene, camera moves have one clear direction, events land on musical beats and real sound effects reinforce each interaction.
• The original article includes three detailed blueprints: an AI product launch film, an Apple-style photo product film and a looping UI-morph sequence. All four original X-hosted videos are presented here as credited media cards that open the source file.
• The '$0' claim means no separate motion-design or editing subscription in the demonstrated stack. Claude access, computer time, electricity, storage and any paid asset or model usage still have a cost.
• A strong brief does not ask the model to make everything immediately. It asks for missing inputs, a beat map and representative stills first, then approves the plan before the full render.

Credit, scope and what is actually being reproduced

The original article, workflow, demonstrations and creative principles belong to zero (@twoclipping). It was published on X on September 28, 2026 under the title 'How I Make $10K Launch Videos for $0 with Opus 5.5 (Full Course).' Every video card below opens media attached to that original article and links back to the canonical X source.

This post reorganizes the public method into an educational production guide. It does not reproduce the creator's three long prompts word for word. The prompt pack below is newly written from the documented process so readers can adapt the ideas while the original article remains the canonical source for zero's exact examples.

Anthropic released Claude Opus 5.5 on September 22, 2026 and positions it for complex work requiring careful judgment. The workflow can be attempted with other capable coding agents, but the results shown here are specifically credited to zero's Opus 5.5 experiments.

The production system in one view

Input layer: a product, a reference video or an original concept, screenshots, brand assets, a licensed music track and a small set of visual rules.

Planning layer: contact sheets, beat-by-beat analysis, a shot and transition map, camera direction, typography, colors, asset list and four approval stills.

Animation layer: one HTML document that can draw any frame from an explicit time value. The scene does not wait for browser timers and does not depend on what happened in the previous frame.

Capture layer: Playwright opens the composition at an exact time and captures the frame. Its official screenshot API is the mechanical bridge between browser graphics and a frame sequence.

Finishing layer: FFmpeg assembles frames, mixes the music and sound effects, normalizes audio and can blend subframes for motion blur. Review closes the loop by finding visual spikes, timing errors and single-frame glitches.

Step 1 · Deconstruct a reference without copying its identity

Choose a reference because its pacing, transition logic or camera language solves a problem, not because you want a pixel-for-pixel duplicate. Extract a small, regular sample of frames and arrange them as contact sheets. Two frames per second is usually enough to reveal the structural beats without producing hundreds of images.

Ask the agent to identify the opening state, every major transformation, the order of information, camera changes, dominant colors, type roles and how one scene hands an object to the next. Then translate that structure to your own product, copy, screenshots and brand system.

zero recommends a restrained 2D direction when the model drifts toward generic dark 3D visuals. A useful constraint set is a warm light canvas, black interface elements, one accent color, one clean sans-serif and no decorative particles or glow unless the concept truly needs them.

Reference responsibly. Do not lift a competitor's trademarked assets, product copy, distinctive character, proprietary footage or exact branded composition. Use the analysis to learn rhythm and mechanics, then create an original visual identity.

Step 2 · Turn a project folder into a deterministic studio

The minimum system is deliberately small: HTML and browser graphics for composition, Playwright with Chromium for frame capture and FFmpeg for image-sequence encoding, audio assembly and filters. A short two-second shape-morph test proves the pipeline before the real film begins.

At the center is seek(t). Given the same time value, it must always draw the same frame. Compute position, scale, opacity, radius, text state, masks and camera transforms directly from time. Avoid CSS transitions, setTimeout, requestAnimationFrame-driven history and mutable state carried between frames.

For spring motion, use a closed-form response or another time-addressable curve. When an element changes target several times, represent each change as an explicit timed contribution. This keeps random-access frame capture reliable and makes revisions local instead of forcing the whole animation to be rewritten.

The creator's examples render at either 1920 by 1080 or 1440 square, usually at 60 frames per second. Choose the delivery format before layout. A square film and a widescreen film need different type sizes, safe areas and camera moves.

Step 3 · Build an asset and rights manifest

The article points to Mixkit for music and sound effects, Pexels for footage and photos, and Google Fonts for type. Those libraries are useful, but 'free' is not a substitute for checking the license of the exact item. Save the asset URL, creator when provided, download date, license page and any restrictions with the project.

Mixkit publishes separate licenses by asset category. Its free sound-effects license permits commercial and non-commercial end products, but does not allow redistribution of the raw item as stock. Pexels permits free commercial use and modification, while restricting misleading endorsement, unaltered resale and some uses involving depicted people or protected brands.

Use real sound effects rather than asking a general coding model to synthesize placeholder noises. For each click, impact, whoosh or success tone, measure the peak and align that peak with the visual event. The perceived timing of the sound matters more than the file's starting timestamp.

Analyze the music track to produce a beat grid and locate the drop, breakdown and return. This is the timing skeleton for the animation. If the track changes, regenerate the beat map before retiming by hand.

Example 1 · AI product launch film

The first blueprint is a 15-second widescreen product story. A user types one request, the interface visibly thinks, result cards arrive on the musical drop, the selected result enters a chat and the order confirmation transforms into the end card.

Its continuity rule is more important than its subject. The send control becomes the thinking object, that object releases the full-screen color transition, the chosen card moves into the conversation and the confirmation button grows into the final black canvas. Each scene inherits a visible object from the previous one.

The palette is deliberately narrow and the typography has clear jobs. Real photography provides texture while the UI remains flat. The prompt bans cuts, crossfades, generic particles, reversing camera moves and long holds, because those shortcuts weaken the sense that the film is one designed system.

Example 2 · Apple-style photo product film

The second blueprint is a square, continuous-take photo product film. A wordmark contracts into punctuation, opens through an iris, unfolds a grid, moves into liquid-glass controls, becomes a device interface, turns into a store flow and finally lands as a framed print on a real wall.

This example is technically more demanding because translucent controls need the scene behind them. The documented solution clones the scene into each glass element and uses SVG displacement, chromatic offsets and rim lighting instead of relying on a browser backdrop-filter combination that rendered unreliably.

Footage seeking is another practical trap. Re-encode clips as all-intra media, load through a blob URL and wait for the seeked event before drawing the frame. That makes random frame capture more reliable than serving a long-GOP clip through a simple local server.

The loop succeeds only when the final wordmark state exactly matches the first frame, including cursor position and motion direction. A near match still produces a visible hitch.

Example 3 · One shape becomes an entire UI system

The third blueprint keeps one primary shape alive across a button, loader, confirmation mark, dynamic island, player, scrubber, volume control, toggle, tabs, chart, command palette and toast. The format is ideal for a product feature reel or design-system demonstration.

The interaction cursor is part of the choreography. Values change from the cursor position during a drag, then spring from the release state. The leading and trailing edges of indicators can use separate spring responses so the shape stretches instead of sliding like a rigid block.

The difficult part is not adding more states. It is keeping icon stroke weights, type scale, radius logic, spacing and motion character consistent while content swaps inside the same container. Enter and exit states need separate timing so labels do not overlap.

The five-part prompt anatomy

Inputs: tell the agent what it must request before building, including product copy, brand assets, images, target format and music. Define sensible placeholders, but do not let defaults silently become final client material.

Direction: describe the visual system, transitions, type roles, palette, camera behavior and prohibited shortcuts. A ban list is valuable because it prevents attractive but off-brand solutions from returning on every attempt.

Structure: map the story to beats or time ranges. Specify which object carries continuity across a transition and what the viewer should understand at each stage.

Build: define the deterministic render contract, camera model, spring behavior, media handling, sound alignment, frame rate, subframe strategy and automated checks.

Start gate: require a beat map and a few representative stills before full implementation. This converts an expensive late correction into a cheap planning correction.

Seven rules that make the result feel designed

1. Transform instead of fading. Let an existing object change role, size or shape to introduce the next scene.

2. Preserve continuity. Each scene should emerge from a visible element, color or movement in the previous scene.

3. Give the beat a job. A click, reveal, impact, text entrance or camera landing should answer important beats rather than decorating every frame randomly.

4. Use restrained physicality. A small overshoot can communicate weight; large bounces make interface motion feel playful or cheap when the brand did not ask for it.

5. Move the camera with one intention at a time. Avoid pushing in, pulling out and changing direction in rapid succession without narrative reason.

6. Support motion with real sound. Clicks, impacts, whooshes and success tones should reinforce the exact frame where the visual event completes.

7. Make quality control part of the brief. The agent should show test frames, inspect beat boundaries and scan the final sequence before delivery.

Render, review and fix the frame nobody notices until export

Render representative frames first: the opening, the main reveal, the densest interface and the end card. Check hierarchy, margins, brand accuracy and whether every state fits the chosen aspect ratio.

For motion blur, the creator samples multiple subframes for each final frame and combines them with FFmpeg. More samples can smooth fast movement, but they increase render time and can create ghost copies when motion is too fast. Adjust the motion first rather than using blur to hide a bad trajectory.

Run two automated passes after rendering. First, compare neighboring frames and flag difference spikes that are several times larger than surrounding changes. Second, inspect the flagged frames plus every beat boundary for flashes, missing layers, clipped text, z-index mistakes or stale content.

Then review as a director. Useful notes name the timestamp or beat, describe what feels wrong and define the desired change. 'The reveal lands late; make the card settle exactly on the drop' is more actionable than 'make it better.' Two or three focused rounds are usually more efficient than one giant correction list.

What '$0' does and does not mean

The workflow removes the need for a separate timeline editor in the demonstrated production path and uses freely available software plus free-library assets. It does not make production literally costless.

Claude access or API usage, a capable computer, storage, render time, electricity and the creator's own review time remain costs. Commercial work also includes concept development, brand adaptation, rights review, client communication, revisions, delivery formats and the risk carried by the person approving the final result.

Likewise, the comparison with studio prices describes perceived production value and market positioning. It is not evidence that every generated film replaces a $5,000 to $15,000 engagement or that clients will pay that amount. Price the outcome, rights, responsibility and service, not only the number of clicks used to render it.

The creator's commercial note

At the end of the source article, zero separates production from distribution. A polished launch film does not create reach by itself. He promotes Affiliate Network as a performance-based creator distribution service and says its campaigns have driven more than five billion short-form views.

The article also attributes growth for the Rizz app from zero to $400,000 in monthly revenue to that distribution engine and describes creator compensation near $0.50 per thousand views with no flat fee. These are creator-reported promotional claims, not independently verified performance data, forecasts or guarantees. Review the current commercial terms directly before making a campaign decision.

A practical build checklist

Before animation: confirm the message, audience, duration, format, brand rules, reference purpose, asset rights and approval owner.

Before coding: approve the beat map, transition logic, camera plan, type system, palette and representative stills.

Before full render: validate seek(t) at random times, test media seeking, confirm font loading, inspect layer order and render the fastest transition with the intended subframe count.

Before delivery: scan frame differences, check every beat, watch with and without sound, confirm loudness, verify spellings and logos, test the final file on the destination platform and preserve the source manifest.