WebGL & 3D temps réel
Des matières organiques calculées dans le navigateur, réactives au défilement — sans plugin, sans vidéo, à 60 images par seconde.
Laboratoire — WebGL / Scrollytelling / Son génératif
La matière répond au défilement.
Une forme née d’une sphère va se dissoudre en fibres optiques lumineuses, puis s’apaiser en structure régulière, changer de couleur — sculptée en direct par votre défilement.
🎧 Activez le son (en bas à droite) pour l’expérience complète : nappe musicale et bruitages génératifs accompagnent chaque apparition.
Faites défiler
Métamorphose 01 — Organique
Chaque rotation, chaque déformation est calculée pendant que vous faites défiler — rien n’est filmé, tout est vivant.
Métamorphose 02 — Fibres optiques
La sphère se dissout en fibres de lumière.
Sous vos yeux, un faisceau de câbles lumineux jaillit de la sphère et s’étire à travers l’écran, parcouru d’impulsions — comme la fibre optique qui transporte vos données. La sphère se vide dans les câbles, chaque éclat est un signal qui voyage.
Métamorphose 03 — Structure
Puis la matière s’apaise et s’ordonne.
Le mouvement se fige, les ondulations se rangent en côtes régulières, calmes et précises. Du désordre naît l’ordre — c’est exactement notre métier.
Ce que ça démontre
Trois savoir-faire, un défilement.
Scrollytelling
Le défilement devient une narration : sections épinglées, éléments chorégraphiés, chaque pixel arrive au bon moment.
Performance maîtrisée
Repli statique élégant si l’appareil manque de puissance, animations désactivées si l’utilisateur le demande. Le spectaculaire, jamais au détriment de l’accès.
Créons l’exceptionnel
Sous le capot
Zéro no-code. Zéro low-code. Zéro template.
L’intégralité de ce site — chaque page, chaque animation, cette scène 3D, jusqu’aux sons que vous entendez — a été écrite ligne par ligne. Aucun constructeur de sites, aucun outil no-code ou low-code, aucun thème acheté : du code, pensé et maîtrisé de bout en bout.
C’est ce qui rend possible ce que les outils clés en main ne permettront jamais : un shader écrit sur mesure, une matière qui se métamorphose au pixel près, des sons générés en direct par le navigateur — et des performances qui restent irréprochables.
- Astro
- Three.js
- Shaders GLSL
- GSAP ScrollTrigger
- Lenis
- Tailwind CSS
- WebAudio API
Page de démonstration
Cette page est un terrain de jeu technique — elle n’est pas référencée. Envie d’une expérience de ce niveau pour votre marque ?