White Russian cocktail recipe poured with real fluid physics
867 views·19 likes·1 saves·3 reposts·Posted 25 Sept 2026 · 0:30 · Explainers
Our note
A 30-second recipe explainer animating a White Russian cocktail from empty glass to finished drink, with ice floating, coffee liqueur sinking and cream settling on top — physics the creator never specified.
The creator’s post
Opus 5.5 is cracked at making animation. I gave it a hand-drawn reference image and this prompt: "Render a recipe motion graphic animation using JavaScript or HTML (whatever you think will produce the best result) to show the full recipe for a White Russian from start to finish, empty glass to completed cocktail. Explainer video style, showing the ingredients and measurements as they go into the glass. It should be a 30s video." About 25 minutes later I had a finished 1080p MP4. One prompt, no follow-ups. It built the whole thing as a single HTML file, using SVG and plain JavaScript with no animation library. Every frame is drawn from a timestamp, so it stepped a headless browser through all 900 frames and piped them straight into ffmpeg. It got the physics right as well. The ice floats once the liquid reaches it, the coffee liqueur sinks and darkens the drink from the bottom, and the cream sits on top. I didn't tell it any of that. Then it rendered test frames, found 3 problems and fixed them before exporting. Nobody asked it to check its own work. This used to be a job for a motion designer and After Effects. Now it's one prompt. What would you get it to animate next?
The prompt
One-line recipe explainer briefRender a recipe motion graphic animation using JavaScript or HTML (whatever you think will produce the best result) to show the full recipe for a White Russian from start to finish, empty glass to completed cocktail. Explainer video style, showing the ingredients and measurements as they go into the glass. It should be a 30s video.
Make one like this
1 · Copy the prompt
Use the prompt above as your starting point, then change the subject and the style.
2 · Direct it like an editor
Ask for one self-contained HTML file on a fixed 1920×1080 stage, link this video as the reference, and send two or three rounds of specific notes.
3 · Render it to MP4
Screen-record a short piece, or capture it frame by frame for exact timing. How →
How it was made
The creator didn’t name their tools. Most videos like this are HTML, canvas or SVG animation written by Claude and screen-recorded or rendered to MP4. How that works →
Look
Views as of collection. Video, post and prompt © their creator.
Create with Zryth