
White Russian cocktail recipe poured with real fluid physics
Sarutobi Sasuke🥷VERIFIED
@Sarut0biSasuke867 views · 19 likes · 1 saves · 3 reposts · Posted Sep 25, 2026 · 0:30 · Explainers
OUR NOTEA 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
Three steps, using what the creators in this index used.- 1 · Copy the prompt
Use the prompt above as your starting point, then change the subject and the style.
HOW OTHERS WROTE THEIRS → - 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 for pacing and style.
- Send two or three rounds of specific notes.
- 3 · Render it to MP4
A short piece like this can be screen-recorded, or captured frame by frame for exact timing.
TURN AN HTML ANIMATION INTO AN MP4 →
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
explainersimulationminimal
Indexed Sep 28, 2026, 8:28 AM · Views as of indexing. Video and post © their creator.