WARM UP : un site concept pour une émission rétro qui enseigne le design

WARM UP est une émission de télévision rétro fictive pour celles et ceux qui débutent en design. Son idée : les compétences créatives fonctionnent comme des muscles, donc chaque guide est une cassette VHS d’entraînement. VITON¹³ a réalisé le site comme un concept, pour montrer un site ludique à l’esthétique d’antenne, où une seule métaphore et son mouvement portent l’apprentissage.

Dès la première seconde, le site devait ressembler à un téléviseur, avec écran de démarrage, chaînes et neige, tout en restant un guide : le visiteur choisit une cassette, suit son programme et peut appeler l’émission. Chaque effet devait servir la métaphore sans gêner la lecture.

Sept pages : accueil, cassette, studio, ligne d’appel, confidentialité, conditions et 404. L’émission compte 4 cassettes VHS, Idea Stretch, Portfolio Pump, Critique Cardio et Pitch Cool-Down, chacune avec un programme de 5 mouvements, et l’accueil abrite un téléviseur à 5 chaînes.

L’accueil s’ouvre sur un écran de démarrage VHS : PLAY, compteur de bande et tracking. Vient ensuite un téléviseur à cinq chaînes, que l’on change avec des flèches à l’écran ou au clavier, avec neige et bandeaux en bas d’image, puis un titre rétro en relief et un bandeau défilant. Les cassettes apparaissent sous forme de jaquettes VHS en 3D construites en CSS, qui tournent au défilement et lancent un aperçu au survol. Une page cassette réunit une vidéo cadrée dans un téléviseur, le programme de cinq mouvements avec répétitions, le conseil du coach, les blessures fréquentes, les devoirs et la cassette suivante. La page studio présente les coachs et la grille de la semaine ; la ligne d’appel propose un formulaire et une FAQ.

Un parcours type va de l’accueil à une cassette, puis à la ligne d’appel. L’écran porte des lignes de balayage, une neige animée dessinée sur canvas, une bande de tracking qui défile, un texte d’incrustation aux franges chromatiques et un léger tremblement de l’image ; les mots surgissent avec un rebond élastique, et le bandeau accélère avec le défilement. D’une page à l’autre, l’image s’effondre dans la neige avec un affichage FF ou REW.

Le site est écrit en HTML, CSS et JavaScript, sans étape de build. L’en-tête, le pied de page et les calques viennent d’un seul script partagé, si bien qu’ils restent identiques sur toutes les pages. L’animation repose sur GSAP avec ScrollTrigger et le défilement fluide Lenis. Les formulaires d’appel fonctionnent en mode démo : l’état reste dans le localStorage du navigateur et rien n’est envoyé. La vidéo est une vidéo de banque sous licence, issue de Pexels et chargée par liens CDN directs.

Le concept existe sous la forme de 7 pages terminées, en anglais. Le 22 septembre 2026, VITON¹³ en a vérifié 6, rendues dans Chrome, sans la page 404 : les 6 ont un titre unique et un seul H1, la langue est déclarée, la mise en page tient à 390 px sans défilement horizontal et aucun lien interne n’est cassé.

Lighthouse sur la page d’accueil. Sur mobile : performance 88, accessibilité 95, bonnes pratiques 77, SEO 100, LCP de 2,7 s, CLS de 0,048 et TBT de 0 ms, pour 9,8 Mo et 21 requêtes. Sur ordinateur : performance 73, avec un LCP de 0,9 s et un TBT de 0 ms, mais un CLS de 0,577, car le bloc de la chaîne et du titre se décale pendant le chargement des polices et de la vidéo ; l’accueil sur ordinateur pèse 13,4 Mo à cause de la vidéo.

WARM UP est un concept, ni une commande ni une vraie émission. L’émission, les coachs, les cassettes, la grille et le numéro de téléphone sont fictifs, et la vidéo est une vidéo de banque sous licence issue de Pexels. Le site n’a ni domaine, ni public, ni trafic de recherche, ni appels : cette étude ne dit rien du nombre de personnes qui la regarderaient ou apprendraient avec elle.

Les chiffres Lighthouse sont des mesures de laboratoire d’une seule page, un seul jour. Le décalage de mise en page sur ordinateur (CLS de 0,577) est un vrai défaut que cette version n’a pas corrigé, et le score SEO de 100 ne couvre que les bases : il manque encore les URL canoniques, Open Graph, JSON-LD, sitemap.xml et robots.txt.