Kuroa

Ce que c’est

Un site complet pour un studio créatif : un panneau de hero qui passe du plein écran à une carte pendant que deux colonnes de photographies défilent derrière lui, un portfolio à titre collé, un bento de présentation, une section « vision » où cinq phrases se succèdent sur huit écrans, une mosaïque de showreel qui se pose, les tarifs, une FAQ, quatre témoignages qui tombent et s’empilent, les chiffres, un journal, un bloc contact et le pied de page. Une page, un fichier HTML, 30 596 px de haut.

Ce qui fait ce template, c’est que quatre de ses sections sont pilotées par la position de défilement, sans une seule bibliothèque. Une section haute contient un écran en position: sticky ; un seul écouteur de défilement et une seule requestAnimationFrame transforment la course en un nombre entre 0 et 1, et la feuille de style fait le reste avec des propriétés personnalisées — --panel-scale, --zoom, --open, --y. Pas d’animation-timeline : c’est Chrome seul.

Le dessin vient d’un gabarit Framer pour un studio créatif dont il ne reste pas une image : trente-sept photographies ont été régénérées aux rapports d’aspect relevés sur l’original, et les dix vidéos de fond — 14 Mo — sont devenues un seul montage de 596 Ko, monté à partir de ces mêmes images. Tout le code a été réécrit : le bundle React, le moteur d’animation, la bibliothèque de défilement lissé, les badges de l’éditeur.

C’est tout l’objet : 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 — l’accent, c’est trois nuances

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

--ink:           #000;     /* texte, boutons, sections sombres */
--paper:         #fff;     /* la page */
--paper-warm:    #f5f5f5;  /* portfolio et témoignages */
--night:         #141414;  /* fond du hero, cartes sombres */
--accent:        #ff5a1f;  /* pastilles, gros texte — 3,11:1 sur blanc */
--accent-strong: #d63f0c;  /* survol et petit texte — 4,62:1 sur blanc */
--accent-light:  #ff8a5c;  /* accent sur photo — 6,72:1 sur #141414 */

La palette est monochrome et l’accent ne marque qu’un état. Mais il y a trois accents, pas un. Le plein passe sur fond blanc en grande taille ; en petit texte il tomberait sous 3:1, c’est le foncé qui prend le relais ; sur une photographie, c’est l’éclairci. Changer l’accent, c’est changer les trois.

Le nom

Cherche « Kuroa » dans index.html : le logo, le titre, les titres de sections, les témoignages et le pied de page. Aucune classe CSS ne contient la marque — un rechercher-remplacer ne peut rien casser. La pastille du studio est un dégradé conique en CSS, repris dans assets/img/favicon.svg.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture (1200 et 810 px, ceux du site d’origine). Un titre n’a donc jamais sa propre media query : change --display-size et le hero suit — 176 px sur grand écran, puis 92 et 75 px en descendant. Les valeurs sont celles relevées sur l’original à 1440, 1024 et 390 px.

Les courses de défilement

Les quatre sections épinglées sont aussi longues qu’elles sont hautes : 300svh pour le hero, 800svh pour la vision, 400svh pour le showreel, 500svh pour les témoignages. Les raccourcir raccourcit la page, sans rien déplacer d’autre.

Les treize effets, et comment ils sont faits

Ils n’ont pas été regardés, ils ont été mesurés : le transform de chaque élément mobile a été lu à douze positions de défilement, ce qui donne la loi qu’il suit et non une impression. Le panneau du hero, par exemple, est une droite de scale(1) à scale(0,4) sur 2 700 px — et il continue de rétrécir après le décollement de l’écran collé, d’où une progression mesurée sur la section entière et non sur la partie épinglée.

Ce qu’il faut savoir

Aucune requête externe, aucune étape de build. On ouvre index.html dans un navigateur et ça marche. Polices auto-hébergées, photographies locales, pas de CDN, pas de traqueur.

Sans JavaScript, rien n’est caché. L’état masqué s’écrit .js [data-reveal], et enhance.js est la seule chose qui pose cette classe. Vérifié scripts coupés : 12 titres sur 12 visibles, 34 blocs animés sur 34 aussi, les cinq phrases de la vision s’empilent et les quatre témoignages se lisent à la suite. Les quatre sections épinglées redeviennent des sections normales — la page mesure alors 19 633 px au lieu de 30 596.

Le seuil d’apparition est à 15 % du bas de l’écran, et non au premier pixel visible comme dans l’original. La marge est mesurée sur l’écran, pas sur l’élément — un seuil en pourcentage de l’élément laisserait invisible à jamais tout bloc plus haut que l’écran. Un filet révèle ce qui reste quand on atteint le bas de la page.

Quatre sections s’épinglent. Une section haute contient un écran en position: sticky, et un seul écouteur écrit la progression dans une propriété personnalisée. C’est pour cela que la racine utilise overflow-x: clip et non hidden : le second ferait de la racine un conteneur de défilement et décollerait tout.

Sous une politique de sécurité stricte (script-src 'self'; style-src 'self') : zéro violation, vérifié en servant le dossier avec le vrai en-tête. Aucun style en ligne, aucun script en ligne, aucun onclick — les valeurs de progression passent par style.setProperty(), que la politique autorise.

Aucun débordement horizontal à 390, 1440 et 2560 px, au chargement comme après défilement complet. Accessibilité : lien d’évitement, aria-expanded tenu à jour sur le menu, <dialog> natif pour le menu et le lecteur, <details name="faq"> pour l’accordéon, un seul anneau de focus visible, et prefers-reduced-motion qui remet aussi les délais à zéro.

Ce qui n’est pas parfait