Le contexte

ORYN Halo est une page de lancement produit fictive pour un casque audio — un site de type « keynote Apple » : scroll cinématique, animations enchaînées, produit mis en scène. L’objectif technique : montrer ce que je suis capable de livrer sur une page de lancement haut de gamme.

Deux défis principaux :

  1. Un hero 3D interactif — le casque en hologramme, sans asset photo réaliste imposant
  2. Un scroll narratif — chaque section se révèle en cascade, les specs s’animent au défilement

L’hologramme 3D

Le hero affiche le casque en hologramme via un ShaderMaterial GLSL custom dans Three.js :

  • Une gerbe de rayons descend de haut en bas au chargement (uReveal : 0 → 1 sur 2,4 s), comme si l’hologramme se construisait sous les yeux du visiteur
  • Un effet fresnel sur les bords (le halo lumineux caractéristique des hologrammes SF)
  • Des scanlines horizontales animées en fragment shader
  • Un glitch « batterie faible » : à intervalles irréguliers, l’hologramme se déchire par tranches (uGlitch dans le vertex shader) et se fond (uFlicker), puis revient à la normale
  • Blending additif — le modèle s’intègre au fond sombre sans contour dur

Le modèle .glb (compressé Draco, ~29 Ko) vient de Poly Pizza (licence CC-BY — attribution dans le pied de page). Un modèle générique suffit : l’hologramme masque le manque de détail et donne son identité visuelle à la page.

La disparition du render statique

Problème classique avec le 3D web : l’image de secours s’affiche en premier, puis la 3D apparaît — flash désagréable. Solution : la classe holo-ok est posée sur <html> en synchrone dans le <head> dès que WebGL est disponible et que prefers-reduced-motion est inactif. Le CSS masque immédiatement le render PNG si holo-ok est présent. Le visiteur ne voit jamais les deux en même temps.

Si WebGL échoue, si le .glb ne charge pas, ou si l’utilisateur a activé prefers-reduced-motion, la fonction restoreFallback() retire la classe — le render statique reprend proprement.

Le scroll GSAP

GSAP ScrollTrigger orchestre le scroll cinématique :

  • Parallaxe du hero : le titre et le produit défilent à des vitesses différentes, créant de la profondeur
  • Révélations en cascade : chaque bloc de spécification entre à son propre rythme quand il entre dans le viewport
  • Compteurs animés : les chiffres de specs (autonomie, drivers, poids) montent de zéro à leur valeur cible au défilement

Tout se dégrade proprement : le contenu est visible en statique, prefers-reduced-motion coupe les animations, et l’IntersectionObserver natif prend le relais pour les révélations simples.

Ce que le projet démontre

  • Maîtrise des shaders GLSL avec Three.js (vertex + fragment shaders custom)
  • Gestion rigoureuse de la dégradation progressive : no-JS, no-WebGL, mouvement réduit
  • Capacité à livrer une expérience de lancement produit haut de gamme sans framework JS
  • Intégration soignée de la performance : modèle Draco léger, détection synchrone pour éviter le flash