Lofi Cities: la app web que compone música en vivo en tu navegador

Lofi Cities: el fondo animado que nunca repite tema porque compone en tu navegador

Hay una categoría de productos digitales que casi no se habla en el mundillo startup pero que millones de personas usan a diario sin pensar en el stack técnico: los ambientes para concentrarse. Lofi Cities, de Safa Elmali, entra de lleno en ese segmento con una idea concreta: cada escena es una animación pixel-art de 480×270 píxeles que loopa sin costuras cada cuatro minutos, y la música no viene de un archivo sino que se compone en vivo en el navegador con la Web Audio API. Chords, batería, bajo y, en muchos casos, melodía, sintetizados en tiempo real sin samples ni grabaciones. Por eso el stream «nunca se agota»: cada track es nuevo.

Lo que diferencia a Lofi Cities de un playlist normal no es sólo la estética pixel-art de 11 ciudades (París, Tokio, Nueva York, Londres, Río de Janeiro, Estambul, Hong Kong, Sydney, San Francisco, Hamburgo y Ámsterdam), sino que cada ciudad tiene su propio clima dibujado (lluvia en la buhardilla parisina, nieve sobre el puente de Brooklyn, niebla en el Támesis) y una capa de sonidos ambientales que se mezcla por debajo de la música. La capa «Vibe» permite cambiar el estilo — jazzhop, piano, ambient, bossa, synth, house, guitarra, sad o medieval — con dos variables extra: Chill / Balanced / Upbeat y Full band / No drums / Chords only.

¿Qué hay debajo del capó técnico?

El detalle que más interesa a un founder no es el dibujo, sino la arquitectura: todo corre en el cliente. No hay backend renderizando audio, no hay CDN sirviendo MP3 de fondo, no hay suscripción mensual. El navegador compone la canción mientras el usuario escucha. Esto significa tres cosas concretas para quien construya productos similares:

👥 ¿Quieres ir más allá de la noticia?

En nuestra comunidad discutimos las tendencias, compartimos oportunidades y nos ayudamos entre emprendedores. Sin humo, solo acción.

👥 Unirme a la comunidad

Coste marginal por usuario cercano a cero. No hay ancho de banda de streaming pesado ni royalties por track. La app puede ser gratis sin pop-ups, sin cuenta y sin cookies, y aun así sostener un modelo de negocio vía vallas publicitarias pixel-art dentro de la escena («cada ciudad tiene una valla en alquiler, con un anuncio local ficticio hasta que un negocio la ocupe», según explica el propio sitio).
Funciona offline una vez cargado. El sitio describe que «abrirlo una vez online lo mantiene funcionando sin conexión, con cada ciudad y la música incluidas, ya que ambas se generan en el navegador». Eso convierte a Lofi Cities en un PWA práctico sin que el usuario tenga que pensarlo: Add to Home Screen en iPhone/iPad o Install en escritorio.
Es instalable como mini-player flotante con la tecla P, lo que mantiene la escena en picture-in-picture sobre otras apps — útil para streamers en OBS añadiendo la URL de la ciudad con el parámetro ?obs (p.ej. https://loficities.com/tokyo/?obs) y controlando audio desde la propia mezcla.

El Web Audio API no es nuevo (lleva una década en navegadores modernos), pero su uso creativo sigue creciendo. Lofi Cities lo aprovecha para sintetizar Rhodes, piano de fieltro, pads cálidos, guitarra nylon y hasta laúd con flauta, todo con tape wobble y vinyl crackle aplicados en tiempo real. Es el mismo tipo de motor procedural que, según describe CreativeApplications.Net en su cobertura del proyecto mur mur del estudio oio (presentado en junio de 2026), está redefiniendo los dispositivos de sonido ambiental: «mundos diminutos dentro de un altavoz» con clima, agentes y narrativa generativa en lugar de pistas pregrabadas.

Funciones que parecen pequeñas y ahorran dinero

Para un founder acostumbrado a pelearse con el churn, el diseño del producto tiene varias decisiones inteligentes que vale la pena mirar de cerca:

City Tour cambia de ciudad cada 5, 10, 15 o 30 minutos, o bien «sigue la noche» para mostrar la ciudad más cercana a la 1 am local, moviéndose de oeste a este. Ciudades en el mismo huso (París, Hamburgo y Ámsterdam) se turnan, evitando que el algoritmo repita obviedad.
El contador «aquí ahora» bajo el nombre de la ciudad muestra cuántos navegadores están escuchando, cuántos están en tu ciudad y cuántos pasaron desde tu medianoche local. Todo anónimo, sin chat, sin cuentas, sin cookies: sólo un id aleatorio en el local storage del navegador que el servidor olvida ~25 horas después de la última visita.
El temporizador Focus corre 25/5 o 50/10 en bucle con un timbre suave al descanso; el sleep timer atenúa música y sonidos entre 15 y 90 minutos y luego pausa. Un Pomodoro gratis integrado en una app de ambient.
Together permite soltar una linterna (L) que sube por el escenario o un emoji — corazón, nota, estrella o luna — que se eleva desde el punto exacto donde se hace clic. Lo que ven los demás coincide: la linterna aparece en la misma posición y permanece en el aire aunque el espectador se incorpore tarde.

¿Qué significa esto para tu startup?

Más allá del caso de uso obvio (dejarlo sonando de fondo mientras escribes un deck o codeas), Lofi Cities deja tres patrones reutilizables para productos hispanohablantes que quieras construir esta semana:

Audio procedural = ventaja de costes. Si tu producto necesita música, sonidos o voces, plantéate si la Web Audio API o una librería como Tone.js resuelven sin pagar licencias ni CDN. Especialmente en LATAM, donde cada MB de streaming cuenta para usuarios con datos móviles limitados.
Lo gratis con vallas puede sostener un negocio. La valla publicitaria pixel-art por ciudad es un ad unit integrado en la estética que no rompe la experiencia. Si tienes un SaaS B2B o una cafetería / estudio / marca local que quiere visibilidad en un público pro, este formato puede funcionar.
Privacidad por defecto como argumento de marca. Cero cookies, cero cuentas, local storage para preferencias. Para un mercado europeo cada vez más sensible a GDPR o para consumidores mexicanos y argentinos recelosos del rastreo, el «no te rastreamos» puede ser posicionamiento, no sólo cumplimiento.

Acción concreta 1: prueba hoy mismo el patrón

Abre loficities.com/paris/, pulsa F para pantalla completa y H para ocultar la interfaz. Observa la carga de CPU en el administrador de tareas: si tu laptop aguanta una animación 480×270 + síntesis de audio en tiempo real, te está diciendo que tú puedes construir una experiencia análoga con HTML Canvas + Web Audio API + un Service Worker para offline — y venderla a coste cero de infraestructura.

Acción concreta 2: monetiza la atención sin romper la calma

Si tu proyecto creativo o de productividad tiene una comunidad, diseña un ad unit integrado. La valla pixel-art de Lofi Cities es la prueba de que se puede cobrar a un negocio local (cafetería, estudio, tienda) por aparecer en un ambiente que los usuarios ya quieren tener abierto — sin pop-ups ni intersticiales. Piensa en presupuestos pequeños, del orden de USD 20–100/mes por valla en una sola ciudad, y en cómo escalar a 11 ciudades.