# Negroni recipe as a 30-second explainer

> A 30-second square recipe animation that pours a Negroni from empty glass to garnish, labeling each ingredient and measure as it goes in. Opus 5.5 built it in HTML in Claude Code from a one-paragraph prompt and a single hand-drawn reference image.

- Page: https://meetreference.com/v/negroni-recipe-as-30-second-explainer/
- Exact prompt as plain text: https://meetreference.com/v/negroni-recipe-as-30-second-explainer/prompt.txt
- Made with: Claude Code
- Model: Claude Opus 5.5
- Built with: HTML
- Style: Explainers; recipe, how-to, cocktail, hand-drawn, illustrated, square, food and drink
- Length and format: 30 sec, 1:1 (1080x1080 source)
- Shared by @Ror_Fly in X, Sep 23, 2026: https://x.com/Ror_Fly/status/2102853258582880547
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. Work in Claude Code with Claude Opus 5.5, or the closest equivalent you have.
2. Set up what the prompt expects: A reference image of the drink; the creator used one hand-drawn illustration.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Change "empty glass to completed cocktail" to your recipe's first and last moments, attach your own illustration, and keep "Showing the recipe ingreidents + measurements as they're going into the cup" for the step-by-step labels. Change "Should be a 30s video" for another length.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
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 full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A flat hand-drawn recipe card: a rocks glass fills step by step with ice, gin, Campari, and sweet vermouth beside a label card for each step, under the word NEGRONI.

- Color: Warm off-white paper, coral-red lettering and accents, pale ice blue for the glass, and a deep crimson drink with an orange-peel twist.
- Type: A chunky hand-lettered NEGRONI with a dark drop shadow, a small handwritten subtitle ("equal parts · stirred · on the rocks"), and step cards with a small "STEP 2 OF 6" kicker, bold display amounts ("1 oz", "20 sec"), the ingredient name in caps, and a thin progress bar.
- Framing: Square frame with the title on top, the glass left of center with tick marks for 1, 2, and 3 oz, the step card to its right, and a six-step tracker (ICE, GIN, CAMPARI, VERMOUTH, STIR, PEEL) along the bottom that fills in red. Bottles tilt into the frame from the top left.
- Structure: Title card "NEGRONI, a 30 second recipe", fill with ice, 1 oz gin, 1 oz Campari, 1 oz sweet vermouth, a 20-second stir with a bar spoon, the orange peel, then "THAT'S A NEGRONI, CIN CIN! 1:1:1".

Storyboard, nine frames spread across the video: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/storyboard.webp

- Frame 1 at 1.7s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f1.webp
- Frame 2 at 5.0s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f2.webp
- Frame 3 at 8.3s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f3.webp
- Frame 4 at 11.7s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f4.webp
- Frame 5 at 15.0s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f5.webp
- Frame 6 at 18.3s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f6.webp
- Frame 7 at 21.7s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f7.webp
- Frame 8 at 25.0s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f8.webp
- Frame 9 at 28.3s: https://meetreference.com/media/negroni-recipe-as-30-second-explainer/f9.webp

## How it was made, per the creator

- Notes: The creator ran it "straight in Claude code" and thinks the effort was set to medium. The only input besides the prompt was one image, which the creator shared in a reply: a hand-drawn Negroni in a rocks glass with an orange twist under the word NEGRONI. In a later post the creator had Opus make four variants in the same design system with four subagents, in under five minutes.

> I did it in straight in Claude code.
> (@Ror_Fly)

## Links

- Watch: https://x.com/Ror_Fly/status/2102853258582880547
- Original post: https://x.com/Ror_Fly/status/2102853258582880547
- The reference image, in a reply: https://x.com/Ror_Fly/status/2102914654066610195
- Follow-up: four variants made with four subagents: https://x.com/Ror_Fly/status/2103193846129533198