0 requête externe, 0 dépendance, 0 étape de build
769 Ko chargés, dont 685 de pixel art généré
+0,1 % de hauteur totale par rapport au site d’origine
Ce que c’est
Le site vitrine d’une plateforme d’agents IA, au complet : un héros en pixel art avec sa pile de notifications, un bandeau de clients, une maquette d’orchestration, quatre chapitres de guide en couvertures de livres, quatre blocs produit, une section ciel à trois onglets, une grille de mots mêlés animée et un pied de page. Une page, un fichier HTML.
Le sujet de ce template, c’est la maquette d’interface. Les huit écrans de produit qu’il montre — la roue des départements, le kanban de démarrage, la conversation d’agent, l’aperçu d’e-mail, le rapport de campagne, le tableau analytique, la file de tâches, la rangée de départements — sont tous en HTML et en CSS. Il n’y a pas une seule capture d’écran dans le dossier. C’est ce qui les rend modifiables : changer un chiffre du rapport de campagne, c’est changer un <dd>.
Le design suit celui d’un site commercial dont seule la structure a été conservée. Tout le code a été réécrit : l’original embarquait un bundle React de Next.js, 147 Ko de Tailwind compilé, trois scripts d’analyse tierce et des styles en ligne sur chaque bloc animé — que la politique de sécurité stricte du site rejette purement et simplement.
Ce que tu changes en premier
Les couleurs — douze lignes
Tout en haut de assets/css/style.css :
--accent: #2b3fc4; /* fills a surface: buttons, chips, the stroke */
--accent-deep: #1e2c8f; /* writes on a light surface, and hovers */
--accent-soft: #dfe3fb; /* tints a chip, never text */
--surface: #f5f5f2; /* the page */
--sky: #0756d0; /* the blue the illustrations are painted in */Une chose à comprendre avant de toucher au reste : il y a trois indigos, pas un. L’accent plein porte du blanc à 8,04:1 ; le foncé écrit sur la page à 10,61:1. Sur le ciel des illustrations, on écrit en blanc (6,46:1) et jamais en accent éclairci, qui n’y atteindrait pas 3:1. En changer un oblige à changer les trois.
Le nom
Cherche « Solvane » dans index.html. Aucune classe CSS ne porte le nom de la marque : un rechercher-remplacer ne peut rien casser.
La grille de mots mêlés
La grille de lettres et ses onze surligneurs sont produits par _mesures/grille-mots.py, à graine fixe. Change la liste des métiers en tête du fichier, relance-le, et recopie le HTML et les grid-area qu’il imprime.
Les douze effets, et comment ils sont faits
Le site d’origine écrit toutes ses animations en CSS — 36 @keyframes, aucune animation-timeline. Elles ont donc été lues à la milliseconde dans sa feuille de style, plutôt qu’estimées à l’œil.
| Effet | Où | Comment |
|---|---|---|
| Apparition au défilement | 26 blocs | IntersectionObserver, déclenché à 15 % du bas de l’écran |
| Pile de notifications | héros | un ressort de 520 ms, 140 ms d’écart, dans une perspective de 300 px |
| Voile de lisibilité | héros | un seul dégradé, horizontal sur grand écran, vertical sur mobile |
| Boucle des logos | bandeau clients | 20 s linéaires, une rangée clonée, sous 767 px seulement |
| Réponse qui s’écrit | maquette d’orchestration | trois blocs fantômes qui montent de 6 px, à 0 / 400 / 800 ms |
| Paquets sur les câbles | maquette d’orchestration | stroke-dasharray: 4 96 sur pathLength="100" |
| Tracé des courbes | tableau analytique | dashoffset de 100 à 0 en 1,4 s, trois courbes à 160 ms d’écart |
| Pile de feuilles | guide | deux feuilles en ::before / ::after, soulevées au survol |
| Onglets | section ciel | des radios natifs, lus depuis l’ancêtre avec :has() ; le script n’ajoute que la rotation de 7 s |
| Trait des mots mêlés | industries | un <rect> arrondi en pathLength="1000", tracé en 1020 ms |
| Lettres qui s’allument | industries | elles suivent le trait, 800 ms répartis sur le mot |
| Ouverture du menu | mobile | clip-path: circle(0% → 180% at 100% 0), 520 ms |
Ce qu’il faut savoir
- Aucune requête externe. Mesuré à 390, 1440 et 2560 px : toutes les requêtes sont locales. L’original chargeait trois domaines d’analyse.
- L’apparition au défilement ne peut pas masquer le contenu. L’état caché n’existe qu’une fois le JavaScript exécuté. Vérifié en le coupant : 15 titres sur 15 restent visibles, les trois panneaux d’onglets se suivent, les onze traits de la grille sont dessinés.
-
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 le
style="--notif-rotate-y:-12deg"de l’original enfreint. Le fichier_headersporte la politique et le banc la sert, si bien que la page est mesurée telle qu’elle part. - Toutes les illustrations en pixel art sont générées, donc libres de droit. Aucune image de l’original ne subsiste.
- Accessibilité : lien d’évitement, état du menu annoncé, décorations masquées aux lecteurs d’écran, un focus visible unique tracé hors de la boîte, animations coupées si le système le demande — délais compris.
- Responsive vérifié à 390, 1440 et 2560 px, au chargement et après défilement complet, sans aucun débordement horizontal.
Ce qui n’est pas parfait
Mieux vaut le dire ici que te le laisser découvrir.
- Le héros ne bouge plus. L’original y jouait une vidéo en boucle de 280 Ko. Mesurée image par image, elle ne modifiait que 4,56 % de ses pixels — une brise dans l’herbe. Elle est remplacée par une image fixe au même cadrage ; ce qui donne sa vie au héros, c’est la pile de notifications qui arrive carte après carte.
- Sous 992 px, les maquettes défilent au lieu de déborder. Les fiches qui flottent au-dessus d’elles sur grand écran repassent dans le flux et s’empilent dessous. C’est ce qui explique l’essentiel de l’écart de hauteur en mobile : 4 856 px contre 3 684 sur l’original, qui en masque purement et simplement une partie.
- Le bouton « Download full guide » a disparu. Il servait un PDF de 12,5 Mo. Il descend maintenant aux quatre chapitres.
- Les notifications du héros ont un contenu inventé. Celui de l’original est injecté par son bundle React et n’existe pas dans le HTML servi : il n’y avait rien à relever.
- Les pages secondaires — tarifs, ressources, quatre pages de guide, carrières — sont devenues des ancres de la page unique. Aucun lien ne mène à un 404.
Prends-le, ouvre-le, casse-le.
Solvane 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