Héros · révélation de la marque
Tempo repris de la vidéo : un segment par 0,8 s, pulsation finale de 1 s.
stroke-dasharray: 340
@keyframes gmrDraw → dashoffset 340 → 0
0,8 s · cubic-bezier(.45,0,.25,1)
brins : retards 0,2 s / 1,65 s / 3,05 s
points : gmrLit 0,42 s · cubic-bezier(.34,1.5,.64,1)
retards 0,15 · 1 · 1,6 · 2,45 · 3 · 3,85 s
pulsation : gmrBloom 1 s ease-out à 4 s
mot-symbole : gmrWord 0,7 s à 4,1 s
Déclencheur : au chargement, une seule fois. Aucun défilement requis.
Parcours · tracé au défilement
Chaque segment se dévoile quand son étape entre dans la vue ; le point s'allume à l'arrivée de la ligne.
@keyframes gmrReveal → clip-path
inset(0 0 100% 0) → inset(0 0 0 0)
0,95 s · cubic-bezier(.65,0,.35,1)
séparateurs : gmrRevealX (horizontal)
déclencheur : IntersectionObserver
threshold .3 · rootMargin 0 0 -8% 0
une seule fois par élément (unobserve)
Repli : sans JS, sans défilement possible ou en prefers-reduced-motion, l'état final reste peint — aucun contenu caché.
État « point allumé »
Un seul état réutilisé : courroie du Parcours, stepper Cactus, ancre active du ruban, frise 1988.
sur encre — halo vert
box-shadow: 0 0 0 3px rgba(119,189,67,.24),
0 0 10px rgba(119,189,67,.85)
ligne blanche #FFFFFF
sur clair — contour encre
box-shadow: 0 0 0 2px #15170F,
0 3px 8px rgba(21,23,15,.28)
ligne encre #15170F
Éteint : anneau #4C5142 sur encre, #D8D8CE sur clair, sans remplissage.
À fournir pour l'intégration
Trois éléments manquent pour que la maquette devienne le site.
- Le SVG officiel de la marque (les brins de cette maquette sont une reconstruction d'après la vidéo) [À valider]
- Les fontes Khand et Archivo en WOFF2, chargées localement — quatre graisses au plus.
- Le vert : la vidéo mesure #6DB612, le brief impose #77BD43. Cette maquette suit le brief. [À valider]