Après Scalable, Fuel est le deuxième banc d'essai interne de Sōma — cette fois sur le terrain le plus difficile : le mouvement. Le site original vit par son scroll chorégraphié (sections qui se recouvrent, pile de cartes, marquees), ses reveals rejoués à chaque passage et un effet de fluide WebGL qui marbre l'image du hero sous la souris. L'objectif : une fidélité mesurée du mouvement comme du statique, pas une imitation à l'œil.
Projet interne
Fuel
Un template Framer recréé au pixel, animations et physique de fluide comprises.
Projet
Fuel
Secteur
Projet interne
Prestations
Reproduction pixel-perfect, Motion design, Développement, WebGL
Année
2026
Un harnais de comparaison maison (Playwright + diff pixel) à deux volets — page figée et douze positions de scroll — a guidé des boucles mesurer → corriger → re-mesurer, section par section. Les courbes réelles ont été extraites du site source, le solveur de fluide réécrit d'après la configuration du composant d'origine, puis le site a été traduit en français à hauteur de page constante, au pixel.
Environ 2 % d'écart mesuré face à l'original, page figée comme en mouvement, hauteur de page exacte au pixel, et un hero dont la photo se marbre comme un liquide sous le curseur. La preuve, chiffres à l'appui, que l'exigence Sōma s'applique aussi à ce qui bouge.
Le défi
Reproduire le mouvement d'un site no-code sans copier une ligne de son code : mesurer chaque animation sur la source (courbes, fenêtres de déclenchement, ressorts), en élucider les mécanismes réels, puis réécrire une simulation de fluide complète à paramètres identiques.
- Fidélité statique mesurée sur toute la page, à toutes les largeurs d'écran.
- Reproduire le mouvement : scroll multi-couches, pile de cartes, reveals, marquees.
- Répliquer l'effet fluide WebGL du hero, physique et paramètres mesurés compris.
