Fase 02 · Motion + exploración divergente · Julio 2026

Tregua, en movimiento
+ cuatro puertas que no esperabas

Primero: la ruta que te fascinó, ahora con las animaciones clave — el vaso llenándose, los estados caliente/frío y la cuenta atrás. Después: cuatro direcciones deliberadamente raras para abrir el mapa antes de cerrar la decisión. Todas viven dentro del mismo territorio (ritual y tiempo), pero cada una lo ataca desde un ángulo distinto.

Ruta 02 · Evolución — Tregua Motion Lab
TREGUA
Tres principios de movimiento para que la disciplina visual no se quede quieta: 1) el líquido es el único elemento orgánico permitido — todo lo demás se mueve en pasos secos, sin easing blando; 2) la temperatura cambia el sistema entero (acento, copy, física), no solo un icono; 3) el tiempo nunca se anima con decoración — un segundo es un golpe seco de tipografía.
Nota técnica: todo lo que ves es CSS/JS estándar (transform, clip-path, keyframes). En Flutter/React Native se replica con shaders simples o Lottie; el llenado con onda es un sine wave de 2 capas, barato en GPU.
Física
Líquido: onda senoidal 2 capas, 2.6s/3.9s desfasadas
Vapor
3 volutas, blur 2px, ciclo 2.3s, desfase 0.4s
Frío
Acento #D6482F → #56C8E8 · cubos con balanceo 2.8s · condensación
Tiempo
Dígito nuevo = scaleY 1.25 → 1 en 180ms, sin rebote
A · Preparación — el vaso se llena en tiempo real
11:11
EN PREPARACIÓN · BIANCHI · BARRA · NO HACE FALTA QUE CORRAS · EN PREPARACIÓN · BIANCHI · BARRA · NO HACE FALTA QUE CORRAS ·
0%
CORTADO · EXTRACCIÓN EN CURSO

Bianchi

Verdi 9 · te esperan a las 11:15

240 m
Voy tarde — retrasar 10′
B · Temperatura — el sistema entero cambia de estado
11:04
¿Cómo la
quieres?
Caliente
Frío
CORTADO · 68°C · LISTO EN 4′
ESPRESSO TONIC · 4°C · LISTO EN 3′

Cortado

Espresso tonic

Entera · sin azúcar

Tónica · piel de naranja

1,60
3,20
Confirmar
C · La cuenta atrás — un segundo es un golpe
11:11
TREGUA FIJADA · 11:15 – 11:30 · TU SITIO EN LA BARRA ESTÁ GUARDADO · TREGUA FIJADA · 11:15 – 11:30 · TU SITIO EN LA BARRA ESTÁ GUARDADO ·
Alto el fuego en
03:41
EL MUNDO PUEDE ESPERAR 15 MINUTOS

Cortado

Barra · nombre Nizar

1,60

Vaso propio

Descuento aplicado

–0,20

Racha

41 días sin saltarte la pausa

▲
Ya estoy aquí
Romper la tregua (cancelar)
Sorpresa 01 — Andén
ANDÉN
Tu café tratado como un tren que sale a su hora. La pantalla principal es un tablero de estación (split-flap Solari): destino, vía, hora, estado. Reservar una franja se convierte en «coger el de las 11:15», y perderla tiene la misma micro-dramaturgia que perder un tren — el tablero gira y tu fila desaparece.

Es la metáfora más pura del territorio tiempo: las estaciones son el único sitio donde mirar un reloj es un placer. Y el split-flap da una firma sonora y visual instantáneamente reconocible en notificaciones.
Riesgo: la metáfora exige compromiso total (copy ferroviario, sonido de aleteo, vías por barra/sala/terraza). Sin ese compromiso queda en gimmick. El tablero denso también complica la accesibilidad — necesita un modo lista plano.
Paleta
Tipos
IBM Plex Mono (tablero) + Archivo Narrow (títulos)
Firma
Flip de 140ms por celda, cascada de 40ms — también en push notifications
Demo · El tablero vive — espera y verás girar las letras
11:11
Salidas
· Gràcia
4 cafeterías en un radio de 800 m
HoraDestinoVíaEstado
↳ El de las 11:15 es el tuyo. Sale de Bianchi, vía barra.
↳ Sincronizado con Reserve with Google.
Coger el de las 11:15
Sorpresa 02 — Marea
Marea
Aquí no hay un vaso que se llena: la pantalla entera es el líquido. El café sube como una marea por detrás de la interfaz — al 100%, la pantalla está llena y tu bebida está lista. El progreso no se lee, se siente en la periferia mientras haces otra cosa.

El nombre trabaja solo: la marea sube y baja dos veces al día, sin que nadie se lo pida — exactamente como el ritual del café. Es la ruta más sensorial y la más femenina/orgánica del set, el contrapunto exacto de Tregua.
Riesgo: precioso en la demo, difícil en el día a día — el fondo vivo pelea contra la legibilidad y contra Dynamic Type. Funciona mejor como pantalla de estado (pedido en curso) que como sistema completo.
Paleta
Tipos
Instrument Serif + Inter
Física
Marea: 9s ease-in-out alterno · ola superficial 5s lineal · burbujas 6s
Demo · La marea sube sola — el pedido avanza
11:11
La marea
está subiendo
62%
Tu flat white en Nomad Roasters. Cuando la pantalla se llene, está en la barra.
Nomad · terrazallega 11:15
Sorpresa 03 — Resguardo
RESGUARDO
Toda la app finge ser una impresora térmica. Cada acción imprime: pides y sale un ticket, reservas y sale un ticket, completas la tarjeta de sellos y sale un ticket dorado. La fidelización deja de ser una barra de progreso y pasa a ser una colección física de resguardos que puedes hojear.

Por qué abre la mente: invierte la lógica de las apps —que borran toda huella— y convierte cada pausa en un objeto con fecha y hora. Nadie en la categoría tiene esta textura.
Riesgo: el esqueumorfismo cansa si se aplica a TODO (ajustes, login…). Funciona si el ticket se reserva para los momentos que importan: pedido, canje, récord. Y «Resguardo» es largo — como marca quizá se acorta a «Resg.» o pivota a «Ticket».
Paleta
Tipos
IBM Plex Mono en cuerpo ticket · Archivo Narrow en máquina
Firma
Impresión a tirones (steps + cubic-bezier), 3.2s · borde troquelado
Demo · Pulsa «reimprimir» para repetir la animación
11:26
Resguardo · nº 143
TU PAUSA
22 JUL 2026 · 11:15
1x CORTADO1,60
   ENTERA / SIN AZÚCAR
VASO PROPIO-0,20
LOCALBIANCHI
VÍABARRA
SELLO8 DE 10
RACHA41 DÍAS
TOTAL1,40 EUR
GRACIAS POR PARAR
↻ Reimprimir
Sorpresa 04 — Termo
TERMO
La idea más rara del set: la app ve tu bebida como una cámara térmica. Todo gira en torno a un dato que ninguna app de café usa y todo el mundo sufre: la temperatura. «Tu cortado acaba de bajar de 65° — bebible» es una notificación con más valor real que cualquier «¡tu pedido está listo!».

Caliente y frío no son estados estéticos sino el producto entero: magma para caliente, glaciar para frío. Une el territorio ritual/tiempo con un beneficio funcional medible (el minuto exacto en que el café está en su punto).
Riesgo evidente: la temperatura real habría que estimarla con un modelo (bebida, vaso, ambiente), no medirla — hay que ser honestos en el copy («estimación») o pierde credibilidad. Visualmente es potente pero nocturno; costaría venderla a cafeterías luminosas.
Caliente
Frío
Tipos
IBM Plex Mono (lecturas) + Archivo Narrow
Firma
Blobs en mix-blend screen + retícula de visor · transición térmica 1s
Demo · La lectura baja en vivo — prueba el modo frío
11:19
FLIR·CAFÉ v2
71.2°OBJETIVO: CORTADO
BIANCHI / BARRA
ESTIMACIÓN · VASO CERÁMICA
Aún quema
Bebible en ~2 min · te avisamos al llegar a 65°
▲ 71.2°
CALIENTE
FRÍO
Avisarme cuando esté en su punto
Cómo leer esta fase: Tregua sigue siendo la candidata — las tres pantallas de arriba son su lenguaje de movimiento oficial. Las cuatro sorpresas no compiten como marcas completas: son provocaciones. Lo honesto es decirte que de ellas hay dos con futuro real como features dentro de Tregua — el tablero split-flap de Andén como pantalla de estado, y la lectura térmica de Termo como notificación estrella («bebible ya») — y dos que son sobre todo gimnasia mental (Marea, Resguardo). Cuando decidas dirección, la fase 03 es el sistema completo al detalle: onboarding, tokens, componentes, estados de error, notificaciones y sonido.