Brightfold

Ce que c’est

Un site complet pour un studio de design : travaux sélectionnés, savoir-faire, un tarif unique, résultats clients, articles, FAQ et appel final. Une page, un fichier HTML, écrit à la main — aucune dépendance, aucune étape de build, aucun CDN.

Ce qui fait ce template, c’est ce qu’il refuse de faire. L’original sert une vidéo de fond en 1920 × 1080 dans deux formats — 12 Mo de MP4 et 36 Mo de WebM, soit 48 Mo, pour un bloc qui mesure 1220 × 612. Ici c’est une photographie fixe animée d’une dérive CSS de 34 secondes. Le dossier entier pèse désormais une fraction de ce seul fichier. Tous les autres choix de la page suivent la même règle : garder l’intention, laisser le coût.

Le dessin vient d’un gabarit Webflow pour un studio de design dont il ne reste aucune image : les photographies ont été régénérées pour ce template. Chaque ligne de code a été réécrite — jQuery, GSAP et son greffon SplitText, le moteur d’animation propriétaire IX2, le CSS minifié, et le style="opacity:0" posé en ligne sur chaque bloc animé, que bloque une politique de sécurité stricte, laissant une page blanche.

C’est tout l’intérêt : ce template n’est pas là pour être admiré, il est là pour être lu, cassé et remonté.

Ce que tu changes en premier

Les couleurs — il n’y a pas d’accent, et c’est voulu

L’original n’a aucune couleur de marque : noir, blanc et cinq gris. Toute la couleur de la page vient des photographies. C’est un parti pris, pas un oubli, et il est conservé — y ajouter une teinte de marque casserait le dessin en croyant l’habiller.

--ink:        #0A0A0A;  /* titres — 19,3:1 sur blanc */
--body:       #3D3D3D;  /* texte courant — 10,4:1 */
--muted:      #6E6E6E;  /* texte secondaire — 5,3:1 */
--faint:      #9B9B9B;  /* 2,7:1 — libellés seulement, jamais seul */
--surface:    #F2F2F2;  /* cartes */

Le décalage se fait donc là où la couleur est : les photographies de l’original tirent vers le bleu froid — ciel, ombres cyan — et celles de Brightfold vers l’ambre et le sable, à luminosité et contraste équivalents. #9B9B9B passe sous le seuil de 4,5:1 : il ne sert qu’à des libellés de 14 px accompagnés d’un autre repère, jamais à porter une information seul.

Le nom

Chercher « Brightfold » dans index.html : l’en-tête, l’accueil, le bloc à-propos, les avis, le pied de page, le <title> et la description. Aucun nom de classe ne contient la marque — un rechercher-remplacer ne peut rien casser. Le logo est un SVG de six lignes dans l’en-tête.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture et nulle part ailleurs : changer --h1-size suffit, toute la page suit. Aucun titre ne porte sa propre requête de média.

Les animations, et comment elles sont faites

Les réglages de l’original n’ont pas été devinés, ils ont été lus : un export Webflow garde durées, courbes, délais et déclencheurs dans son moteur d’animation, à ix2.store.getState().ixData. 219 événements y sont déclarés, qui se dédoublonnent en 51 effets réellement distincts — l’éditeur crée un événement par élément de collection.

Deux réglages de l’original sont corrigés d’office. Ses apparitions se déclenchent au premier pixel visible puis attendent jusqu’à 700 ms avant une animation d’une seconde : cela fait 1,7 s entre le moment où un bloc entre dans l’écran et celui où il est lisible. Et son seuil est exprimé en pourcentage de l’élément — ce qui laisse invisible à jamais tout bloc plus haut que l’écran. Ici la marge est mesurée sur l’écran, et un filet révèle ce qui reste quand on atteint le bas de la page.

Ce qu’il faut savoir

Aucune dépendance, aucun build, aucun CDN, aucune requête externe. Mesuré : 35 requêtes au chargement, toutes locales.

Sans JavaScript, rien n’est caché. Tous les états masqués sont écrits sous html.js, et c’est enhance.js qui pose cette classe. Scripts retirés : 27 titres visibles, 0 bloc transparent, 0 bloc déplacé, les 15 accordéons s’ouvrent et les 3 rubans montrent leurs logos.

Le natif d’abord. <details name> pour les deux accordéons — ils s’ouvrent sans script, répondent au clavier et se laissent trouver par la recherche du navigateur.

Une seule police, pas deux. L’original charge « Inter Display », qui est le même dessin à une taille optique différente ; ici c’est l’axe variable opsz qui le donne, depuis un seul fichier.

Sous une politique de sécurité stricte (script-src 'self'; style-src 'self') : zéro violation, comptée en servant le dossier avec l’en-tête réel du site. Aucun style en ligne, aucun script en ligne, aucun onclick. Les apparitions passent par IntersectionObserver, jamais par animation-timeline — celle-ci n’existe que dans Chrome.

Accessibilité : lien d’évitement, aria-expanded sur le menu, focus gardé dans le panneau ouvert, Échap qui ferme, décorations en aria-hidden, un seul anneau de focus, et prefers-reduced-motion qui applique les états finaux — délais compris.

Ce qui n’est pas parfait