Trois sites reviennent en boucle quand un client montre ce qu’il veut : noth.in, buttermax.net et igloo.inc. Ils sont rangés dans la même case mentale, celle des sites qui coûtent cher, alors qu’ils ne jouent pas du tout dans la même division. Le premier se reproduit en deux semaines. Le dernier représente plusieurs mois d’une équipe spécialisée. Ce guide part de l’inspection réelle des trois, fixe ce que 10 000 € achètent vraiment, puis déroule le pipeline complet : outils, commandes, prompts, budget de performance et façon de facturer.
Ce qui tourne vraiment sous le capot
noth.in : Webflow, plus une couche d’animation maison
Attributs data-wf-site, jQuery 3.5.1 et webflow.js servis par le CDN Webflow : c’est un site construit dans le Designer, pas une application. Par-dessus, un bundle d’environ 750 Ko compilé avec Vite et hébergé sur Netlify embarque GSAP et injecte au runtime une feuille de style qui met à opacity:0 tout ce qui porte les attributs [line], [letter], [opacity] ou [scale]. Un seul fichier JS scanne le DOM et anime tout ce qui porte l’attribut. Retenez ce pattern : la sophistication vit dans une couche unique, pas dans cinquante animations câblées à la main.
buttermax.net : Next.js, CMS headless, shaders maison
Next.js en pages router, servi statiquement, données injectées dans __NEXT_DATA__ par un CMS headless auto-hébergé (structure Payload, médias sur un bucket Google Cloud Storage nommé bx-site-cms). Le scroll passe par Lenis. Le chunk de la page d’accueil contient une vingtaine de références à des shaders : les transitions de vignettes sont des plans WebGL, pas des transform CSS. Les études de cas sont des .mp4 de 3 à 5 Mo streamés depuis le bucket, jamais des GIF. Le JSON de la page pèse à lui seul 346 Ko, ce qui dit l’essentiel : le contenu est structuré et éditable, pas codé en dur.
igloo.inc : ce n’est pas un site, c’est une application 3D
Le <body> est vide. Un seul module Vite en entrée, puis un chunk App3D de 1,5 Mo chargé à la demande. Dedans : Three.js et son WebGLRenderer, GSAP avec ScrollTrigger, des modèles GLB compressés en Draco et Meshopt, toutes les textures en KTX2 (format GPU, pas du PNG), un EffectComposer avec bloom, du texte rendu en MSDF pour pouvoir animer la typographie à l’intérieur de la scène, et quatre Web Workers dédiés au décodage EXR, aux bitmaps, aux polices et à l’audio. Il y a du sound design embarqué. Ce niveau ne se sous-traite pas à un prompt : c’est une équipe, un directeur artistique 3D et plusieurs mois de production.
Les trois paliers de prix
- Palier 1, 8 000 à 15 000 € : le niveau noth.in. Une page ou cinq, monochrome, typographie achetée, une couche de motion propre, un moment visuel fort. Reproductible en solo avec l’IA. C’est la cible de ce guide.
- Palier 2, 30 000 à 80 000 € : le niveau buttermax. Ajoutez un CMS complet, des études de cas filmées, des shaders sur mesure, un designer et un développeur pendant deux mois.
- Palier 3, 150 000 € et plus : le niveau igloo. Direction artistique 3D, modélisation, sound design, optimisation GPU. L’IA aide sur le code, elle ne remplace ni le modéleur ni le DA.
Vendre un palier 1 en montrant un palier 3 en référence, c’est la garantie d’un client déçu. La première conversation sert à situer le projet sur cette échelle, pas à promettre l’impossible.
Ce que 10 000 € achètent réellement
Un site à 10 000 €, c’est environ dix-huit jours de travail à 550 € la journée. La répartition honnête :
- Direction artistique et références : 2 jours
- Design des écrans clés, desktop et mobile : 4 jours
- Intégration et développement : 5 jours
- Couche motion : 3 jours
- Contenu, SEO, multilingue : 2 jours
- Recette, performance, accessibilité, mise en ligne : 2 jours
L’IA compresse l’intégration, le développement et une partie du motion : cinq jours au lieu de douze, facilement. Elle ne compresse rien sur la direction artistique, sur la collecte du contenu chez le client, ni sur les allers-retours de validation. Le gain se réinvestit dans le détail, et c’est exactement ce qui sépare un site correct d’un site cher.
La stack à figer une fois pour toutes
La marge ne vient pas de la vitesse sur un projet, elle vient de la répétition. Une seule stack, un seul starter maison, réutilisés dix fois.
- Next.js (App Router) et TypeScript : statique par défaut, images optimisées, déploiement Vercel en une commande.
- Tailwind pour la mise en page, plus un fichier de tokens (couleurs, échelle typographique, durées d’animation). Les tokens avant les composants, toujours.
- GSAP et ScrollTrigger : gratuits depuis 2025, SplitText inclus. C’est la couche motion des trois références.
- Lenis pour le scroll inertiel. Deux lignes de code, un effet immédiat sur la perception de qualité.
- React Three Fiber uniquement si la 3D est justifiée. Un site sans 3D bien animé bat toujours un site avec 3D mal optimisée.
- Sanity ou Payload quand le client doit éditer. Sinon du MDX, et on ne facture pas un CMS dont personne ne se servira.
La boîte à outils, hors IA
- Une police payante (Pangram Pangram, Klim, Displaay, Grilli Type) : 50 à 300 € par projet, le meilleur rapport qualité-prix de tout le budget. noth.in tourne sur PP Neue Montreal associée à IBM Plex Mono. Une grotesque payée plus une monospace, c’est déjà l’essentiel de l’effet studio.
- Figma pour trois ou quatre écrans clés, pas pour le site entier. Le reste se décide dans le navigateur, c’est plus rapide avec l’IA.
- Blender et gltf-transform pour la 3D, ou Spline si personne ne sait modéliser. Un GLB passe toujours par la moulinette de compression avant d’entrer dans le repo.
- Rive pour du motion vectoriel interactif : quelques kilo-octets, pilotable au scroll ou au survol, infiniment plus léger qu’une vidéo.
- ffmpeg pour les vidéos de fond, Sharp ou Squoosh pour les images.
- Playwright, en local et via son serveur MCP : c’est ce qui permet à Claude de voir le rendu au lieu de le deviner.
- Midjourney ou Flux pour les textures et visuels d’ambiance, Topaz pour l’agrandissement, Runway pour une boucle vidéo courte quand le client n’a aucun rush exploitable.
- Vercel et Lighthouse CI pour la mise en ligne et le contrôle de performance à chaque commit.
Le pipeline avec Claude, étape par étape
Étape 0 : le fichier de contraintes, pas le prompt
Le levier n’est pas le prompt d’ouverture, c’est le fichier CLAUDE.md posé à la racine du projet. Il est relu à chaque session et il coupe court aux réflexes par défaut : Inter, gradients violets, cards à ombre, animations partout. C’est le prompt fourni en haut de cette fiche. Adaptez-le, versionnez-le, réutilisez-le sur chaque projet. Un site raté sur deux l’est parce que ce fichier n’existait pas.
Étape 1 : la direction artistique avant la première ligne de code
Ne demandez jamais « fais un site dans le style de X ». Donnez-lui le vrai code de X. Récupérez le DOM et les scripts, puis faites-en faire le démontage :
curl -sL https://site-de-reference.com -o ref.html
# puis, dans Claude Code :
"Lis ref.html. Liste : la plateforme et le framework, les librairies
d'animation, les polices exactes, la palette réelle en hexadécimal,
la structure section par section, et le pattern d'animation utilisé.
Ne devine rien : cite pour chaque affirmation la ligne qui la prouve."La différence est nette. Sans le fichier, Claude décrit un site de studio générique de mémoire. Avec le fichier, il sort la vraie stack, les vrais noms de polices et le vrai système d’animation. Les trois démontages en tête de ce guide ont été produits exactement comme ça. Ajoutez le bundle JS au passage, c’est là que se cachent Three.js, Draco et KTX2.
Étape 2 : les tokens, puis les composants
Première chose à faire générer : un fichier de tokens. Couleurs (fond, texte, un accent), échelle typographique en clamp(), rythme d’espacement, durées et courbes d’animation. Tout le reste s’y réfère. Sans cette étape, chaque section repart avec ses propres valeurs et le site devient un patchwork au bout de la troisième. Faites ensuite construire trois primitives seulement : le conteneur, le titre de section et le bouton. Rien d’autre tant que le contenu n’est pas là.
Étape 3 : une section à la fois
« Construis le site » produit une bouillie plausible. Une section par échange, avec le contenu réel, en exigeant que Claude reformule d’abord la mise en page, l’échelle typographique et le motion en trois puces avant d’écrire quoi que ce soit. Vous corrigez la description, ce qui coûte dix secondes, au lieu de corriger 400 lignes de JSX. Le hero prend un tiers du temps total : c’est normal, c’est lui qu’on achète.
Étape 4 : la couche motion, séparée du markup
C’est le point commun technique des trois références, et l’erreur la plus fréquente quand on laisse l’IA improviser. On ne met pas un useEffect avec un tween dans chaque composant. On écrit un fichier unique qui scanne le DOM et anime tout ce qui porte un attribut :
// motion.ts : une seule fois, pour tout le site
gsap.utils.toArray('[data-anim="line"]').forEach((el) => {
const split = new SplitText(el, { type: 'lines' })
gsap.from(split.lines, {
yPercent: 110, opacity: 0,
duration: 0.9, ease: 'expo.out', stagger: 0.06,
scrollTrigger: { trigger: el, start: 'top 85%' },
})
})Le markup ne contient plus que data-anim="line". Tout se règle depuis un endroit, y compris le repli en prefers-reduced-motion, qui n’est pas une option : sans lui, le site est inutilisable pour une partie des visiteurs et il se fait sortir des sélections Awwwards.
Étape 5 : la boucle visuelle, le vrai secret
Un modèle qui ne voit pas son rendu code à l’aveugle. Branchez le serveur MCP Playwright (claude mcp add playwright npx @playwright/mcp@latest) et fermez la boucle :
"Ouvre http://localhost:3000 avec Playwright, capture la page en 1440px
de large puis en 390px. Regarde les deux captures et critique ton propre
rendu contre CLAUDE.md : hiérarchie typographique, densité verticale,
alignements, contraste, tenue du mobile. Donne les cinq corrections les
plus rentables, classées par impact, puis applique les trois premières."Trois tours de cette boucle valent mieux que trente prompts à l’aveugle. C’est là que l’écart avec un site générique se creuse : les espacements se resserrent, la typo se hiérarchise, le mobile arrête de casser.
Étape 6 : les assets, là où meurent les sites
Un GLB brut de Blender pèse 40 Mo et fait planter les mobiles. igloo.inc charge des scènes autrement plus lourdes que les vôtres et reste fluide, parce que tout est compressé avant d’arriver dans le navigateur. Deux commandes couvrent 90 % des cas :
# 3D : maillage Draco + textures KTX2 (souvent -95% de poids)
npx @gltf-transform/cli optimize in.glb out.glb --texture-compress ktx2
# vidéo de fond : sous les 2 Mo, muette, avec une image poster
ffmpeg -i source.mov -an -vf "scale=1600:-2" -c:v libx264 -crf 28
-movflags +faststart hero.mp4
ffmpeg -i hero.mp4 -vframes 1 -q:v 3 hero-poster.jpgLes images passent par next/image en AVIF, avec des dimensions explicites. Les polices sont sous-ensemblées en woff2, deux familles maximum, et seule la police d’affichage est préchargée.
Étape 7 : contenu, SEO et livraison
Le contenu réel arrive avant le design, jamais après. Un texte de remplissage cache toujours un problème de mise en page. Ensuite : balises title et description par page, Open Graph avec une vraie image, données structurées Organization, sitemap, hreflang si le site est multilingue. Livraison avec une vidéo Loom de cinq minutes montrant comment modifier le contenu, et un forfait de maintenance mensuel proposé dès le devis, pas six mois plus tard.
Le budget de performance
Un site lent n’a pas l’air cher, il a l’air cassé. Les seuils à tenir :
- LCP sous 2 secondes en 4G mobile, CLS sous 0,05, INP sous 200 ms
- Moins de 250 Ko de JavaScript compressé, hors bundle 3D, qui se charge à l’entrée dans le viewport
- GLB final sous 3 Mo, textures en KTX2
- Vidéo hero sous 2 Mo, avec poster
- Lighthouse mobile à 90 minimum sur une page sans 3D, 75 minimum sur une page avec scène WebGL
Les cinq détails qui font « cher »
- La typographie payée. Une grotesque de fonderie plus une monospace pour les numéros et les libellés. C’est le signal le plus rapide, et l’IA ne le prendra jamais toute seule.
- La retenue. Un seul accent, un seul moment visuel, une seule idée par écran. Ce qu’on enlève compte plus que ce qu’on ajoute.
- Le motion qui répond. Un curseur qui suit avec du retard, une révélation déclenchée au scroll. Une animation qui s’exécute toute seule en boucle ne coûte rien à l’œil.
- Le rythme du contenu. Titre sous huit mots, paragraphe de manifeste sous quarante. Les sites chers ont peu de texte, très bien placé.
- Les transitions. Un loader court avec un compteur, un fondu entre pages, un état de survol pensé. Trois détails, une demi-journée, et le site change de catégorie.
Les erreurs qui coûtent le projet
- Demander le site entier en un prompt, puis passer trois jours à réparer du code qu’on n’a pas lu.
- Laisser l’IA choisir les polices et la palette. Elle prendra Inter et un dégradé violet, comme des milliers d’autres.
- Accepter chaque diff sans regarder le rendu. Le code compile, la page est laide.
- Empiler les animations. Cinq effets simultanés ne valent pas un seul bien exécuté.
- Oublier
prefers-reduced-motionet la navigation au clavier. - Livrer un GLB non compressé. Le site est magnifique sur votre MacBook et injouable sur le téléphone du client.
Facturer 10 000 € sans rougir
Le prix ne se justifie pas par les jours passés, il se justifie par ce que le site remplace : une identité qui permet de vendre plus cher, un tunnel qui convertit, une position que les concurrents n’ont pas. Un devis lisible : direction artistique et maquettes, développement et motion, contenu et SEO, mise en ligne et formation. Deux allers-retours inclus par phase, les suivants facturés. Ce qui n’est pas inclus est écrit noir sur blanc : rédaction complète, shooting photo, scène 3D sur mesure. Et un forfait mensuel dès la signature, parce qu’un site vivant rapporte plus longtemps qu’un site livré.
L’IA n’a pas rendu ces sites gratuits. Elle a déplacé le travail : moins de temps sur l’intégration, beaucoup plus sur le goût, les contraintes et le détail. C’est plutôt une bonne nouvelle, parce que c’est la partie qui ne se copie pas.