Site Web Interactif Avec Claude Fable 5 : Révélation d'Image

Site Web Interactif Avec Claude Fable 5 : Révélation d'Image

L'effet qui m'a arrêté sur Pinterest était stupidement simple. Une photo sombre d'une paroi rocheuse. Vous scrollez et l'herbe pousse sur la roche — sauf qu'elle ne pousse pas, elle est révélée, comme si la deuxième image était cachée derrière la première depuis le début. Pas de vidéo. Pas de 3D. Deux images plates et un tour de passe-passe.

J'ai fait une capture d'écran, ouvert un terminal et décidé de tout reconstruire comme un site web interactif avec Claude Fable 5 — le hero, la révélation, le texte animé, tout — sans écrire le CSS moi-même ni toucher un outil de design. Quarante minutes plus tard, j'avais une page qui semblait sortir d'un studio. Puis j'ai posté un enregistrement d'écran sur X, et les réponses ont commencé à poser la même question : « attends, comment ? »

Voici le comment. Pas la version polie où tout fonctionne du premier coup — la vraie, y compris la partie où j'ai déclenché la révélation sur le mauvais événement et tout cassé, et la décision de redimensionnement qui a fait que tout semblait intentionnel plutôt qu'accidentel. À la fin, vous serez capable de construire le même effet, diriger Fable pour qu'il n'étouffe pas votre design sous les dégradés, et transformer le résultat en le type de publication que les gens partagent vraiment.

Commençons par la seule chose que la plupart des gens font mal avant même d'ouvrir un outil d'IA.

Pourquoi Je Construis Avec Claude Fable 5 dans le Terminal, Pas dans le Navigateur

Voici l'erreur que je vois constamment : les gens essaient de construire des sites web interactifs dans un chat d'IA dans le navigateur, se heurtent à un mur dès qu'ils veulent deux images superposées avec un positionnement au pixel près, et concluent « l'IA ne peut pas faire du vrai design. » L'outil était le problème, pas l'IA.

Fable 5 en est véritablement capable. Il a été lancé le 9 juin 2026 comme le modèle le plus puissant publiquement disponible d'Anthropic — une fenêtre de contexte de 1M de tokens par défaut, jusqu'à 128k tokens de sortie par requête, et 80,3 % sur SWE-Bench Pro avec le meilleur modèle suivant en retard de 11 points (selon l'analyse des benchmarks de TrueFoundry). Ce raisonnement à long horizon est exactement ce dont une page interactive multicouche a besoin. Il doit garder l'ensemble du DOM, le CSS, les calculs de scroll et l'intention de design en tête simultanément et les maintenir cohérents sur cinq sections.

Mais il a besoin d'un vrai espace de travail pour y parvenir. Je l'exécute via Claude Code dans le terminal, pointé vers un vrai dossier de projet, pour qu'il puisse lire des fichiers, écrire des fichiers, voir la page complète qu'il construit et itérer sur un serveur de développement en cours d'exécution. Un chat dans le navigateur vous donne un extrait et oublie qu'il a existé. Le terminal donne à Fable une mémoire du projet — et avec une fenêtre de contexte de 1M, cette mémoire est l'intégralité du code source, pas un résumé qui s'efface.

Il y a aussi une raison de coût pour travailler ainsi. Fable facture 10 $ par million de tokens d'entrée et 50 $ par million de sortie — le double d'Opus 4.8, le modèle le plus cher qu'Anthropic ait jamais lancé. Il était gratuit sur Pro et Max du 9 au 22 juin 2026, puis est passé aux crédits d'utilisation aux tarifs API. Quand chaque token de sortie coûte de l'argent, vous ne voulez pas régénérer une page entière parce que le chat a perdu le contexte. Vous voulez des modifications chirurgicales sur des fichiers qui existent déjà. J'ai approfondi ces calculs de coûts dans ma construction Claude Fable AIOS, et la leçon s'applique directement au travail de design : structurez votre projet pour que Fable édite, pas qu'il ré-émette.

Donc : téléchargez Claude Code, créez un dossier et laissez Fable travailler là où il peut vraiment réfléchir. Maintenant la partie amusante — trouver quelque chose qui vaut la peine d'être construit.

Voler de la Bonne Manière : De Pinterest à une Image Source en Mode Sombre

Je ne commence pas avec un prompt vide. Je commence avec une référence, parce que « construis-moi un hero cool » vous donne la médiane de tout ce que Fable a jamais vu, et la médiane est oubliable.

Pinterest est ma source. Je cherche la mécanique que je veux, pas le sujet — « scroll reveal landing page, » « split image hover, » « minimal dark hero » — et je sauvegarde tout ce où l'interaction parle d'elle-même. L'image de roche et d'herbe était un seul pin statique. L'interaction n'était pas du tout dans l'image. Je faisais de la rétro-ingénierie à partir d'une vibe.

Deux choses comptent quand vous prenez une référence :

Assombrissez-la d'abord. La plupart des pins sont lumineux. Un fond de site web doit être en mode sombre — pas parce que le mode sombre est tendance, mais parce que les fonds sombres cachent les coutures. Quand vous superposez deux images et révélez l'une sur l'autre, un fond noir fait que la transition se lit comme un contraste intentionnel plutôt qu'une bordure d'édition visible. Je demande à Fable à l'étape image (ou à un modèle d'image dédié) de prendre la référence et produire une version plus sombre et à plus fort contraste : « Convertis ceci en une scène mode sombre atmosphérique, fond presque noir, conserve la texture de la roche, réduis la luminosité globale d'environ 40 %, sans herbe ajoutée. »

Générez deux images, pas une. C'est tout le truc, et ça vaut la peine de ralentir.

La Révélation d'Image en Couches : Deux Photos Qui Font Semblant d'Être Une

L'illusion consiste en deux images empilées parfaitement centrées, l'une sur l'autre, avec celle du dessus progressivement découpée au fur et à mesure que vous scrollez. En dessous se trouve l'« après ». Au-dessus se trouve l'« avant ».

Pour ma construction, cela signifiait :

• Base (couche supérieure) : la paroi rocheuse, nue, sombre.
• Révélation (couche inférieure) : la même roche, maintenant avec de l'herbe — même angle de caméra, même éclairage, même cadrage.

Les deux images doivent correspondre parfaitement sauf pour la seule chose qui change. C'est là que la génération d'images par IA justifie son existence. J'ai généré la roche nue d'abord, puis demandé : « Même scène, même angle et éclairage, ajoute de l'herbe luxuriante poussant sur la surface de la roche, garde le fond sombre identique. » Générer la variation à partir de l'original — plutôt que deux images indépendantes — est ce qui maintient les bords alignés pour que la révélation ne saute pas.

Puis la révélation elle-même. La plupart des tutoriels utilisent GSAP ScrollTrigger, et ça fonctionne, mais pour un seul hero j'ai laissé Fable le faire avec du CSS pur clip-path piloté par le scroll — plus léger, sans bibliothèque, et des bords nets. La technique : l'image supérieure commence entièrement visible, et au fur et à mesure que vous scrollez, un clip-path: inset(...) la cache progressivement d'un côté, exposant l'image d'herbe en dessous. Les clip paths battent les masques ici parce que les clip paths sont vectoriels et produisent des bords nets tandis que les masques sont plus lourds en mémoire et en calcul.

Voici le cœur de ce que Fable a écrit, nettoyé :

.reveal-stack {
  position: relative;
  display: grid;
  place-items: center;
}

/* les deux images occupent la même cellule de grille, centrées */
.reveal-stack img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

/* l'image "avant" se place au-dessus et est découpée au scroll */
.reveal-stack .top {
  z-index: 2;
  /* --p est mis à jour de 0 à 1 pendant que la section défile */
  clip-path: inset(0 0 calc(var(--p) * 100%) 0);
}

// piloter --p à partir de la position de scroll de la section
const stack = document.querySelector('.reveal-stack');
const onScroll = () => {
  const rect = stack.getBoundingClientRect();
  const progress = 1 - Math.min(Math.max(rect.bottom / window.innerHeight, 0), 1);
  stack.style.setProperty('--p', progress.toFixed(3));
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();

L'image d'herbe est révélée de bas en haut au fur et à mesure que --p monte de 0 à 1. Changez la direction de l'inset et vous révélez depuis un bord différent. C'est tout le mécanisme. Tout le reste est de la décoration.

Et voici l'erreur que j'avais promise. Ma première version déclenchait la révélation au survol de la souris, parce que c'est ce que le pin Pinterest original impliquait. Ça faisait cheap — il fallait trouver l'image et agiter son curseur dessus, et sur mobile ça ne faisait rien du tout. Passer au scroll a changé toute la sensation. Maintenant la révélation fait partie de la narration de la page : vous scrollez, le monde change, vous continuez à scroller. Le scroll est une histoire que vous êtes déjà en train de lire. Le hover est un jouet que vous devez découvrir. Pour la narration visuelle, le scroll gagne à chaque fois — et il fonctionne sur les téléphones, où vit la majorité de votre trafic.

Je m'appuie constamment sur l'interaction pilotée par le scroll ; j'ai détaillé la version plus poussée dans mon article sur la construction d'animations 3D de scroll style Apple avec l'IA, et le même instinct s'applique ici — liez l'effet à la seule entrée que chaque visiteur utilise déjà.

Un dernier mouvement avant de quitter la révélation : j'ai demandé à Fable de réduire les deux images d'environ 20 %. En pleine largeur, l'effet était écrasant et la couture était plus facile à repérer. Réduit de 20 %, encadré par de l'espace négatif sombre, ça avait soudain l'air composé — comme une pièce de galerie plutôt qu'un économiseur d'écran. Ce seul redimensionnement fait la différence entre « astuce sympa » et « ça a l'air conçu ».

Si vous voulez de l'aide pour construire ces interactions de révélation dans une vraie page client plutôt qu'une démo, c'est exactement le type de construction que j'accepte via mon profil Fiverr — heureux de le faire avec vous ou pour vous.

Maintenant la révélation vit dans le vide. Elle a besoin d'un hero autour d'elle.

Construire le Hero : Comment Je Demande à Fable d'Arrêter d'Ajouter du Superflu

Laissé à ses propres instincts, Fable vous donnera un hero « complet » : un fond vidéo en boucle, trois cartes de fonctionnalités, un dégradé mesh, un témoignage et un pied de page. Tout entre en compétition avec votre seule bonne idée. La compétence n'est pas de faire ajouter à l'IA — c'est de la faire se retenir.

Mon prompt pour le hero est principalement une liste de soustractions :

« Construis une section hero. Fond noir pur, pas de dégradés, pas de mesh, pas de fond vidéo. Garde uniquement : une barre de navigation supérieure minimaliste et une ligne de texte hero grand et animé. Supprime toute section décorative, carte ou image que tu ajouterais normalement. Le texte animé doit réagir au scroll — glisser vers le bas et s'estomper légèrement quand l'utilisateur scrolle. Conserve la famille de polices, le poids et la taille que tu as utilisés ; je veux que ce soit cohérent dans chaque section qu'on construira ensuite. »

Cette dernière phrase fait un vrai travail. La raison pour laquelle les pages construites par l'IA semblent décousues est que chaque section générée réinvente la typographie. En disant à Fable dès le départ de verrouiller les styles et tailles de police et de les porter en avant, chaque section suivante hérite du même système typographique. La cohérence est ce qui se lit comme « un designer a fait ça ».

Le texte réactif au scroll est le deuxième petit coup de dopamine sur la page. La révélation gère le milieu ; le texte du hero gère le haut. Au fur et à mesure que vous scrollez, le titre glisse vers le bas et s'assombrit, cédant la scène à l'effet de roche et d'herbe en dessous. Deux moments liés au scroll, empilés, pour que le tout premier geste d'un visiteur soit récompensé.

Vérification rapide avant de continuer : fond noir, une navigation, une ligne de texte animé, rien d'autre. Si votre hero a plus que ça, vous avez plus qu'un hero — vous avez du désordre qui porte les vêtements d'un hero. J'ai écrit un article complet sur la construction de sections hero animées avec l'IA si vous voulez le menu plus large d'effets, mais pour cette construction, la retenue est toute l'esthétique.

Maintenant étendez — sans laisser Fable oublier ce qu'il vient de construire.

Étendre la Page : 3–4 Sections Qui Ne Se Font Pas Concurrence

Un hero seul n'est pas une landing page. Je demande à Fable trois ou quatre sections supplémentaires, et le prompt est conçu pour préserver tout ce qui fonctionne déjà :

« Ajoute 3–4 sections sous le hero. Contraintes, non négociables : même fond noir pur, pas de dégradés nulle part, réutilise exactement la même famille de polices et tailles du hero, garde les mises en page simples et centrées sur le texte — pas de photos de banque d'images. Chaque section doit donner l'impression d'être la même page, pas un nouveau template. Propre, moderne, beaucoup d'espace négatif. »

L'expression « non négociables » compte plus qu'elle ne devrait. Fable, avec un long contexte, traite les contraintes explicites comme des garde-fous qu'il défend activement — et avec une fenêtre de 1M de tokens il peut garder chaque section précédente en vue tout en écrivant la suivante, donc « réutilise exactement la police » n'est pas un espoir, c'est quelque chose qu'il peut vérifier contre les fichiers déjà sur le disque. L'orientation vague (« fais-le cohérent ») dérive. Les règles dures (« pas de dégradés nulle part ») tiennent.

Ce que vous obtenez est une page où l'œil ne trébuche jamais. Même noir. Même typographie. Même espacement généreux. L'effet de révélation est le seul moment de mouvement, et parce que tout autour est calme, ce moment frappe plus fort. La retenue n'est pas l'absence de design — c'est le cadre qui rend votre seul choix audacieux lisible.

Comme Fable a écrit cela en vrai HTML sémantique et CSS dans un dossier de projet — pas comme un template verrouillé — c'est responsive par défaut. Flexbox, grid, unités relatives et quelques media queries que le modèle ajoute sans qu'on le demande. J'ai testé le mien à 375px et 1440px ; la révélation a mis à l'échelle, le texte s'est redistribué, rien n'a cassé. C'est le bénéfice silencieux de construire en code plutôt que dans un constructeur drag-and-drop : la responsivité mobile est gratuite parce que la mise en page n'a jamais été fixée à des pixels absolus. Pour la couche d'analytique et d'expérimentation sur des pages comme celle-ci, j'ai documenté mon pipeline complet de landing page avec MCPs séparément — c'est là que vivent les tests A/B.

La page est terminée. Maintenant vient la partie qui décide si quelqu'un la verra un jour.

Transformer la Construction en une Publication Que les Gens Partagent Vraiment

Une belle page que personne ne voit est un journal intime. L'effet de révélation est fait pour être partagé — c'est un avant/après en un seul geste — donc la distribution doit être aussi délibérée que la construction.

Voici ce que j'ai appris en publiant cela sur X :

Publiez la vidéo, jamais la capture d'écran. Toute la valeur est dans le mouvement. Une image fixe d'une roche sombre ne vaut rien ; le clip de trois secondes de l'herbe montant sur la roche pendant que vous scrollez est tout l'accroche. La vidéo et les trois premières secondes de mouvement sont exactement ce que l'algorithme X de 2026 récompense, et la plateforme pondère maintenant les réponses environ 150 fois plus que les likes — donc un clip qui fait demander « comment tu as fait ça » surpasse tout contenu passif.

Menez avec la vitesse et le geste. Mes publications qui marchent ouvrent avec la version sans friction de l'histoire : « J'ai construit cette révélation au scroll avec Claude Fable 5 en un seul prompt 👇 » puis le clip. Les gens répondent pour demander comment. Ces réponses nourrissent l'algorithme, qui le montre à plus de personnes, qui répondent pour demander comment. La mécanique est le marketing.

Personnalisez chaque ressource pour que la vôtre soit unique. C'est plus important que ça en a l'air. Si tout le monde publie la même roche, l'effet cesse d'être nouveau dès mardi. Changez les images. Changez le titre. Construisez la révélation autour de votre propre sujet — un produit, un visage, un panorama urbain. L'unicité est ce qui maintient quelque chose partageable après que la tendance a atteint son pic, parce que la technique est la tendance, et un sujet frais le fait paraître nouveau à nouveau.

Nommez l'outil. « Claude Fable 5 » est un terme de recherche actif en ce moment — il a été couvert partout de TechCrunch au propre blog Azure de Microsoft depuis le lancement du 9 juin. Mettre le nom de l'outil tendance dans la publication connecte avec un public qui le cherche déjà. Vous ne vous battez pas pour l'attention ; vous êtes là où l'attention pointe déjà.

Taguez les personnes concernées. Taguez le créateur dont vous avez démonté le pin. Taguez les comptes d'outils. Pas pour mendier — pour inviter. La moitié de mes meilleures collaborations ont commencé comme une réponse sur un post où j'ai tagué quelqu'un et ils ont répondu. Les exemples de prompts et les ressources réutilisables circulent dans des communautés comme motionsites.ai ; le but est d'entrer dans la conversation, pas de diffuser vers elle.

Le schéma plus profond : construisez quelque chose dont la valeur est visible en trois secondes de mouvement, puis laissez le format faire la vente. Je maintiens tout un workflow pour ça — transformer des constructions en distribution — dans mes notes sur automatiser le SEO et les réseaux sociaux avec Claude.

Ce Que Cette Approche Fait Mal (La Partie Honnête)

Deux choses, parce que prétendre le contraire ferait de ceci encore un post de hype.

La révélation est un truc, et les trucs ont une date d'expiration. La première fois que quelqu'un voit de l'herbe pousser sur une roche en scrollant, c'est de la magie. La quarantième fois, c'est un cliché. Je ne construis pas mes vrais produits autour de ça — je l'utilise comme accroche pour attirer les gens vers du travail qui a de la substance en dessous. Si la révélation est la seule idée sur votre page, vous avez construit un tour de magie, pas un produit. Utilisez-le comme une porte, pas comme une pièce.

« Un prompt » est surtout une histoire marketing. Je dis « un prompt » dans mes publications parce que c'est percutant et à peu près vrai pour le premier brouillon. La réalité est que la première génération m'a amené à 70 %, et les 30 % restants — corriger le déclencheur hover-vs-scroll, le redimensionnement de 20 %, tuer les dégradés que Fable continuait à glisser — ont pris une douzaine d'itérations. Quiconque promet une sortie parfaite du premier coup vous vend la démo, pas le workflow. L'itération est là où vit le goût, et le goût est encore le vôtre. L'IA, ce sont des mains rapides ; l'œil, c'est vous. J'ai argumenté cela longuement dans pourquoi le design web avec l'IA a encore besoin de supervision humaine.

Il y a aussi le mur des coûts. Construisez cela pendant une fenêtre gratuite et ça semble sans friction ; construisez-le avec des crédits à 50 $ par million de tokens de sortie et chaque régénération a un prix. Ce qui nous ramène à travailler dans le terminal avec des éditions chirurgicales plutôt que des ré-émissions de page entière — pas une préférence de style, une préférence de budget.

Alors, à quoi devriez-vous réellement vous attendre si vous essayez cela ?

Ce à Quoi S'Attendre Réalistement Quand Vous Construisez Cela

Un site interactif propre, responsive, d'une seule page avec une révélation au scroll fonctionnelle, un hero animé et trois ou quatre sections cohérentes — en bien moins d'une heure une fois que vous l'avez fait une fois. La première fois prendra plus de temps ; vous apprenez où Fable en fait trop et où il a besoin de contraintes dures.

La page sera responsive sans que vous écriviez des media queries à la main, parce que c'est du vrai code, pas un template figé. Elle aura l'air d'avoir été faite par un petit studio, parce que la retenue plus un mouvement audacieux se lit comme de l'intention.

Ce que je ne promettrai pas : des chiffres viraux. J'ai eu des clips de révélation qui ont bien marché et d'autres qui sont tombés à plat la même semaine avec le même effet. La viralité n'est pas un résultat garanti d'une bonne construction — c'est une probabilité que vous augmentez en publiant la vidéo, en menant avec le geste, en nommant l'outil et en personnalisant la ressource pour que la vôtre se démarque. Faites ces quatre choses de manière cohérente et les maths finissent par tourner en votre faveur. Faites-les une fois et espérez, et vous lancez des dés.

Mesurez la bonne chose aussi. Pas les likes — les réponses et les sauvegardes. Sur l'algorithme X de 2026, ce sont les signaux qui s'accumulent vraiment, et une réponse « comment tu as construit ça ? » vaut cent likes silencieux. Si les gens demandent comment, vous avez construit la bonne chose.

Questions Fréquemment Posées

Comment créer un effet de révélation d'image au scroll ?

Empilez deux images correspondantes parfaitement centrées, puis découpez celle du dessus avec CSS clip-path: inset() piloté par la position du scroll. L'image du dessous est révélée au fur et à mesure que celle du dessus est progressivement cachée. Les clip paths donnent des bords nets et n'ont pas besoin d'une bibliothèque d'animation JS pour un seul hero — consultez la section image en couches ci-dessus pour le CSS et le gestionnaire de scroll exacts.

Claude Fable 5 peut-il construire un site web interactif complet ?

Oui. Claude Fable 5 construit des sites interactifs responsive complets — hero, effets de scroll, sections multiples — surtout quand il est exécuté via Claude Code dans un terminal où il peut lire et éditer les fichiers du projet. Son contexte de 1M de tokens lui permet de garder toute la page cohérente. Travailler dans un vrai dossier bat un chat navigateur qui oublie le contexte entre les messages.

Un site web construit avec Claude Fable 5 est-il responsive mobile ?

Généralement oui, parce que Fable écrit du vrai HTML sémantique et du CSS avec flexbox, grid et des unités relatives plutôt que des templates en pixels fixes. La responsivité vient de la méthode de mise en page, pas de l'ajustement manuel. J'ai testé le mien à 375px et 1440px et la révélation comme la typographie se sont adaptées proprement. Vérifiez toujours sur un vrai appareil.

Pourquoi utiliser le scroll plutôt que le hover pour l'effet de révélation ?

Les déclencheurs de scroll fonctionnent sur mobile, où le hover ne fait rien, et ils intègrent l'effet dans la narration naturelle de la page. Le hover exige que le visiteur découvre et vise l'élément ; le scroll récompense un geste que chaque visiteur fait déjà. Pour la narration visuelle et le trafic mobile, le scroll est le déclencheur le plus fort.

Qu'est-ce qui fait qu'un site web construit avec l'IA devient viral sur X ?

Publiez une vidéo de l'interaction (pas une capture d'écran), menez avec le geste dans les trois premières secondes, nommez l'outil tendance et personnalisez vos ressources pour que l'effet paraisse frais. L'algorithme X de 2026 pondère les réponses bien au-dessus des likes, donc un clip qui fait demander « comment ? » surpasse une image passive à chaque fois.

La Vraie Conclusion

Ce pin Pinterest était une image statique d'une roche. Pas de code, pas d'interaction, pas d'instructions — juste une vibe que j'ai dû déconstruire par rétro-ingénierie. Quarante minutes et un après-midi obstiné plus tard, c'était une page en direct, scrollable, responsive, à laquelle des inconnus répondaient.

La leçon n'est pas « l'IA construit des sites web maintenant. » C'est que l'écart entre voir quelque chose et le publier s'est effondré à environ une heure — si vous apportez le goût. Fable fournit des mains rapides infinies. L'œil qui dit « réduis de 20 %, » « tue le dégradé, » « déclenche au scroll, pas au hover » — c'est encore vous. C'est encore tout le travail.

Alors voici votre prochaine heure : trouvez un pin où l'interaction parle d'elle-même. Ouvrez Claude Code. Reconstruisez-le. Puis postez le clip et regardez qui demande comment. La première personne qui répond « attends, comment tu as fait ça ? » est le moment où vous comprendrez ce qui vient de changer.

Travaillons Ensemble

Vous cherchez à construire des systèmes d'IA, automatiser des workflows ou faire évoluer votre infrastructure technologique ? J'adorerais vous aider.

• Fiverr (constructions personnalisées et intégrations) : fiverr.com/s/EgxYmWD