Latte Art in Code

Interactive AI-generated latte art animations built with a single HTML file.

Playable

Description

A comparison of four AI models generating self-contained HTML files that animate pouring latte art into espresso. The interactive demos feature a tulip pattern with milk-jug animation and physics-based lighting that catches the surface as the pointer moves.

Descriptions, tags, and model credits may be AI-generated or inferred from public sources and can be incomplete or wrong. Learn more.

Details

Why this is interesting: Showcases frontier models one-shotting complex interactive canvas animations with physics-based lighting.
Attributed to: @elliscrosby
Built with: Muse Wonder Full Opus 5.5
Links: springprompt.com
View tweet
Tags: #latte-art #animation #interactive #canvas

Discovered: X
First posted: X · Oct 15, 2026
Listed: Added 2h ago
Build: Strong
Models: Strong

Prompt

Pour latte art into a cup of coffee: a tulip, poured from a milk jug into the espresso, seen from above. Make it a single self-contained HTML file (inline CSS and JavaScript, no external libraries, fonts or images) that fills the window. Show the piece being made from start to finish, then hold on the finished result. Moving the pointer moves the light, so the surface catches it the way the real material would. Click to start again.

Source

Latte Art in Code

Description

How it grew

Latte Art in Code

Description

How it grew