Opus 5.5 drew a 30-second Negroni explainer in HTML

The Negroni explainer that Rory Flynn posted on September 23 was written as code rather than assembled on a timeline. The interesting part is not that a model can draw a glass and fill it. It is that he let the model choose the medium, and the model chose a web page.

@Ror_Fly, September 23, 2026. Card rendered from the post; read it on X at https://x.com/Ror_Fly/status/2102853258582880547.

Flynn runs Systematiq AI, a creative-operations consultancy, speaks on AI workflows at Figma's Config conference, and co-hosts the Fast Hours podcast. His prompt gave the model one image and a choice: render a recipe motion graphic from an empty glass to a finished cocktail, explainer style, ingredients and measurements going in, 30 seconds, using "javascript or html (w/e you think will produce the best)". The model that answered was Anthropic's Opus 5.5, released the day before.

What came back is not a lucky picture. A card tracks the recipe in steps: "STEP 3 OF 6", then "1 OZ", then "CAMPARI", then "the bitter one · 30 ml", above a fill bar counting up from "0.0 / 1 oz". The glass carries its own measurement scale in ounces. A six-stop rail along the bottom ticks off ICE, GIN, CAMPARI, VERMOUTH, STIR and PEEL as each one happens. It closes on a full glass, an orange peel, and a card reading "THAT'S A NEGRONI / CIN CIN! / 1:1:1". That is state, progress, measurement and a punchline, a designed system rather than a lucky accident.

A step counter, a measure in ounces and millilitres, a fill bar and the recipe rail. Still from the demo by @Ror_Fly.

The closing frame: a full glass, a measurement scale, and "CIN CIN!". Still from the demo by @Ror_Fly.

Watch the middle of the explainer below.

The case for the timeline

Motion graphics is a craft of timing, and timing is felt rather than specified. Someone who knows a title should land two frames later knows it by watching, not by arithmetic. A timeline is built for that: drag the keyframe, scrub, feel it, drag again. It is why the tool has outlived every prediction that it was finished.

Code asks for something different, and the leading frameworks are candid about the trade. Remotion's documentation concedes that you think in frames rather than seconds, and that CSS animations are off limits inside a composition because they do not track the timeline. Motion Canvas renders to a canvas and cannot use arbitrary HTML or CSS at all (via PkgPulse).

The deepest objection is not about control. It is about knowing whether the work is any good. A write-up on the agentic toolchain put it plainly in August: rendering "automates end to end", but "the judgment loop does not", and a rendered composition is far harder for an agent to verify than a web page (via Digital Applied). Code that typechecks and a render that exits cleanly prove the pipeline ran. They do not prove the glass looks right.

The noise around this is unhelpful too. A video titled "Motion Graphics Animators and Video Editors are COOKED" has done its rounds, and some version of that claim has been made about Flash, about SVG, and about every code-based animation library since.

None of that is wrong. The conclusion drawn from it is.

Why the browser wins anyway

The bottleneck in motion graphics was never the drawing. It was the number of times someone could look at the thing and change their mind. A timeline needs a person at a machine with the project open. A web page needs a refresh, and a browser is the cheapest preview surface ever built. When the animation is code, that loop collapses to editing a number and reloading, so the count of iterations per hour rises without anything else about the craft changing.

Code also makes the work reviewable in a way a timeline project cannot be. The same source produces the same video every time, so a change is a diff rather than a new file, and a diff can be reviewed, versioned and rendered in CI without anyone opening a creative application. Review is where iteration stalls inside a team, and this is the first medium for motion where review is cheap.

A composition is a template as well. One piece of code can render the same explainer for a hundred products with different names, measures and colours, which a timeline does not do at all.

None of this was a strategy until models could write the code. React and TypeScript are the languages these systems write best, and Remotion's own README now reads "Video tools for the agent era". The ecosystem is small but real, with roughly 60,000 weekly downloads for Remotion against 8,000 for Motion Canvas and 3,000 for Revideo in counts published in March (via PkgPulse).

Flynn's post is a fair test of what his audience made of it. Its own counts show 1,385 bookmarks against 971 likes, so more people saved it to try than applauded it. The instruction is the part worth copying: he did not ask for HTML, he asked for the best of two options and let the model decide, which is how anyone finds out what a new model is actually good at.

The limits are real. The code was not published, so how much of this is HTML, how much CSS and how much JavaScript cannot be checked from outside. Thirty seconds of animation is not a film. The judgment loop is still a person, as the toolchain's own write-ups say.

A model that can write a Negroni explainer from a single prompt does not make the drawing better, and it does not replace the person who decides whether the glass looks right. It changes how many times a day that person gets to look.

The demo is at https://x.com/Ror_Fly/status/2102853258582880547. Remotion is at https://www.remotion.dev/.