WARM UP es un programa de televisión retro ficticio para quienes empiezan en el diseño. Su premisa es que las habilidades creativas funcionan como músculos, así que cada guía es una cinta VHS de ejercicios. Creé la web como concepto para mostrar un sitio lúdico con estética de emisión televisiva, en el que una sola metáfora y su movimiento sostienen la enseñanza.

Desde el primer segundo tenía que parecer una televisión, con pantalla de arranque, canales y estática, y aun así funcionar como guía: el visitante elige una cinta, sigue su rutina y puede llamar al programa. Cada efecto debía servir a la metáfora sin estorbar la lectura.

Siete páginas: portada, cinta, estudio, línea de llamadas, privacidad, condiciones y 404. Hay 4 cintas VHS —Idea Stretch, Portfolio Pump, Critique Cardio y Pitch Cool-Down—, cada una con una rutina de 5 ejercicios, y la portada tiene un televisor de 5 canales.

La portada arranca con una pantalla de inicio VHS: PLAY, contador de cinta y tracking. Después llega un televisor de cinco canales que se cambian con flechas en pantalla o con el teclado, con estática y rótulos inferiores, un título retro en relieve y un teletipo. Las cintas aparecen como carátulas VHS en 3D hechas con CSS, que giran al hacer scroll y reproducen un avance al pasar el cursor; cada página de cinta tiene un vídeo enmarcado en un televisor, la rutina de cinco ejercicios con repeticiones, el consejo del entrenador, las lesiones habituales, deberes y la cinta siguiente.

La pantalla lleva líneas de barrido, ruido estático en vivo sobre canvas, una banda de tracking, texto en pantalla con aberración cromática y temblor de fotograma; las palabras saltan con un rebote elástico, y al cambiar de página la imagen se deshace en estática con un indicador FF o REW. Está hecha con HTML, CSS y JavaScript con GSAP, ScrollTrigger y Lenis; los formularios de llamadas funcionan en modo demo y no envían nada.

El concepto existe como 7 páginas terminadas en inglés. El 22 de septiembre de 2026 revisé 6 de ellas renderizadas en Chrome, sin contar la 404: las 6 tienen títulos únicos y un solo H1, el idioma está declarado, el diseño se mantiene a 390 px sin desplazamiento lateral y no hay enlaces internos rotos.

Lighthouse midió la portada. En móvil: rendimiento 88, accesibilidad 95, buenas prácticas 77, SEO 100, LCP de 2,7 s, CLS de 0,048 y TBT de 0 ms, con 9,8 MB en 21 peticiones. En escritorio: rendimiento 73, con LCP de 0,9 s y TBT de 0 ms, pero CLS de 0,577, porque el bloque del canal y el título se desplaza mientras cargan las fuentes y el vídeo; la portada de escritorio pesa 13,4 MB por el vídeo.