Playable: pour your latte Animated HTML website template

The sample page

Pico y Crema. Farm coffee roasters, La Macarena, Bogotá.

The idea

The wooden bar, seen from above, is the canvas: an espresso with its crema waits for your pitcher, and the milk moves like real milk until it draws a heart, a tulip or a rosetta.

What to try

Pick a design and press and hold on the cup to pour (or use the arrow keys and Space): up to the line the milk hides under the crema, then the white shows up, and at the end you sweep fast to cut through; or hit “Pour it for me.”

Made for

Cafés, roasters, bakeries, ice cream shops and workshops

Palette

• #F3E9DA
• #2A1A12
• #A8362A
• #2F5D50
• #C98A4B
• #FBF6EC

Typefaces

Young Serif + Hanken Grotesk

Cultural notes

• La Macarena with no exact address, no phone number, prices in Colombian pesos on Bogotá time.
• No winning or losing: the barista always comments kindly and nothing depends on a score.
• The menu, hours and booking show up without playing, without JavaScript, and with reduced motion (where the cup arrives already poured).

The HTML

What you download

• A single index.html file with nothing to install: open it, swap in your brand and copy, and upload it to your hosting.
• In English and Spanish, tested on desktop and mobile.
• Instructions for changing copy, colors, language and prices, plus its license.