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

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.