Ce que c’est
Un site de studio d’architecture, complet : accueil pleine hauteur, présentation, services en onglets, logos clients, projets en rail horizontal, avis en carrousel, articles, FAQ et pied de page. Une seule page, un seul fichier HTML.
Le design reprend celui d’un template Webflow dont seules les photos et les icônes ont été conservées. Tout le code a été réécrit : l’original tenait dans 129 Ko de CSS minifié, jQuery, quatre bundles Webflow de 400 Ko, un moteur d’animation propriétaire (IX2) et trois fichiers GSAP chargés depuis deux domaines — dont le code qui les utilise ne se trouve nulle part dans l’export.
C’est le point important : 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 — cinq lignes
Tout en haut de assets/css/style.css :
--green: #506e61; /* boutons, pastilles de section */
--green-dark: #3f574d; /* le même vert, assombri pour le survol */
--green-light: #8fb0a1; /* le même vert, éclairci : focus et texte sur photo */
--paper-grey: #f5f5f5; /* le fond des sections alternées */
--bark: #2f2c25; /* les titres des cartes de projet */Une chose à comprendre avant de toucher au reste : il y a trois verts, pas un. Le vert plein passe le contraste AA sur blanc et sur le gris de section (5,6:1 et 5,1:1), mais il disparaît dans une photo. C’est pour ça que l’anneau de focus et les états sur photo utilisent la version éclaircie (6,0:1 sur une photo sombre). Si tu changes le vert, change les trois.
Le nom
Cherche « Shirune » dans index.html. Aucune classe CSS ne
contient la marque : un rechercher-remplacer ne peut rien casser.
Les tailles
L’échelle typographique est déclarée une fois, puis redéclarée à chaque
point de rupture. Un titre n’a donc jamais sa propre media query : tu
changes --h2 et toute la page suit.
Les quinze effets, et comment ils sont faits
Tous relevés dans les données du moteur d’animation de l’original — 97 événements et 24 listes d’action extraits de son store, puis mesurés au navigateur, pas à l’œil. Après déduplication il reste 35 événements distincts, regroupés ici en quinze effets.
| Effet | Réglages d’origine | Comment |
|---|---|---|
| Apparition au scroll (22 blocs) | opacité 0→1 et 100 px de bas en haut, 1 s, outQuart | IntersectionObserver, mêmes valeurs, déclenché à 15 % du bas de l’écran |
| Entrée de la barre | −100 px du haut, 1 s outQuart, 200 ms de retard | même chose en CSS, sous html.js |
| Voile de la barre | de 0 à 9 % du scroll : fond transparent → noir 60 %, pastille noir 20 % → blanc 34 % | une variable --veil écrite au scroll, color-mix pour la pastille |
| Barre qui s’efface | −100 % en descendant, 0 en remontant, 500 ms inOutQuad | une classe posée au scroll, avec 8 px de zone morte |
| Parallaxe de l’accueil | le contenu descend de 50 % sur un écran de défilement | même course, calculée au scroll |
| Rail des projets | section épinglée sur 5 écrans, les cartes glissent de 1 700 px | scrollLeft piloté par la progression, course mesurée et non figée |
| Boutons (6) | deux libellés qui montent de 20 px, flèche +10 px, 400 ms inOutQuad | deux libellés empilés dans une boîte qui coupe, mêmes durées |
| Cartes de projet (7) | la photo passe à 1,2×, 500 ms inOutCubic | un transform, mêmes valeurs |
| Flèche de la carte d’accueil | deux flèches translatées de 22 px, 300 ms | deux <use> dans une boîte qui coupe |
| Cartes d’article (2) | la photo passe à 1,2×, 500 ms inOutCubic | identique |
| Accordéon FAQ (5) | hauteur 0 ↔ auto en 500 ms, le « + » tourne de 45° | <details> natif, transition sur ::details-content |
| Onglets services (3) | panneaux Webflow, un point apparaît sur l’onglet actif | trois radios natifs et :has() — zéro JavaScript |
| Menu mobile | le panneau entre par la droite, 800 ms inOutCubic | même translation, plus le piège à focus et la touche Échap |
| Carrousel des avis (4) | slider Webflow, glissement 500 ms | scroll-snap natif ; les flèches deviennent des boutons |
| Texte qui s’allume | GSAP SplitText — le code n’est pas dans l’export, seul l’état de repos est observable | reconstitué : les mots s’allument un à un au fil du scroll |
Ce qu’il faut savoir
- Aucune requête externe. 43 requêtes au chargement, toutes locales. L’original chargeait jQuery, quatre bundles Webflow, trois fichiers GSAP et deux familles de polices depuis quatre domaines.
-
L’apparition au scroll ne peut pas masquer le contenu.
L’état caché n’existe que si le JavaScript a tourné. Vérifié en retirant les
balises
<script>: 21 titres sur 23 restent visibles, les deux derniers étant les panneaux d’onglets non sélectionnés — que le CSS cache, et qu’un clic ramène. L’original, lui, posaitstyle="opacity:0"sur chacun des 22 blocs animés. -
Zéro style et zéro script en ligne. Le template respecte la
politique de sécurité stricte du site — celle-là même que
style="opacity:0"viole. - Le déclencheur est à 15 % du bas de l’écran, pas au premier pixel comme dans l’original : un bloc entre visiblement au lieu d’avoir fini avant d’être vu.
- Le rail des projets marche sans JavaScript. C’est un vrai conteneur de défilement horizontal : il se balaye au doigt et s’atteint au clavier. Le pilotage par le scroll vertical vient par-dessus.
- Accessibilité : lien d’évitement, état du menu annoncé, FAQ native, position du carrousel annoncée, focus visible unique, décorations masquées aux lecteurs d’écran, animations et délais coupés si le système le demande.
- 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.
- Le texte qui s’allume est une reconstitution. L’original charge GSAP et SplitText mais le code qui les pilote ne figure nulle part dans l’export : seul l’état de repos est observable, des mots en gris pâle. L’effet a été refait à partir de là.
- Le rail des projets ne glisse pas de la même distance. L’original translate de 1 700 px quelle que soit la largeur, ce qui laisse du vide à droite sur un grand écran. Ici la course est mesurée, donc la dernière carte arrive exactement au bord. Au-delà de 2 550 px les six cartes tiennent côte à côte : la section cesse d’être épinglée plutôt que de bloquer la page pendant cinq écrans.
- Le gris du texte qui s’allume a été assombri. Celui de l’original tombe à 2,6:1 sur le fond de section — illisible pour qui ne fait pas défiler la page. Le nôtre est à 4,6:1 et l’effet se voit toujours.
- Trois sections s’écartent de plus de 1 % sous 992 px : l’accueil (+5,2 % à 767 px, −2,4 % à 479 px), les avis (−4,0 % à 479 px) et le pied (+2,6 % à 479 px). Tout vient de l’endroit où les textes se coupent quand la colonne rétrécit. Rien ne se chevauche.
- Les pages internes n’existent pas. L’original est un site multi-pages ; tous ses liens sont ramenés à des ancres de la page unique, et le bouton de contact ouvre le client de messagerie.
- Les photos viennent du template d’origine et plusieurs sont des images générées — leurs noms de fichiers le disent. Le code est à toi ; pour les visuels, vérifie la licence ou remplace-les. Les trois polices, elles, sont sous licence SIL Open Font 1.1 et redistribuables.
Prends-le, ouvre-le, casse-le.
Shirune Studio est gratuit. La bibliothèque complète — les autres templates et les composants — est incluse dans l’abonnement, avec la formation.
Accès immédiat · Sans engagement · Annulation en 1 clic