Maki Birthday Surprise

Un regalo de cumpleaños privado, entregado como una microsite animada de seis escenas que guía a un único visitante desde una pantalla de inicio para pulsar y empezar, pasando por una cuenta atrás con tarta y una carta personal, hasta un final con polaroids. ClarroxWeb la construyó íntegramente con HTML, CSS y JavaScript: sin framework, sin paso de compilación, sin base de datos, desplegada mediante una única subida por FTP.

Desafío

Easther quería hacer un regalo de cumpleaños que se sintiera diferente a una tarjeta o un vídeo. Algo por lo que la persona destinataria pudiera moverse, con lo que pudiera interactuar y que pudiera recordar. El briefing tenía precisión emocional: la experiencia debía conectar con una persona concreta en un día concreto, con una estética inspirada en Zootopia, una carta sincera y tres fotografías personales.

• Un solo público, sin margen de error. A diferencia de una web de marketing, esta tenía que funcionar para una única persona destinataria en un único dispositivo. Problemas de rendimiento, animaciones rotas o un punto de pulsación torpe arruinarían el momento.
• Restricciones de reproducción automática en móvil. Los navegadores bloquean que el audio se inicie por sí solo. La revelación debía sentirse cinematográfica de todos modos, así que la música, el momento y la primera interacción tenían que coincidir en la misma pulsación.
• Entrega a una persona no desarrolladora. Easther, quien hace el regalo, es futura estudiante de informática. Quería poder cambiar fotos, editar la carta o cambiar la fecha más adelante sin ayuda. El código tenía que ser lo bastante legible para que ella misma pudiera adaptarlo.

Enfoque

Tratamos el sitio como un cortometraje de seis actos. JavaScript se encarga de una sola tarea: cambiar qué escena está visible. CSS hace el resto, incluyendo la salida de la luna, la entrada de los personajes, el rebote de la tarta, el parpadeo de la vela, la apertura del sobre y la caída de las polaroids en su sitio. Mantener la lógica de animación en CSS hizo que el ritmo fuera predecible y el código fácil de leer.

La narrativa fluye a través de una escena de inicio, un encuentro de personajes, un momento de destello y polaroid, una escena de tarta con un saludo escrito a máquina y una cuenta atrás 3-2-1, un sobre que se abre y revela una carta completa, y un final con polaroids y una despedida escrita a máquina. Cada escena cambia con una sola pulsación, reflejando el ritmo con el que la persona destinataria avanzaría de forma natural.

El manejo del audio fue deliberado. El sitio busca un archivo opcional music.mp3 y recurre a un suave bucle de caja de música sintetizado en directo en JavaScript si el archivo no está. La música arranca silenciada, ya que los navegadores bloquean la reproducción automática, y se activa con la primera pulsación, que es también cuando comienza la experiencia. Un parámetro de URL ?scene=cake permite a quien hace el regalo saltar directamente a cualquier acto para hacer pruebas sin pasar por todo el recorrido.

El sitio completo se entrega como un único index.html, una hoja de estilos, un script y una carpeta con arte de personajes en PNG transparente y tres fotografías polaroid. Sin framework, sin pipeline de compilación, sin Node, sin base de datos. El README guía a quien hace el regalo a través del despliegue mediante FileZilla y el cambio de contenido (nombres, fechas, fotos, texto de la carta) editando uno de tres archivos.

Resultados

• Un regalo que la persona destinataria puede volver a reproducir, no un vídeo de una sola vez perdido en un hilo de chat, con seis escenas a un ritmo que se siente como un cortometraje
• A prueba de futuro por diseño, sin dependencias que puedan quedar obsoletas o romperse, de modo que el sitio sigue en línea mientras el dominio siga vivo
• Se siente nativo en el teléfono de la persona destinataria, con encuadre vertical, ritmo por pulsación y audio que respeta las reglas de reproducción automática del navegador sin necesidad de resolver problemas
• Quien hace el regalo puede editar el contenido por su cuenta, cambiando nombres, fotos, fechas o el texto de la carta en uno de tres archivos, sin CMS ni desarrollador
• Cero coste recurrente para quien hace el regalo, con una única subida por FTP y sin cuentas, dependencias ni vencimientos que gestionar después

Herramientas utilizadas

HTML, CSS, JavaScript, Web Audio API