As of: 2026-10-12 07:22 CEST.
Researched and written by AI agents (Claude Opus 5.5 in Claude Code). Human editor: Adam Bicz.
Canonical page: https://postcutoff.com/v/ror-fly-opus-5-5-cocktail-recipe-motion-graphic-x/

# Opus 5.5 renders a cocktail-recipe motion graphic in HTML from one image

Rory Flynn (@Ror_Fly), 23 September 2026, X. 78,170 views as of 12 October 2026.
Kind: Made by AI.
Watch: https://x.com/Ror_Fly/status/2102853258582880547

## Why it is here

Listed in the awesome-claude-5-5-videos library; ~78k views. The post includes the prompt.

## Description (written by Gemini from the video)

**Summary**  
This video showcases an animated motion-graphic recipe for a Negroni cocktail rendered in HTML/code, reportedly generated by Anthropic's Claude Opus 5.5 from a single image prompt. Shared by Rory Flynn (@Ror_Fly), the 30-second animation breaks down the drink’s classic recipe into an interactive, step-by-step visual sequence complete with animated pouring, stirring, and garnishing.

**What is shown**  
* **[00:00 - 00:02]** Title card animation displaying the text "NEGRONI: a 30 second recipe".  
* **[00:03 - 00:05]** Setup and Step 1 of 6: An empty rocks glass appears, labeled "equal parts · stirred · on the rocks", and three ice cubes drop in ("Fill Ice - big cubes · rocks glass").  
* **[00:06 - 00:10]** Step 2 of 6: A bottle of London dry gin appears and pours "1 oz" (30 ml) over the ice cubes, tracked by a liquid volume meter.  
* **[00:11 - 00:15]** Step 3 of 6: A bottle of Campari pours "1 oz" ("the bitter one · 30 ml") into the glass, raising the liquid level to 2 oz with a reddish hue.  
* **[00:16 - 00:20]** Step 4 of 6: A bottle of sweet vermouth ("vermouth rosso · 30 ml") pours 1 oz to complete the 3 oz total volume.  
* **[00:21 - 00:24]** Step 5 of 6: A bar spoon enters the glass and stirs for 20 seconds ("until nice and cold"), accompanied by a countdown bar.  
* **[00:25 - 00:26]** Step 6 of 6: An orange peel twist expresses oils and drops onto the drink rim ("express the oils, drop it in").  
* **[00:27 - 00:29]** Final summary card: The finished drink displays "THAT'S A NEGRONI! CIN CIN! 1:1:1 gin · campari · sweet vermouth".

**Claims & numbers**  
* The recipe advertises "a 30 second recipe" with 6 distinct steps [00:01, 00:04].  
* Drink proportions specified: 1 oz (30 ml) London dry Gin, 1 oz (30 ml) Campari, 1 oz (30 ml) Sweet Vermouth (totaling 3 oz), and a 20-second stir time [00:06–00:27].

**Notable quotes**  
* "NEGRONI - a 30 second recipe" [00:01]  
* "equal parts · stirred · on the rocks" [00:03]  
* "THAT'S A NEGRONI! CIN CIN! 1:1:1" [00:27]

**Assessment**  
This is a demonstration of AI code generation capabilities, specifically testing Claude Opus 5.5's spatial reasoning and programmatic animation skills to convert a static recipe infographic into a dynamic HTML/CSS/SVG motion graphic. The output is clean, correctly timed, and accurately executes vector illustration animation states without visual glitches.

**Lyrics & themes**  
* **Narration/Audio:** Silent / no vocal lyrics or narration. The narrative is delivered entirely through visual infographic text on screen detailing cocktail preparation.

**Lore & references**  
* **HTML/Canvas Code Generation:** Reflects the popular benchmarking trend of prompting multimodal LLMs (specifically Claude Opus models) with static infographic images to assess how faithfully and creatively they can reproduce interactive or animated HTML/SVG web graphics.  
* **"Cin Cin!":** Traditional Italian cocktail toast paying homage to the Italian heritage of the Negroni cocktail.

**Visual style & craft**  
* **Visual Style:** Clean, hand-drawn vector outline aesthetic on an off-white background, featuring pastel color fills, smooth liquid level physics, synchronized progress meters, and dynamic step trackers.  
* **Craft & Origin:** Rendered directly via code (HTML/SVG/CSS/JS animations rather than diffusion video generation), displaying crisp programmatic curves, tweening, and exact UI state updates.

_Described by gemini-3.8-flash on 2026-10-12 from the video's audio and frames._

## Made by AI

- Made with: Claude Opus 5.5
- How we know: X post (2026-09-23): 'Opus 5.5 rendered this in HTML from (1) image 🤯 /  / Things are getting weird. /  / PROMPT: / We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the ful…'
- Human role: Supplied one image and a prompt asking for an explainer-style recipe animation.
- Pipeline: One image + prompt → Opus 5.5 writes HTML/JavaScript animation
- Series: Code-rendered film (LLM writes the program that draws every frame)

## Related

- 2026-09-22: [Anthropic releases Claude Opus 5.5](https://postcutoff.com/e/2026-09-22-claude-opus-5-5/)