Jugable: dibuja tu latte Plantilla web animada en HTML

La página de ejemplo

Pico y Crema. Tostadores de café de finca, La Macarena, Bogotá.

La idea

La barra de madera vista desde arriba es el lienzo: una taza de espresso con su crema espera tu jarra, y la leche se mueve como leche de verdad hasta dibujar un corazón, un tulipán o una roseta.

Qué probar

Elige una figura y mantén pulsado sobre la taza para verter (o flechas y Espacio): hasta la línea la leche se esconde bajo la crema, luego aparece el blanco y, al final, cruza rápido para cortar; o pulsa «Verter por mí».

Para quién

Cafeterías, tostadores, panaderías, heladerías y talleres

Paleta

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

Tipografías

Young Serif + Hanken Grotesk

Cuidados del estilo

• La Macarena sin dirección exacta, sin teléfono, precios en pesos colombianos y hora de Bogotá.
• Sin ganar ni perder: el barista siempre comenta con cariño y nada depende de un puntaje.
• La carta, el horario y la reserva se ven sin jugar, sin JavaScript y con movimiento reducido (ahí la taza sale servida de una vez).

El HTML

Qué descargas

• Un solo archivo index.html, sin instalar nada: lo abres, cambias tu marca y tus textos, y lo subes a tu hosting.
• En español e inglés, probado en computadora y en celular.
• Instrucciones para cambiar textos, colores, idioma y precios, y su licencia de uso.