0 requête externe, 0 dépendance, 0 étape de build
12 animations relevées dans le moteur d’animation de la référence
−0,1 % de hauteur totale face au site de référence
Ce que c’est
Le portfolio d’un photographe, au complet : une fenêtre d’ouverture pleine hauteur avec sa chorégraphie de chargement, une introduction collante devant laquelle le portrait défile, trois séries de photos dont les tirages s’écartent en éventail au défilement, un film dans un cadre qui s’incline vers le curseur, et une adresse e-mail géante traversée de prismes. Une page, un seul fichier HTML.
Le dessin suit celui d’un template commercial. Rien de ses médias n’a été conservé : les douze photographies ont été régénérées, la vidéo de fond a été remplacée par un dégradé CSS, et les deux images de prisme de la section contact sont désormais un dégradé masqué. Tout le code a été réécrit — l’original livrait 120 Ko de CSS minifié, 1,4 Mo de bundles, un moteur d’animation propriétaire et un panier e-commerce qui appelle une API inexistante dès qu’on quitte son outil.
C’est tout l’intérêt : ce template n’est pas là pour être admiré, il est là pour être lu, cassé et reconstruit.
Ce que tu changes en premier
Le nom — trois endroits
Le logotype est du texte, pas un SVG exporté : la marque de la barre de navigation, le <h1> de la fenêtre d’ouverture et le <title>. Si le nom de ton studio est plus long ou plus court qu’« Elowen », pousse --wordmark (37,3 vw pour six lettres) jusqu’à ce que le mot remplisse sa boîte. Aucune classe CSS ne porte le nom de la marque.
Le spectre — un dégradé
Tout en haut de assets/css/style.css :
--spectrum: linear-gradient(270deg,
#2b3fa8, #2f8fd0 19%, #17936f 44%, #f4b53c 67%, #e2453c 89%);Une chose à saisir avant de toucher au reste : le site n’a pas de couleur d’accent unie. Sa signature, c’est ce prisme, et il sert trois fois — étalé à 50 px de flou derrière les titres de série, incliné en travers de la fenêtre d’ouverture en color-dodge, et masqué en deux anneaux dans la section contact. Change-le une fois, les trois changent ensemble.
Les tailles
Six paliers, --h1 à --h6, déclarés une fois puis redéclarés à 991, 767 et 479 px. Un titre n’a jamais sa propre media query : change --h3 et tous les titres de section de la page suivent.
Les douze effets, et comment ils sont faits
Tous relevés dans les données du moteur d’animation de l’original — 150 événements sur cette page, sortis du store puis dédupliqués à 69 animations distinctes, dont 18 s’appliquent réellement ici. Regroupés en douze effets, avec les durées, les courbes et les délais de l’original.
| Effet | Où | Comment |
|---|---|---|
| Chorégraphie de chargement | fenêtre d’ouverture | cinq photos montent de 60 vh, se redressent en 500 ms, puis celle du milieu grandit ×12 en 1300 ms |
| Texte qui monte dans le champ | partout | +100 %, 16° d’inclinaison et 10 px de flou → 0, déclenché à 15 % du bas de l’écran |
| Parallaxe du portrait | introduction | −10 % → 13 % dans un cadre 20 % plus haut que lui, lissage 80 |
| Tirages en éventail | 3 séries | deux cartes voyageant sur quatre canaux chacune, tout arrivant à 55 % du défilement |
| Cadre qui s’incline | film | rotateY ±5°, rotateX ∓5°, la photo glissant en sens inverse ; perspective sur le parent, rotation sur l’enfant |
| Arrivée de l’e-mail | contact | l’adresse entre depuis 100 vw, deux prismes grandissent et tournent de 279°, une copie d’ombre sort par-derrière |
| Survol des boutons | partout | un panneau blanc garé une hauteur plus bas remonte, le libellé passe au noir et se floute un cinquième de seconde |
| Survol du logotype | navigation | une ondulation de 3 px hors mise au point, puis retour |
| Menus déroulants | navigation | survol et focus clavier, en CSS seul, avec 200 ms de délai à la fermeture pour traverser l’espace vide |
| Menu plein écran | navigation | une case à cocher, déroulée au clip-path |
| Fuite de lumière | fenêtre d’ouverture | un spectre flouté en color-dodge, à la dérive sur 24 s |
| Grain argentique | toute la page | une tuile de turbulence SVG écrite dans la feuille de style, 0,4 Ko |
Ce qu’il faut savoir
- Aucune requête externe. Tout est local : polices, photographies, scripts. L’original chargeait cinq bundles depuis deux domaines.
-
Les apparitions au défilement ne peuvent pas masquer le contenu. L’état caché n’existe qu’une fois le JavaScript exécuté. Vérifié en retirant les
<script>: 6 titres visibles sur 6, 0 bloc caché, et la fenêtre d’ouverture est déjà assemblée. L’original, lui, posaitstyle="opacity:0"sur chaque bloc animé. -
Zéro style en ligne, zéro script en ligne. Le template respecte la politique de sécurité stricte du site — celle-là même que
style="opacity:0"fait tomber. - Le déclenchement se fait à 15 % du bas de l’écran, mesurés sur l’écran et non sur l’élément : un seuil donné en part de l’élément laisserait invisible à jamais tout ce qui est plus haut que l’écran.
- Accessibilité : lien d’évitement, état du menu annoncé, décorations masquées aux lecteurs d’écran, un seul contour de focus visible, animations coupées si le système le demande — délais compris.
- Responsive vérifié à 390, 479, 767, 991, 1440 et 2560 px, au chargement comme après défilement complet, sans débordement horizontal.
Ce qui n’est pas parfait
Mieux vaut le dire ici que te le laisser découvrir.
- La vidéo de fond n’a pas été refaite. L’original sert un clip de 4 Mo de lumière traversant un prisme, fondu en color-dodge. Il est remplacé par un dégradé CSS au même mode de fusion et à la dérive lente : le geste est le même, le poids passe de 4 Mo à rien. C’est une lumière plus régulière qu’une vraie prise de vue.
- Le panier e-commerce a été retiré. Hors de son outil d’origine, il appelait une API inexistante. L’entrée « Tirages » ouvre un e-mail de commande à la place.
- L’original compte plusieurs pages — à propos, démarche, boutique, trois variantes d’accueil, trois variantes de contact. Tout est ramené à des ancres de la page unique, et la navigation garde deux des quatre menus déroulants : les deux qui mènent quelque part.
- Les quatre petites photos et la deuxième carte de chaque série disparaissent sous 992 px, comme dans l’original : sur un écran étroit, elles se poseraient les unes sur les autres.
- La séquence d’ouverture dure trois secondes avant que le logotype n’arrive. C’est long, et c’est la minuterie de l’original.
- Le logotype fait six lettres là où l’original en avait dix. Mesurées côte à côte, les deux lignes de base sont à cinq pixels l’une de l’autre et le mot remplit la même largeur — mais les lettres sont forcément plus hautes, et « Elowen » n’a aucune jambage à laisser pendre sous le cadre. Même cause pour le titre de l’introduction, qui se replie sur une ligne de moins sous 992 px.
-
Le film n’a pas de lecteur : le cadre est un lien. Brancher une
<video>ou une fenêtre modale demande une vingtaine de lignes.
Il t’attend dans la bibliothèque.
Elowen est inclus dans l’abonnement, avec le reste de la bibliothèque et la formation complète.
Accès immédiat · Sans engagement · Résiliable en un clic