Para-ti

Para-ti — animaciones florales

Cuatro páginas de regalo, una por persona. Cada persona solo conoce su propia ruta. No existe un índice en la raíz que las enlace: es a propósito.

Rutas y URLs

Persona	Archivo	URL pública	Estado
emil	`/emil/index.html`	https://tommyrg04.github.io/Para-ti/emil/	✅ lista
emil (corazón)	`/emil/corazon/index.html`	https://tommyrg04.github.io/Para-ti/emil/corazon/	✅ lista
emil (reset)	`/emil/reset/index.html`	https://tommyrg04.github.io/Para-ti/emil/reset/	✅ lista
emil (nota)	`/emil/nota/index.html`	https://tommyrg04.github.io/Para-ti/emil/nota/	✅ lista
emil (nosotros)	`/emil/nosotros/index.html`	https://tommyrg04.github.io/Para-ti/emil/nosotros/	✅ lista · QR en `/emil/nosotros/qr-emil.png`
emil (el día)	`/emil/el-dia/index.html`	https://tommyrg04.github.io/Para-ti/emil/el-dia/	✅ lista, con música
emil (capítulo uno)	`/emil/capitulo-uno/index.html`	https://tommyrg04.github.io/Para-ti/emil/capitulo-uno/	✅ lista, con música
emil (flores amarillas)	`/emil/flores-amarillas/index.html`	https://tommyrg04.github.io/Para-ti/emil/flores-amarillas/	✅ lista, con música
emil (90 días)	`/emil/90-dias/index.html`	https://tommyrg04.github.io/Para-ti/emil/90-dias/	✅ lista, sin sonido
imanol	`/imanol/index.html`	https://tommyrg04.github.io/Para-ti/imanol/	⛔ pendiente (archivo aún no está en el repo)
clarett	`/clarett/index.html`	https://tommyrg04.github.io/Para-ti/clarett/	⛔ pendiente (archivo aún no está en el repo)
mama	`/mama/index.html`	https://tommyrg04.github.io/Para-ti/mama/	⛔ pendiente (archivo aún no está en el repo)
evianny	`/evianny/index.html`	https://tommyrg04.github.io/Para-ti/evianny/	✅ lista

Como cada carpeta tiene index.html, la URL funciona sin escribir el nombre del archivo.

El repo se renombró de plantillas a Para-ti. Eso cambia la URL pública: ahora es https://tommyrg04.github.io/Para-ti/.... El remoto de git local sigue apuntando al nombre viejo a propósito: GitHub redirige los renombres indefinidamente y ese remoto es el que tiene permitido esta sesión.

Activar GitHub Pages (una sola vez)

El repo tiene que ser público. En repos privados, Pages exige plan de pago (GitHub Pro/Team) y muestra un aviso de cobro. Settings → General → abajo del todo, Danger Zone → Change repository visibility → Change to public.
Repo → Settings → Pages (menú izquierdo).
Source: Deploy from a branch.
Branch: main — Folder: / (root) → Save.
Esperar 1–2 min. La primera publicación tarda; las siguientes son casi inmediatas (30–60 s tras cada push).

No hace falta Vercel ni ningún build: son archivos estáticos puros.

Consecuencia de ser público: cualquiera que llegue al repo ve las cuatro carpetas y sus mensajes. La regla de “cada persona solo conoce su ruta” aplica a los links que repartes, no al repo. Nadie va a tropezarse con él por casualidad, pero no es secreto.

Qué contiene cada página

emil — vertical (iPhone)

Jardín nocturno azul. Fondo radial-gradient en tonos petróleo.

120 estrellas (divs) titilando, distribuidas en el 72 % superior.
16 luciérnagas que ascienden en diagonal.
90 briznas de hierba dibujadas con stroke-dasharray.
6 plantas sobre tallos curvos (path con Bézier):
- 2 hortensias (laterales, x≈46 y x≈362): domo de 68 flores en 3 capas (22 de fondo oscuro + 30 medias + 16 frontales) repartidas con espiral de Fibonacci; cada flor son 4 sépalos ovalados solapados.
- 2 lirios azules y 2 lirios blancos: 3 tépalos externos + 3 internos con pecas, 6 estambres con antera y pistilo.
Aura de respiración detrás de cada flor y 5 chispas por flor que suben en bucle.
Mensaje arriba, “te quiero” y firma Para: Emil / De: T.
viewBox="0 0 400 560", preserveAspectRatio="xMidYMax slice" (el suelo siempre pegado abajo).

emil / corazón — vertical (iPhone), interactiva

Corazón de polvo de luz, en la misma paleta que el jardín para que las dos páginas de Emil se lean como una pareja: mismo degradado azul petróleo con el resplandor abajo, luciérnagas, misma tipografía cursiva y misma firma.

No arranca sola. Pantalla inicial: una luz azul latiendo + la pista «toca la luz» (<button> a pantalla completa, así también funciona con teclado).
Al tocar: estalla en 54 chispas y ~640 partículas llegan volando desde fuera de pantalla y se ensamblan en el corazón.
- 340 en el contorno (170 por mitad, repartidas a distancia igual con getPointAtLength sobre una guía invisible que después se borra).
- 300 de relleno, por muestreo por rechazo con test de punto-en-polígono contra la silueta — evita la costura vertical que salía al repartirlas por ángulo.
Tonos de las partículas tomados del jardín: lirio blanco, lirio azul, hortensia y oro de estambre como acento.
No hay latido. En su lugar, una onda de luz recorre el corazón de la punta de abajo hacia arriba: todas las partículas comparten periodo (4.2 s) y solo cambia su fase según la altura.
Tres capas de profundidad: polvo ambiental de fondo, el corazón, y polvo desenfocado en primer plano (fuera del grupo del corazón, para que tenga paralaje).
Ninguna luz que no sea una partícula: no hay aura ni resplandor central.
Contador desbocado bajo «Como crece mi amor por ti» (requestAnimationFrame, +1.400–4.200 por frame, no se detiene nunca).

emil / reset — «Emil’s Reset», vertical (iPhone), interactiva

Un rincón para un día pesado. Rompe con la estética de las otras dos a propósito: aquí es luz de día — crema, azul muy suave, gris cálido y detalles rosados, con mucho aire. Registro Apple/Aesop, no nocturno.

Tipografía del sistema, sin CDN: ui-serif (New York en iPhone) para las frases que pesan y -apple-system (SF Pro) para el resto. En regular, nunca negrita: la serif en bold rompía el tono.
Portada a pantalla completa con entrada escalonada (0.3 → 2.75 s) y botón «Entrar». Al pulsarlo se funde y escala levemente hacia la experiencia.
Secciones: cabecera, respiración, carta, «Prescription for today» (4 tarjetas), frase especial y abrazo final.
Círculo de respiración: ciclo de 11 s (4.4 s inhalar, 1.3 s sostener, 4.4 s soltar). Dentro del círculo alterna «Inhala» / «Suelta», sincronizado con el mismo ciclo por desfase de keyframes, sin JS.
Entradas por sección con IntersectionObserver (umbral 0.16). Al reiniciar se vuelve a observar todo, así que la segunda vuelta se anima igual que la primera.
Abrazo: tres ondas concéntricas que se expanden y el mensaje que sube; después aparece «Volver a empezar», que rebobina el abrazo, limpia las entradas, sube el scroll y devuelve la portada reiniciando sus animaciones con un reflujo forzado.
Auras de color con degradados radiales sobre una capa fija con deriva de 46 s. Nada de filtros.
Foco gestionado al entrar y al reiniciar; :focus-visible en todos los botones.

evianny — «EVIANNY.EXE», amistad, mobile-first

Único directorio con varios archivos: index.html, estilos.css, guion.js. Sigue sin build ni dependencias — abriendo el HTML directo funciona igual.

Por qué no React/Vite/Tailwind: se pidió «si el proyecto ya tiene estructura, respétala». Este repo es estático sobre GitHub Pages y su regla nº 1 es sin build. Meter Vite obligaría a compilar en cada ajuste y a publicar un dist/. Se conservó el espíritu del encargo con archivos separados y todo el contenido repetitivo en arrays al principio de guion.js (PALABRAS, ENCANTAN, HITOS, MEDIDORES, SALIDAS_EXE, KIT, RECUERDOS) — para cambiar textos se tocan solo esos arrays.

Sin módulos ES: abriendo por file:// el navegador bloquea los import por CORS, así que guion.js es un IIFE cargado con <script src>.
Todo en español, incluidos los rótulos del panel de sistema. Concordancias revisadas: él escribe, ella lee («Estoy estresada» es de ella).
Paleta: blanco cálido #FCFAFA, gris claro, negro suave #141214, carbón y acento rosa cálido #C0798F — el toque para ella. El azul frío #7E96AC queda reducido al marco del panel .exe, que es lo que mantiene el conjunto sobrio. Tipografía del sistema (SF Pro en iPhone) + monoespaciada para la parte de «sistema operativo».
Pensada para leerse rápido: ~6.360 px de alto (unas 7,5 pantallas de iPhone). Se recortó a 6 tarjetas en «Cosas que me encantan» y 6 cápsulas en recuerdos.
Señalización de toques. Evianny no había abierto nunca una página así, así que dónde tocar se dice, no se insinúa — pero con el mismo lenguaje visual, sin emojis: una insignia rosa «TOCA» en la primera tarjeta de cada grupo, que desaparece en cuanto abre una, y una píldora idéntica de sección («TOCA PARA ABRIR», «TOCA EL QUE NECESITES»). El «+» va en color de acento desde el principio para leerse tocable, y el botón de ejecutar lleva «▶». El reinicio devuelve todas las pistas.
Progreso vertical: un hilo fino en el borde derecho que se llena de arriba abajo con el scroll (scaleY), en vez de la barra horizontal superior — así indica avanzar hacia abajo, que es lo que hay que hacer.
11 tramos: intro con puerta, mensaje inicial, «Tú y yo somos…» (píldoras), «Cosas que me encantan» (8 tarjetas desplegables), expediente (línea de tiempo), EVIANNY.EXE (panel con medidores y consola), kit de emergencia (4 desplegables), recuerdos (cápsulas), sección oscura, mensaje final y tarjeta de amistad.
Plegables con altura medida: se lee scrollHeight real en vez de un max-height inventado, así la animación acaba exacta y se recalcula al girar el teléfono.
La consola de .exe nunca repite el mensaje anterior seguido y guarda 4 líneas como tope.
Sin música: se quitó a petición. No queda botón, ni <audio>, ni CSS ni JS.
Barra de progreso de lectura arriba, con el scroll leído en requestAnimationFrame.
«Volver a empezar» rebobina todo: cierra plegables y tarjeta, limpia la consola, quita las entradas, sube el scroll y reinicia la intro con un reflujo forzado.

emil / nota — tarjeta de florería con ramo, una sola pantalla

La más corta de todas: no tiene scroll, cabe entera en la pantalla.

Ramo de lirios orientales rosas dibujado en SVG, siguiendo la foto de referencia: 8 lirios abiertos, 5 capullos, hojas, verde plumoso y papel de envolver. Florece de dentro hacia fuera al cargar.
Cómo se construye un lirio: 3 tépalos externos estrechos por detrás y 3 internos anchos delante. Cada tépalo interno lleva tres capas — la forma pálida, una banda rosa que se apaga hacia la punta y las pecas de la garganta. El color no está en el relleno del pétalo sino en la banda: así es como se ve un lirio oriental de verdad. Encima, 6 estambres curvos con antera color óxido, pistilo y garganta verde.
El papel son lóbulos redondeados generados por panel(ángulo, largo, ancho) desde el punto del atado. Va corto y tenue, como un cuello por detrás.
Relleno entre flores: hojas apretadas detrás del ramo más un degradado radial que se desvanece. Es lo que evita que los huecos entre tépalos se vean blancos.
740 nodos SVG. Sin filtros: todo el volumen sale de degradados y solapamiento.

Intentos descartados, para no repetirlos:

Rosas de elipses sueltas y planas: se leían como margaritas de clipart. Se arregló dando a cada flor una masa de fondo y coronas de pétalos superpuestos con degradado.
Un óvalo de sombra colocado antes que las flores: se veía como un disco pálido rodeando el ramo.
Papel como embudo de lados rectos: parecía papiroflexia.
Lóbulos de papel frontales y largos: formaban un corazón rosa en mitad del ramo.
Un óvalo verde oscuro sólido detrás: con las rosas funcionaba porque lo tapaban, pero los lirios dejan huecos entre tépalos y se veía un manchón negro.
- Techo conocido: esto es una ilustración, no una foto. Si en algún momento se quiere el aspecto literal de la fotografía, el camino es incrustar una imagen propia en /emil/nota/, no seguir refinando el SVG.
- Formato de nota de florista: papel crema, serif del sistema (New York en iPhone) para el mensaje y sans letterspaced para los rótulos.
- Al tocar «toca para abrir la nota», las dos caras se cruzan y las tres líneas entran escalonadas (0.3 / 1.05 / 1.8 s), luego el filete y la firma (2.9 s).
- Un solo archivo. Sin scroll, sin reinicio: se lee y ya.

emil / nosotros — cifras que suben, vertical (iPhone)

Página traída ya hecha desde fuera y subida tal cual: no se tocó ni un texto.

Va por beats: cada toque (o Espacio / Enter / →) pasa al siguiente. Hay un candado de 650 ms para que un toque doble no salte dos.
Los números suben contando con easing cúbico — 1 s, o 1,5 s si la cifra pasa de 100.
El último beat esconde la pista y le pone florece al body.
Todo va dentro del archivo: un <style>, un <script> sin src y el fondo como data:image/jpeg;base64 (~214 KB). Cero peticiones de red — se abre con doble clic desde el disco igual que desde Pages.
Fuentes del sistema (Georgia / Times / serif), 100svh y safe-area-inset para iPhone.
Con prefers-reduced-motion: reduce los números salen directo en su valor final.

emil / el día — «Ayer», vertical (iPhone), con música

La del día que se vieron por primera vez. Misma mecánica que /emil/nosotros/: seis beats y cada toque pasa al siguiente. Paleta cálida, al revés que la otra, que era noche azul.

La música es carino.mp3, al lado del index.html: 75 s recortados de la canción (del segundo 3 al 78, que es donde arranca de verdad y antes del cambio de sección), 128 kb/s estéreo, 1,2 MB, con un fundido de 2,5 s al final para que el bucle no dé un corte seco. Es el único archivo externo; lo demás va dentro del HTML. Si se borra, la página sigue funcionando: el botón de sonido no aparece y ya está.
No puede sonar sola. Los navegadores lo prohíben, en iPhone siempre. Arranca con el primer toque, el mismo que pasa de beat, y sube de 0 a 0,55 en 2,6 s.
Botón de sonido visible arriba a la derecha, con un aviso que se va a los 5 s: si el iPhone está en silencio la música no suena y no hay forma de saltárselo, así que al menos tiene que entenderse que hay música.
La luz del fondo son tres degradados radiales moviéndose en 26 s (solo transform). El grano es un mosaico PNG de 64 px repetido, no un feTurbulence a pantalla completa, que al rasterizar pesa muchísimo.
100svh, safe-area-inset y prefers-reduced-motion: reduce.

emil / capítulo uno — la del noviazgo, vertical (iPhone), con música

La del día que se hicieron novios. Once pantallas, un toque para avanzar.

El concepto: un hilo de luz en el margen izquierdo que se va dibujando con cada toque, y tres zonas — ANTES (se estaban conociendo), HOY (se vieron y dejaron de ser «algo»), DESPUÉS (lo que falta). El hilo va tenue en el antes, encendido en el hoy y, al final, sigue bajando sin terminar. No es adorno: es lo que cuenta la página.

El hilo crece con transform:scaleY y el punto con translateY, los dos con transición; nada de animar alto ni top.
El destello de «Ya somos nosotros» es un radial que sube de opacidad y escala solo en esa pantalla. Es el único momento con brillo fuerte, para que pese.
El contador arranca del instante exacto en que empezaron y corre en vivo. Es la sorpresa: cada vez que abra el enlace el número es otro. La fecha está en una sola línea al principio del <script>, marcada con un comentario.
Cristal (backdrop-filter) solo en dos tarjetas pequeñas, la carta y el contador — a pantalla completa sería caro. Lleva respaldo con @supports para el navegador que no lo tenga.
Tipografía del sistema (SF Pro en iPhone): cero bytes de descarga y es exactamente la que hace que se vea como una app de Apple.
Fondo: dos degradados radiales en deriva de 30 s, un viñeteado y tres puntos de luz. Ni una lluvia de estrellas ni corazones flotando.
Misma música que /emil/el-dia/ (carino.mp3, copia local), con el mismo botón de sonido y el mismo aviso del silencio del iPhone.
Comprobado a 390×844, 360×640 y 1440×900: nada se sale y no hay scroll. En pantalla grande el hilo se recoloca para seguir al bloque de texto centrado.
100svh, safe-area-inset y prefers-reduced-motion: reduce.

emil / flores amarillas — la lluvia, el árbol y el corazón

Una sola escena continua sobre un <canvas>: la lluvia, el árbol y el corazón son las mismas flores moviéndose, nunca hay un cambio de pantalla.

Las flores están dibujadas con código, no recortadas de fotos. Se intentó con recortes de las fotos reales y se descartó: por mucho que se afine la máscara, en una foto de ramo las flores se tocan entre sí y siempre queda algún canto recto. Ahora cada flor se pinta una sola vez en su propio lienzo al arrancar — pétalo a pétalo, con degradado de la base a la punta, nervio de luz y estambres — y la escena solo las estampa. Diez variantes: lirios de seis tépalos, flores de cinco pétalos, hortensias de cuatro, un capullo y un pétalo suelto.

Por qué canvas y no SVG ni divs. Hay hasta 200 flores a la vez, cada una con posición, giro, escala y opacidad propias. Con nodos del DOM eso no va a 60 fps en un teléfono; con drawImage sí. El desenfoque de las que pasan pegadas a la cámara se calcula una vez al cargar, en un lienzo aparte: un filter por fotograma se come la mitad de los cuadros.

Las frases pasan al tocar, no por reloj: Emil las lee a su ritmo, con un «toca para seguir» discreto abajo. Lo único que corre solo es la parte de cine —la lluvia del principio, el árbol y el corazón—, donde no hay nada que leer.

El orden de la película: la lluvia es solo la entrada —cinco segundos, la pantalla entera llena de flores, hasta 300 en el teléfono—; después se para, queda suspendido un puñado lejos del sitio del texto y el resto se retira, para poder leer las cinco frases con calma; y el árbol y el corazón llegan al final, como desenlace. Con las trescientas quietas no había quien leyera nada.

La caída no se corta de golpe: pierde fuerza hasta quedarse quieta. Las que se retiran esperan fuera de cuadro y vuelven a entrar cuando nace el árbol.
El orden por profundidad se recalcula solo cuando alguna flor cambia de plano, no en cada cuadro: con trescientas, ordenarlas sesenta veces por segundo es trabajo tirado.
Las frases se relevan: la que sale tarda 0,55 s y la que entra empieza 620 ms después. Cruzándose se leían las dos a la vez, una encima de otra.
El árbol es recursivo con semilla fija, así que sale igual en cada visita. La profundidad varía de una rama a otra: si todas acaban a la vez, las puntas quedan alineadas y la copa se ve como una franja recta.
El corazón son los puntos de la curva x=16·sen³t, y=13·cos t−5·cos2t−2·cos3t−cos4t, recorridos a paso constante — repartiendo por el parámetro se amontonaban en la punta de abajo. Cada flor sale con un retraso proporcional a su sitio en el recorrido: por eso se ve cómo se traza la silueta y luego se rellena. El relleno lleva distancia mínima entre flores. No hay ningún corazón dibujado de antemano.
Los textos van en el tercio de abajo con un velo degradado: encima de la copa del árbol no se leía nada.
La música se genera con la Web Audio API, sin ningún archivo: un colchón de cuatro voces que va cambiando de acorde cada 8 s —Fmaj9 → Dm9 → Bbmaj7 → C7sus, con glissando de 1,1 s entre uno y otro, que es lo que hace que respire en vez de ser un zumbido fijo— y campanas sueltas encima sobre las notas del acorde de turno. Arranca con el mismo clic que abre el regalo; el ♪ solo sirve para callarla. Medida renderizándola fuera de línea: RMS 0,073–0,094 y pico 0,28, sin saturar.
Tipografías incrustadas y recortadas a las 94 letras que usa la página.
90 KB en total, contra los 944 KB de la primera versión. Cero peticiones fuera del archivo.
Comprobado a 390×844, 360×640 y 1440×900.

emil / 90 días — la conversación entera, dibujada

59.344 mensajes en 90 días, un punto por mensaje, repartidos en 90 columnas —una por día—. El resultado es el perfil real de esos tres meses: se ve julio desbordado, se ven los días flojos y se ve la noche que llegó a las 5:27.

Las cifras salen del export del chat, contadas de verdad. El export no está en el repo y en la página no hay ni una frase de la conversación salvo el primer mensaje de todos, «Hola lindo».

El 19 de septiembre tiene su propio momento. Es el único silencio largo de los 90 días: 23 h 30 min, del 19 a las 14:37 al 20 a las 14:07. Dejaron de escribirse porque estaban juntos. La cámara baja a esa columna, se enciende sola entre las demás apagadas, y entonces sus puntos suben y se abren en flores: lirios azules y hortensias, que son las favoritas de Emil —lo dijo él mismo en el chat el 13 de julio—, dibujadas con código sobre negro y azul.
La música es fondo.mp3: 90 s recortados del segundo 2 al 92 de la canción que eligió Tom, que es donde está la entrada suave, con fundido de entrada de 1,5 s y de salida de 3,5 s para que el bucle no dé un corte. 112 kb/s, 1,2 MB. Arranca con el mismo clic que abre la pieza —el navegador exige un gesto del usuario— y sube de 0 a 0,42 en cinco segundos. El ♪ solo sirve para callarla. Si el mp3 faltara, la pieza funciona igual y el botón no aparece. Antes llevaba una pieza propia generada con la Web Audio API; está en el historial por si se quiere volver a ella.
Los 59.344 puntos se siembran una sola vez en un lienzo aparte y luego se estampan de golpe; dibujarlos uno a uno en cada cuadro no daría 60 fps ni de lejos. Las columnas que se encienden sí se pintan en vivo, que son pocas.
Tipografía del sistema: en su iPhone eso es San Francisco, la de Apple. No se incrusta ninguna fuente — ni 69 KB de descarga ni el parpadeo de la letra cambiando al cargar — y se ve como una app suya. Pesos finos (200 para las cifras grandes, 300 para las frases), tracking negativo en los números y rótulos en 500 muy espaciados. Antes iba con Cormorant Garamond, que además traía cifras de estilo antiguo: el 1 salía como «ı» y hubo que recortar la fuente conservando la tabla lnum. Con la del sistema el problema desaparece solo.
El cierre: tras «90 de 90», los 90 días se levantan y se deshacen —el paisaje sube y se desvanece mientras unos cuantos puntos de verdad se sueltan hacia arriba; un fundido a secas se veía barato— y en la pantalla ya vacía queda «Te amo, mi príncipe». «Mi príncipe» es la frase de Tom: la dice 142 veces en los 90 días y Emil no la usa ni una.
Las frases pasan al tocar. 24 KB, cero peticiones fuera del archivo.
Comprobado a 390×844, 360×640 y 1440×900: 60 fps en los tres.

Fuera del sitio: `/qr-emil/`

La tarjeta de 55×80 mm con el QR que lleva a /emil/nosotros/, con tulipanes, para imprimir y meter en una carta. Hay PDF al tamaño exacto, PNG a 300 ppp y una A4 con 9 para recortar. Dos reglas que no se pueden romper: nada dibujado encima del QR ni de su margen blanco, y el QR va en bitmap y no en vectores (a 0,85 mm por módulo el rasterizador los deja desiguales). Detalles en qr-emil/README.md.

Fuera del sitio: `/carpetas/`

No es una página de regalo — son las cuatro portadas A4 para imprimir de la unidad de legalizaciones (portadas.html + los PNG y el PDF ya exportados). Está en el repo para no perderlas, no para servirlas por Pages. Detalles en carpetas/README.md.

imanol, clarett, mama

Pendientes de subir. clarett será horizontal (PC), las otras dos verticales.

Secuencia de tiempos — emil

Entrada completa: ≈0 → 10 s. Después todo queda en bucle.

t (s)	Qué pasa
0.0	Estrellas empiezan a titilar (bucle 5 s, delay aleatorio 0–5 s)
0.0	Luciérnagas (bucle 13 s, delay aleatorio 0–13 s)
0.0 – 1.0	La hierba se dibuja (cada brizna 1.4–2.2 s, delay aleatorio)
0.0 – 0.7	Los 6 tallos se dibujan (2.4 s c/u, delay `idx × 0.14`)
1.2 – 2.8	Hojas se despliegan (`f.d − 0.9` y `f.d − 0.6`, duración 1.2 s)
2.1	Abre el lirio blanco central (el primero)
2.5	Abre el lirio azul izquierdo
2.75	Abre el lirio blanco derecho
2.9	Abre el lirio azul derecho
3.1	Abre la hortensia izquierda
3.4	Abre la hortensia derecha
3.6	Aparece el mensaje (fade 3 s)
5.6	Emerge “te quiero” (2.6 s, sube 18 px)
7.6	Aparece la firma (2.4 s) → termina ≈10 s

Desglose interno de cada flor, relativo a su d (delay base de la tabla):

Lirio: aura +0 · tépalos externos +0 / +0.1 / +0.2 (2.1 s) · tépalos internos +0.35 / +0.46 / +0.57 · garganta +1.1 · 6 estambres +1.25 … +1.5 · pistilo +1.35.
Hortensia: aura +0 · capa de fondo +0 … +0.9 · capa media +0.25 … +1.15 · capa frontal +0.5 … +1.4 (dentro de cada capa el retraso crece con el radio: abren del centro hacia afuera) · volumen/domo +1.2.
Chispas: arrancan en d + 1.8 + rnd(0–4), bucle de 4.5 s.

Bucles permanentes: mecer 8–10 s (tallos), respirar 6 s (auras), titilar 5 s, flotar 13 s, subirChispa 4.5 s.

Secuencia de tiempos — emil / corazón

Todo cuenta desde el toque, no desde la carga.

t (s)	Qué pasa
0.0	Estalla la luz: 54 chispas salen disparadas (1.1 s)
0.35 – 2.45	Llegan volando las partículas del contorno, de la punta de abajo hacia arriba por las dos mitades a la vez (1.5 s cada una en aterrizar)
1.2 – 3.1	Llegan las del relleno, del centro hacia afuera
2.6 – 5.1	Entra el polvo desenfocado de primer plano
4.0	Empiezan a escaparse motas hacia arriba (bucles de 6–11 s)
4.3	Arranca la onda de luz que sube por el corazón (bucle 4.2 s)
4.6 / 5.7 / 7.0	Las tres líneas del mensaje
8.4	Aparece «Como crece mi amor por ti»
8.6	El contador se dispara y ya no para
9.8	Firma

Comprobado en Chromium

/evianny/ — 390×844, además de 1280×900 y 412×915. Sin errores de consola. Se generan los 9+8+5+5+4+9 elementos desde los arrays; «Entrar», «sigue ↓», las tarjetas (abrir/cerrar/reabrir), los 4 botones del kit, «Ejecutar Evianny.exe» (6 pulsaciones → tope de 4 líneas y un solo cursor), «Guardar esta amistad» y «Volver a empezar» funcionan. Cero desbordamiento horizontal en los tres anchos y ningún elemento se sale de la pantalla. Segunda vuelta completa verificada. También pasada con prefers-reduced-motion: reduce.

/emil/reset/ — 390×844

La página del reset se verificó con Playwright pulsando todos los botones: sin errores JS, sin desbordamiento horizontal, las 9 secciones revelan, el abrazo aparece, el reinicio deja los cuatro estados limpios (portada visible, scroll arriba, botón de abrazo repuesto, entradas rebobinadas) y la segunda vuelta funciona igual. También pasada con prefers-reduced-motion: reduce.

Reglas técnicas (respetar en TODO cambio)

HTML + CSS + SVG puro. Sin frameworks, sin build, sin dependencias, sin CDN. Cada archivo debe funcionar abriéndolo directo con doble clic.
Las flores e insectos se generan por JS creando nodos SVG (createElementNS); las animaciones son CSS (@keyframes), nunca requestAnimationFrame por frame.
Nada de filtros SVG pesados (feGaussianBlur, feDropShadow) sobre grupos grandes: matan el rendimiento. La profundidad se logra con opacidad y escala.
will-change:transform en todo lo que anima en bucle. Animar solo transform y opacity (nada de left/top/width/filter).
Incluir siempre el bloque @media (prefers-reduced-motion: reduce) que congela la escena en su estado final.
emil, imanol y mama son verticales para iPhone: 100svh, env(safe-area-inset-*), <meta viewport ... viewport-fit=cover>. clarett es horizontal para PC.
Objetivo 60 fps en iPhone. Si algo se arrastra: reducir cantidad de nodos antes que quitar detalle visual de las flores del primer plano.
No cambiar los textos de los mensajes ni las firmas sin preguntar antes.

Deuda técnica conocida (emil)

La página aún usa filter:url(#glow) / url(#glowSuave) en el grupo de tépalos internos del lirio, en la capa de fondo de la hortensia (22 nodos), en cada antera y en las 30 chispas en bucle. Va contra la regla 3 y es el primer sospechoso si en el iPhone no llega a 60 fps. Sustituible por halo con radialGradient + opacidad.

Flujo de trabajo

Cada ajuste: cambio → commit en español → push a main → GitHub Pages republica solo.