stacklipse.fr, le site de Stacklipse

Stacklipse avait besoin d’un site à la hauteur de ce qu’il vend : singulier, rapide et accessible. Un modèle générique aurait dit l’inverse.

Le nom évoque une éclipse. Le site devait faire vivre cette image d’une page à l’autre sans devenir une démonstration technique lente à charger, et rester confortable à lire sur téléphone comme au clavier.

• Une scène qui suit la lecture

  L’éclipse change de place et d’intensité selon la page et la section : au premier plan sur l’accueil, elle se retire dans la marge pendant la lecture, sans jamais passer sous le texte.

• Navigation fluide

  Les pages s’enchaînent sans rechargement complet : la scène persiste, glisse vers sa nouvelle position, et la page suivante s’ouvre en cercle depuis l’éclipse.

• Contenus mis en scène

  Catalogue des offres, carte des technologies en constellations, études de cas avec visionneuse plein écran : chaque page a une disposition au service de son propos.

• Version mobile dédiée

  Sur téléphone, la mise en page se recompose : sommaire en capsule, onglets, rails au doigt, et un ciel dont le rendu se fige quand rien ne bouge.

• Accessible et sobre

  Navigation complète au clavier, réglage « Réduire les animations » qui prime sur celui du système, image fixe sans WebGL2, et mode économie quand l’appareil ménage ses données ou sa batterie.

Le site est généré en statique avec Astro : chaque page est prête avant la visite, sans serveur applicatif. Le JavaScript se limite à la scène et aux interactions.

L’éclipse est rendue en WebGL2 par un moteur à passes écrit sur mesure, sans bibliothèque 3D : des shaders GLSL composent le ciel étoilé, la Voie lactée, la couronne, le halo et le grain. Ce qui ne dépend que de l’état de la scène est calculé une fois par image sur le CPU, et chaque couche n’est évaluée que là où elle éclaire.

Un régulateur mesure le coût GPU de chaque image et ajuste la résolution en conséquence ; sans interaction, le rendu passe en veille à cadence réduite.

Le design repose sur des jetons verrouillés par Stylelint : couleurs, espacements, durées et formes ne sortent pas du système. Une politique de sécurité du contenu (CSP) stricte est calculée au build, et une suite de tests Playwright garde l’accessibilité et la typographie, et vérifie qu’aucun texte ne passe sous l’éclipse. Une partie du code a été écrite avec des agents d’IA, sous ma relecture.