Día de la Primavera para Melissa — Caso de Estudio

Demo Interactiva

La página original funcionando, embebida. Elige uno de los tres botones: oculta a los demás y revela una flor o un jardín, seguido de una frase aleatoria escrita para ella. Reábrela varias veces: cada visita es un pequeño momento distinto, cada uno pensado para Melissa.

Extras — Detalles para Amigos

Como ese detalle le gustó y quise compartir algo parecido con mis amigos, creé Template.html: una base con una flor reutilizable. De ahí hice cuatro variaciones individuales, cada una para una persona distinta. Pero todo empezó con la de Melissa, y ese mismo template lo reutilicé después para el proyecto de Alejandra.

1. Descripción General

Para ella: Melissa, alguien muy especial para mí. Un proyecto personal, hecho desde el cariño y pensando por completo en ella, para el Día de la Primavera (México, equinoccio de marzo de 2026). Cada píxel, cada flor, cada palabra está ahí con un solo motivo: que se sienta querida.

El porqué: Quería regalarle algo que durara, algo que no se marchitara — "flores que no mueran" — porque nada genérico ni comprado captura lo que siento por ella. Buscaba que pudiera abrirlo y reabrirlo cuando quisiera y sintiera, en cada ocasión, un momento pensado y único para ella, como si el cariño floreciera de nuevo cada vez.

La idea: Una página que es el regalo mismo y no pide explicación. Tres botones deciden la escena (una flor, tres flores, o la primavera entera) y, al elegir, los botones se ocultan y aparece una frase aleatoria de diez que le escribí pensando en lo que la hace especial. Solo hace falta un toque, y el resto lo hace el sentimiento.

Lo que sentí: Una experiencia que se completa en un gesto: elegir un botón, ver florecer la escena y leer algo escrito para ella. Tres botones, diez frases y un solo propósito — que Melissa sepa lo mucho que la quiero. Hecho sin dependencias, de carga instantánea y prioridad móvil, porque el regalo tenía que abrirse fácil, donde ella estuviera.

Anécdota: De este proyecto personal nació Template.html, la base con la que quise compartir un poco de esa misma magia con mis amigos (los Extras) y que después reutilicé en un encarg, la página del Día del Maestro para Alejandra.

2. Arquitectura

Visión General

Arquitectura estática pura. No hay backend, base de datos ni build tooling: un único archivo HTML con todo el CSS y JS inline, servido tal cual. Toda la lógica corre en el navegador como un pequeño estado (qué botón se eligió) que oculta la interfaz e inyecta la escena y la frase.

┌─ Navegador (self-contained index.html) ────────────────────┐
│  HTML + CSS (flores clip-path/keyframes) + JS (aleatorio)    │
│        │               │                                      │
│        └──▶ [idle] 3 botones ──▶ elegir ──▶ ocultar botones   │
│                                                  │            │
│   botón 1 ─▶ 1 flor (4 tipos aleatorios)         │            │
│   botón 2 ─▶ 3 flores                             │            │
│   botón 3 ─▶ explosión "jardín infinito"          │            │
│                                                  │            │
│        └────────────────────────────▶ frase aleatoria (array 10)
└───────────────────────────────────────────────────────────────┘

Flujo de Interacción

1. Carga → cielo estrellado con estrellas animadas, 3 botones visibles
2. Click/tap en un botón → escoge la escena (1 flor, 3 flores, explosión)
3. Botones se ocultan (clase de estado) → las flores florecen con CSS
4. Tras la animación → aparece una frase aleatoria del array de 10

Separación de Responsabilidades

3. Tecnologías y Justificación

Estructura y Estilos

• HTML5 + CSS3 (zero framework): Las flores se modelan con CSS puro: clip-path para pétalos, keyframes para florecer y respirar, unidades vmin para escalar con la ventana y preserve-3d para los girasoles con volumen. Un framework añadiría peso sin beneficio en un único render.

Interacción

• Vanilla JavaScript: Sin estado global ni librerías. Unos listeners en los tres botones eligen la escena, ocultan la interfaz y, al terminar la animación, inyectan una frase del array.
• Aleatoriedad: Math.random() selecciona el tipo de flor (de cuatro) y la frase (de diez) de forma independiente, lo que hace cada visita distinta y rejugable.

Despliegue

• Archivo único self-contained: Todo inline, por lo que funciona offline y se compartió como detalle sin servidor. En el portafolio se aloja en public/tomeliss/ y se embebe por iframe.

4. Capturas de Pantalla

Próximamente: capturas de la escena inicial con el cielo estrellado, cada una de las tres escenas (una flor, tres flores, explosión) y el mensaje final. Mientras tanto puedes usar la demo interactiva de arriba.

5. Problemas Encontrados

6. Decisiones Técnicas Clave

7. Aprendizajes

• Un regalo técnico personal es íntimo sin ser complejo. No hace falta un sistema grande para conectar: empieza por la persona, no por el stack. Pensar en Melissa es lo que hizo que cada flor y cada frase fueran para ella.
• La aleatoriedad es el re-juego. Flor y frase distintas por carga invitan a reabrir el detalle y sentir que fue pensado en cada ocasión.
• CSS puro basta para arte generativo. Con clip-path, keyframes y vmin se pueden crear flores expresivas y animadas sin una sola dependencia.
• El cariño está en el contenido, no en el stack. Las frases dedicadas son el regalo; la tecnología es solo el envoltorio.
• Una plantilla nacida del cariño se reutiliza. DeTemplate.html, creado para compartir alegría, nacieron cuatro detalles para amigos (los Extras) y más tarde el proyecto de Alejandra. Lo importante fue lo que se quiso transmitir.

8. Documentación Técnica del Proyecto

La demo principal es la página original, alojada en el portafolio. De su base reutilizable (template.html) derivan los cuatro extras para amigos y, después, el proyecto de Alejandra.

• Template reutilizable (base de los extras y del proyecto de Alejandra): template.html
• Extras (detalles individuales para amigos): las 4 variaciones enlazadas arriba.