WARM UP: un sitio conceptual para un programa de televisión retro que enseña diseño

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. VITON¹³ 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 página del estudio presenta a los entrenadores y la programación semanal; la línea de llamadas tiene un formulario y preguntas frecuentes.

Un recorrido típico va de la portada a una cinta y de ahí a la línea de llamadas. La pantalla lleva líneas de barrido, ruido estático en vivo sobre canvas, una banda de tracking que recorre la imagen, texto en pantalla con aberración cromática y temblor de fotograma; las palabras saltan con un rebote elástico, y el teletipo se acelera con el scroll. 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, sin paso de compilación. La cabecera, el pie y las capas superpuestas salen de un único script compartido, así que se ven idénticos en todas las páginas. El movimiento usa GSAP con ScrollTrigger y el desplazamiento suave de Lenis. Los formularios de llamadas funcionan en modo demo: el estado se guarda en el localStorage del navegador y no se envía nada. El vídeo es material de stock con licencia, de Pexels, cargado mediante enlaces directos a su CDN.

El concepto existe como 7 páginas terminadas en inglés. El 22 de septiembre de 2026, VITON¹³ 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 en 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.

WARM UP es un concepto, no un encargo ni un programa real. El programa, los entrenadores, las cintas, la programación y el número de teléfono son ficticios, y el vídeo es de stock con licencia, de Pexels. La web no tiene dominio, audiencia, tráfico de búsqueda ni llamadas, así que este caso no dice nada sobre cuánta gente lo vería o aprendería con él.

Las cifras de Lighthouse son mediciones de laboratorio de una página en un solo día. El desplazamiento del diseño en escritorio (CLS de 0,577) es un defecto real que esta versión no ha corregido, y el 100 de SEO solo cubre lo básico: aún faltan URL canónicas, Open Graph, JSON-LD, sitemap.xml y robots.txt.

Cómo revisar el portafolio de un estudio web →