Tokora Studio

Ce que c’est

La page d’accueil d’un outil qui fabrique des design systems : échelle typographique, palettes, composants, puis export vers React, Vue, Figma et les agents IA. Douze blocs sur une seule page — accueil, six cartes produit, un parcours en six étapes, une bibliothèque de composants, un schéma de connexion, cinq cas d’usage, bénéfices, tarifs, FAQ, appel à l’action, pied de page.

C’est le template le plus « produit » de la bibliothèque, et le plus animé. Quatre sections restent épinglées à l’écran pendant qu’on défile : l’accueil, le parcours, la bibliothèque et le schéma de connexion. Une cinquième tire un carrousel horizontal avec le scroll vertical.

L’original est une application React d’un bundle de 14 Mo, plus 834 Ko de CSS. Tout ce code est parti. Ce qui reste, ce sont les images, la composition, les textes — et les réglages d’animation, qui ont été lus dans la feuille de style d’origine plutôt qu’estimés à l’œil.

Ce que tu changes en premier

Les couleurs — cinq lignes, mais trois bleus

Tout en haut de assets/css/style.css :

--blue:        #0a4fdf;  /* boutons pleins, liens, accents — 5,99:1 sur blanc */
--blue-hover:  #134cc8;  /* survol — 6,87:1 */
--blue-deep:   #0b3a9d;  /* texte bleu sur fond gris — 9,35:1 */
--blue-onblue: #ffffff;  /* texte du panneau bleu — 6,16:1 sur --blue */
--ink:         #151515;  /* titres */
--body:        #242424;  /* texte courant */

Il y a trois bleus, pas un. Le bleu plein passe le contraste sur le blanc, mais il disparaît dès qu’on le pose sur le grand panneau bleu de la section « composants » — d’où la quatrième nuance. Si tu changes --blue, change les quatre, et revérifie les quatre rapports.

Le mode sombre

C’est un deuxième jeu des mêmes jetons, trente lignes plus bas. Rien d’autre n’est à toucher : aucune règle de mise en page n’est dupliquée. La bascule est dans le rail, mémorisée, et prefers-color-scheme décide de la première visite.

Le rythme des sections épinglées

Une section épinglée, c’est une hauteur et rien d’autre : --progress va de 0 à 1 sur hauteur moins une fenêtre. L’accueil fait 175dvh, le parcours 600dvh, la bibliothèque 260dvh, le schéma 520dvh. Raccourcir accélère l’animation, allonger la ralentit.

Le nom

Cherche « Tokora » dans index.html. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser.

Les dix-huit effets, et comment ils sont faits

Tous relevés dans la feuille de style d’origine — 834 Ko, dont 28 blocs @keyframes — puis mesurés au navigateur. La courbe signature d’Tokora est cubic-bezier(.22, 1, .36, 1), sa durée de référence 0,92 s.

Ce qu’il faut savoir

• Aucune requête externe. Vérifié aux trois largeurs : 0 requête hors du dossier. L’original en charge 15,2 Mo depuis deux domaines avant d’afficher son premier titre.
• 426 Ko à la première visite. Les deux vidéos (0,5 Mo) ne partent qu’au clic, les quatre captures du méga-menu qu’à son ouverture.
• Sans JavaScript, rien n’est caché. L’état masqué n’existe que sous html.js. Retire les deux balises <script> : les 32 titres restent visibles, les panneaux du parcours s’empilent, le carrousel se balaie, la FAQ s’ouvre.
• Zéro style en ligne. Les dix positions polaires des logos de l’accueil, qui seraient naturellement des attributs style, sont dans la feuille de style — une règle par outil. C’est la politique de sécurité stricte du site qui l’impose, et c’est plus lisible.
• IntersectionObserver, jamais animation-timeline. L’original utilise les deux ; le second n’existe que sur Chrome.
• Accessibilité : lien d’évitement, états du méga-menu et du tiroir annoncés, position du carrousel en role="status", focus visible, décorations masquées aux lecteurs d’écran, et un prefers-reduced-motion qui remet aussi les délais à zéro.
• Responsive vérifié à 390, 1440 et 2560 px, au chargement comme après défilement complet, sans débordement horizontal.

Ce qui n’est pas parfait

Autant le dire ici plutôt que te le laisser découvrir.