Écurie des Aigles
Un site de démonstration que j'ai conçu pour pousser le design et le mouvement aussi loin que possible sur une seule page, sans rien sacrifier de la vitesse ni de l'accessibilité.
Un terrain de jeu, sans client ni contrainte
Écurie des Aigles est un projet personnel : une écurie de course installée en forêt de Chantilly, prétexte à explorer ce qu'une page web peut raconter quand le design et le mouvement sont au premier plan.
La page suit la matinée d'une écurie, du premier lot dans la brume jusqu'à la ligne d'arrivée. L'écurie est fictive, ses chiffres sont inventés, et les images et vidéos ont été générées pour le projet, puis retravaillées et encodées pour le web.
Tout part des casaques
Le système graphique est tiré des casaques des jockeys : aplats francs, motifs géométriques, typographie très grasse et condensée. Les médias, eux, restent photographiques. C'est le contraste entre les deux qui fait l'identité de la page.
Avant de retenir cette direction, j'en ai exploré trois, chacune construite en vraie page plutôt qu'en maquette, pour juger sur pièce.
Le scroll comme ligne de temps
La page n'utilise aucun framework d'interface : Astro pour le site statique, un CSS écrit à la main, et GSAP pour orchestrer le défilement. Chaque scène lit sa progression et place tout en fonction d'elle. Rien n'est lancé puis oublié : en remontant, tout se rejoue à l'envers.
Ce que le projet a demandé
- ✓ Vidéos pilotées image par image par le scroll, décodées dans le navigateur et dessinées dans un canvas
- ✓ Mémoire maîtrisée, chaque vidéo étant chargée à l'approche de sa section puis libérée
- ✓ Un titre qui s'élargit en jouant sur l'axe de largeur de la police variable
- ✓ Panneaux qui s'empilent, masque qui perce la brume sous le curseur, inclinaison selon la vitesse du scroll
- ✓ Mouvement réduit respecté, et contenu lisible même sans JavaScript
- ✓ Version anglaise réécrite dans le vocabulaire des courses britanniques, pas traduite mot à mot
Stack
Des vidéos qu'on fait avancer soi-même
La pièce maîtresse est un module écrit pour le projet. Les vidéos ne sont jamais lues : chaque fichier est découpé, ses images décodées par le navigateur puis gardées en mémoire à la taille exacte de l'affichage. C'est le scroll qui choisit l'image à dessiner, dans un sens comme dans l'autre.
Quinze des seize vidéos de la page fonctionnent ainsi, comme les cartes de la matinée qui défilent à l'horizontale. Si un navigateur ne sait pas décoder, un mode de secours prend le relais.
Au survol comme au doigt
Dans l'effectif, chaque cheval se présente façon programme de course : survolé, il tourne la tête dans son box et sa casaque suit le curseur.
Rien n'est réservé à l'ordinateur. Ce qui se déclenche au survol se déclenche au défilement sur téléphone, et chaque vidéo existe en deux versions, encodées à la taille où elle s'affiche réellement.
La même expérience, en format de poche
Les scènes sont recomposées pour l'écran vertical : panneaux de couleur, sujets détourés et chiffres géants gardent toute leur force, sans débordement ni perte de lisibilité.
Spectaculaire, et pourtant léger
Mesures sur l'adresse de production, octobre 2026.
Une identité forte, sans sacrifier la vitesse
Quand un site doit marquer les esprits, je sais aller loin : une direction artistique assumée, du mouvement qui sert le récit, et une ingénierie qui garde la page rapide, accessible et lisible dans deux langues.
Un site qui ne ressemble à aucun autre ?
Une identité forte, du mouvement, et une page qui reste rapide. Parlons de votre projet, réponse sous 48h.