Axion Studio — Landing d'agence en WebGPU
Une landing page d'agence avec un hero génératif WebGPU — de la lumière pilotée au curseur derrière un verre cannelé — une entrée chorégraphiée, et un fallback CSS complet pour qu'aucun visiteur ne voie une page morte.
Présentation
Axion Studio est une landing page d'agence de design construite comme une vitrine front-end. Le brief que je me suis fixé : atteindre le niveau des sites d'agence qui gagnent des prix — un hero génératif rendu en temps réel, des micro-interactions partout où la main passe, et la discipline de production que la plupart des démos zappent. La marque est fictive ; tout ce qui est à l'écran est du vrai code qui tourne.
Le hero : de la lumière derrière du verre, en temps réel
La pièce maîtresse est un fond génératif calculé en direct sur le GPU — une pile de quatre shaders en WebGPU :
- Un tourbillon de lumière en base — un mouvement doux blanc sur gris qui ne se répète jamais.
- Un champ de flux chromatique qui allume des traînées orange partout où le curseur passe, avec de l'inertie : la lumière continue de couler quand la main s'arrête.
- Du verre cannelé — toute la scène se réfracte derrière des lames verticales, avec une aberration chromatique qui frange les reflets comme une vraie optique.
- Un grain de film pour lier l'ensemble.
Le verre est vivant avant même qu'on le touche : son angle oscille et son reflet spéculaire « respire », pilotés par les drivers auto-animate du moteur plutôt que par des timers JavaScript — la logique d'animation vit côté GPU.
Motion design
Une seule entrée signée, jouée une fois : la nav se pose depuis le haut, puis le label, le titre et les appels à l'action montent en cascade serrée avec un flou qui se dissipe — ease-out exponentiel, zéro « scroll reveal » à répétition. Tout le reste est du feedback : les boutons font rouler leur texte au survol, les flèches pivotent, les cartes projets déploient un bouton circulaire en pilule légendée, les vidéos zooment doucement sous le curseur. Une horloge de Londres tourne en direct dans la nav, et le menu mobile est une bottom sheet avec des timings d'entrée et de sortie distincts.
Ingénierie
React 18 + TypeScript + Vite, stylé avec Tailwind. Le point qui compte : l'amélioration progressive. WebGPU n'est pas encore partout, donc la page détecte quand la voie GPU est indisponible et bascule sur une approximation CSS faite main du même langage visuel — une lueur orange en orbite, des lames de verre animées, un balayage spéculaire, du grain. Aucun visiteur ne voit un hero mort ; la plupart ne remarquent même pas quelle version ils ont eue.
Les états de focus clavier, un parcours prefers-reduced-motion complet et une typo aux contrastes vérifiés sont de série, et le build passe TypeScript en mode strict.
Ce que ça démontre
- Composition de shaders en temps réel (WebGPU) intégrée proprement dans une app React
- Un motion design avec une thèse — un moment signé, du feedback utile partout ailleurs
- L'amélioration progressive bien faite : un fallback visuel complet, pas une div vide
- La discipline de production : TypeScript strict, accessibilité, reduced-motion
Stack : React 18, TypeScript, Vite, Tailwind CSS, moteur shaders (WebGPU / TypeGPU), Lucide.