Interactieve Website Met Claude Fable 5: Beeldonthulling
Het effect dat mij op Pinterest deed stoppen was belachelijk simpel. Een donkere foto van een rotswand. Je scrollt, en gras groeit over de rots — behalve dat het niet groeit, het wordt onthuld, alsof het tweede beeld de hele tijd achter het eerste verstopt zat. Geen video. Geen 3D. Twee platte afbeeldingen en een visuele truc.
Ik maakte een screenshot, opende een terminal, en besloot het hele ding na te bouwen als een interactieve website met Claude Fable 5 — de hero, de onthulling, de geanimeerde tekst, alles — zonder zelf CSS te schrijven of een ontwerptool aan te raken. Veertig minuten later had ik een pagina die eruitzag alsof een studio het had opgeleverd. Daarna postte ik een schermopname ervan op X, en de reacties begonnen allemaal dezelfde vraag te stellen: "wacht, hoe."
Dit is het hoe. Niet de gepolijste versie waar alles in één keer werkt — de echte, inclusief het deel waar ik de onthulling op het verkeerde event triggerde en het brak, en de resize-beslissing die het geheel doelbewust deed aanvoelen in plaats van toevallig. Aan het einde kun je hetzelfde effect bouwen, Fable zo aansturen dat het je ontwerp niet bedekt met verlopen, en het resultaat omzetten in het soort post dat mensen daadwerkelijk delen.
Laat me beginnen met het enige dat de meeste mensen fout doen voordat ze zelfs maar een AI-tool openen.
Waarom Ik Bouw Met Claude Fable 5 in de Terminal, Niet in de Browser
Dit is de fout die ik voortdurend zie: mensen proberen interactieve websites te bouwen in een AI-chat in de browser, lopen vast zodra ze twee afbeeldingen gelaagd willen met pixelprecieze positionering, en concluderen "AI kan geen echt ontwerp maken." De tool was het probleem, niet de AI.
Fable 5 is hier oprecht toe in staat. Het werd gelanceerd op 9 juni 2026 als Anthropics krachtigste openbaar beschikbare model — standaard een contextvenster van 1M tokens, tot 128k output-tokens per verzoek, en 80,3% op SWE-Bench Pro terwijl het op-één-na-beste model 11 punten achterbleef (volgens TrueFoundry's benchmark-analyse). Dat langetermijnredeneren is precies wat een interactieve pagina met meerdere lagen nodig heeft. Het moet de hele DOM, de CSS, de scroll-wiskunde en de ontwerpintentie tegelijk in zijn hoofd houden en consistent houden over vijf secties.
Maar het heeft een echte werkruimte nodig om dat te doen. Ik draai het via Claude Code in de terminal, gericht op een echte projectmap, zodat het bestanden kan lezen, bestanden kan schrijven, de volledige pagina kan zien die het bouwt, en kan itereren op een draaiende dev-server. Een browserchat geeft je een fragment en vergeet dat het bestond. De terminal geeft Fable een geheugen van het project — en met een contextvenster van 1M tokens is dat geheugen de hele codebase, niet een vervagende samenvatting.
Er is ook een kostenreden om zo te werken. Fable factureert tegen $10 per miljoen input-tokens en $50 per miljoen output — het dubbele van Opus 4.8, het duurste model dat Anthropic ooit heeft uitgebracht. Het was gratis op Pro en Max van 9 juni tot en met 22 juni 2026, waarna het overschakelde naar gebruikstegoed tegen API-tarieven. Wanneer elke output-token geld kost, wil je niet een hele pagina opnieuw genereren omdat de chat de context is kwijtgeraakt. Je wilt chirurgische bewerkingen aan bestanden die al bestaan. Ik ging diep in op die kostenberekening in mijn Claude Fable AIOS-build, en de les is direct van toepassing op ontwerpwerk: structureer je project zodat Fable bewerkt, niet opnieuw genereert.
Dus: download Claude Code, maak een map aan, en laat Fable werken waar het daadwerkelijk kan denken. Nu het leuke deel — iets vinden dat de moeite waard is om te bouwen.
Op de Juiste Manier Stelen: Van Pinterest Naar een Dark-Mode Bronafbeelding
Ik begin niet met een lege prompt. Ik begin met een referentie, want "bouw me een coole hero" geeft je het gemiddelde van alles wat Fable ooit heeft gezien, en het gemiddelde is vergetelijk.
Pinterest is mijn bron. Ik zoek naar het mechanisme dat ik wil, niet het onderwerp — "scroll reveal landingspagina," "gesplitste afbeelding hover," "minimale donkere hero" — en ik sla alles op waar de interactie het woord doet. De rots-en-gras-afbeelding was een enkele statische pin. De interactie zat helemaal niet in de afbeelding. Ik was het aan het reverse-engineeren vanuit een gevoel.
Twee dingen zijn belangrijk wanneer je een referentie pakt:
Maak het eerst donker. De meeste pins zijn helder. Een website-achtergrond moet dark mode zijn — niet omdat dark mode trendy is, maar omdat donkere achtergronden de naden verbergen. Wanneer je twee afbeeldingen laagt en de ene over de andere onthult, laat een zwarte achtergrond de overgang lezen als bewust contrast in plaats van een zichtbare bewerkingsgrens. Ik prompt Fable's afbeeldingsstap (of een speciaal beeldmodel) om de referentie te nemen en een donkerdere versie met hoger contrast te produceren: "Converteer dit naar een sfeervolle dark-mode scène, bijna-zwarte achtergrond, behoud de rotstextuur, verlaag de algehele helderheid met ongeveer 40%, geen toegevoegd gras."
Genereer twee afbeeldingen, niet één. Dit is de hele truc, en het is de moeite waard om er even bij stil te staan.
De Gelaagde Beeldonthulling: Twee Afbeeldingen Die Doen Alsof Ze Één Zijn
De illusie bestaat uit twee afbeeldingen die precies gecentreerd op elkaar gestapeld zijn, waarbij de bovenste progressief wordt weggeknipt naarmate je scrollt. Eronder zit het "na"-beeld. Erboven het "voor"-beeld.
Voor mijn build betekende dat:
- Basis (bovenste laag): de rotswand, kaal, donker.
- Onthulling (onderste laag): dezelfde rots, nu met gras — dezelfde camerahoek, dezelfde belichting, dezelfde uitsnede.
De twee afbeeldingen moeten perfect overeenkomen behalve het ene ding dat verandert. Dat is waar AI-beeldgeneratie zijn waarde bewijst. Ik genereerde eerst de kale rots, en prompte vervolgens: "Dezelfde scène, dezelfde hoek en belichting, voeg weelderig gras toe dat over het rotsoppervlak groeit, houd de donkere achtergrond identiek." De variatie genereren vanuit het origineel — in plaats van twee onafhankelijke afbeeldingen — is wat de randen uitgelijnd houdt zodat de onthulling niet springt.
Dan de onthulling zelf. De meeste tutorials grijpen naar GSAP ScrollTrigger, en dat werkt, maar voor een enkele hero liet ik Fable het doen met gewone CSS clip-path aangestuurd door scroll — lichter, geen library, en scherpe randen. De techniek: de bovenste afbeelding begint volledig zichtbaar, en naarmate je scrollt, verbergt een clip-path: inset(...) het progressief van één kant, waardoor de grasafbeelding eronder zichtbaar wordt. Clips winnen hier van masks omdat clip paths vectorgebaseerd zijn en scherpe randen produceren terwijl masks zwaarder zijn qua geheugen en berekening.
Hier is de kern van wat Fable schreef, opgeschoond:
.reveal-stack {
position: relative;
display: grid;
place-items: center;
}
/* beide afbeeldingen bezetten dezelfde gridcel, gecentreerd */
.reveal-stack img {
grid-area: 1 / 1;
width: 100%;
height: auto;
}
/* de "voor"-afbeelding zit bovenop en wordt weggeknipt bij scrollen */
.reveal-stack .top {
z-index: 2;
/* --p wordt bijgewerkt van 0 naar 1 naarmate de sectie door het beeld scrollt */
clip-path: inset(0 0 calc(var(--p) * 100%) 0);
}
// stuur --p aan vanuit de scrollpositie van de sectie
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();
De grasafbeelding wordt van onder naar boven onthuld naarmate --p stijgt van 0 naar 1. Wissel de inset-richting en je onthult vanaf een andere rand. Dat is het hele mechanisme. Al het andere is decoratie.
En hier is de fout die ik beloofde. Mijn eerste versie triggerde de onthulling op muishover, omdat dat is wat de originele Pinterest-pin impliceerde. Het voelde goedkoop — je moest de afbeelding vinden en je cursor ernaartoe bewegen, en op mobiel deed het helemaal niets. Overschakelen naar scroll veranderde het hele gevoel. Nu is de onthulling onderdeel van het verhaal van de pagina: je scrollt, de wereld verandert, je scrollt verder. Scroll is een verhaal dat je al aan het lezen bent. Hover is een speeltje dat je moet ontdekken. Voor visuele storytelling wint scroll elke keer — en het werkt op telefoons, waar het merendeel van je verkeer zich bevindt.
Ik leun voortdurend op scroll-gestuurde interactie; ik heb de uitgebreidere versie uiteengezet in mijn stuk over Apple-achtige 3D scroll-animaties bouwen met AI, en hetzelfde instinct geldt hier — koppel het effect aan de ene input die elke bezoeker al gebruikt.
Nog één zet voordat we de onthulling verlaten: ik vroeg Fable om beide afbeeldingen met ongeveer 20% te verkleinen. Op volledige breedte was het effect overweldigend en was de naad makkelijker op te merken. Met 20% ingekort, omlijst door donkere negatieve ruimte, zag het er opeens gecomponeerd uit — als een galerij-stuk in plaats van een screensaver. Die ene resize is het verschil tussen "leuke truc" en "dit ziet er ontworpen uit."
Als je hulp wilt bij het inbouwen van deze onthullingsinteracties in een echte klantpagina in plaats van een demo, is dit precies het soort build dat ik aanneem via mijn Fiverr-profiel — ik doe het graag samen met je of voor je.
Nu leeft de onthulling in een vacuüm. Het heeft een hero eromheen nodig.
De Hero Bouwen: Hoe Ik Fable Aanstuurt Om Te Stoppen Met Rommel Toevoegen
Aan zijn eigen instincten overgelaten, geeft Fable je een "complete" hero: een lussende video-achtergrond, drie feature-kaarten, een verloopgaas, een testimonial en een footer. Al dat concurreert met je ene goede idee. De vaardigheid is niet AI iets laten toevoegen — het is AI laten weglaten.
Mijn hero-prompt is grotendeels een lijst van aftrekkingen:
"Bouw een hero-sectie. Puur zwarte achtergrond, geen verlopen, geen mesh, geen video-achtergrond. Behoud alleen: een minimale bovenste navigatiebalk en één regel grote geanimeerde hero-tekst. Verwijder alle decoratieve secties, kaarten of beelden die je normaal zou toevoegen. Geanimeerde tekst moet reageren op scroll — naar beneden drijven en licht vervagen als de gebruiker voorbij scrollt. Bewaar het lettertype, de dikte en de grootte die je gebruikte; ik wil het consistent over elke sectie die we hierna bouwen."
Die laatste zin doet echt werk. De reden dat AI-gebouwde pagina's er onsamenhanged uitzien is dat elke gegenereerde sectie de typografie opnieuw uitvindt. Door Fable vooraf te vertellen de lettertype-stijlen en -groottes vast te zetten en door te voeren, erft elke sectie die later komt hetzelfde type-systeem. Consistentie is wat leest als "een ontwerper heeft dit gemaakt."
De scroll-reactieve tekst is de tweede kleine dopamine-hit op de pagina. De onthulling behandelt het midden; de hero-tekst behandelt de bovenkant. Terwijl je scrollt, drijft de kop naar beneden en dimt, en geeft het podium over aan het rots-en-gras-effect eronder. Twee aan scroll gekoppelde momenten, gestapeld, zodat het allereerste gebaar dat een bezoeker maakt beloond wordt.
Snelle check voordat we verder gaan: zwarte achtergrond, één nav, één geanimeerde tekstregel, verder niets. Als je hero meer heeft dan dat, heb je meer dan een hero — je hebt rommel in hero-kleding. Ik schreef een heel stuk over geanimeerde hero-secties bouwen met AI als je het bredere menu van effecten wilt, maar voor deze build is terughoudendheid de hele esthetiek.
Nu uitbreiden — zonder Fable te laten vergeten wat het net heeft gebouwd.
De Pagina Uitbreiden: 3–4 Secties Die Niet Met Elkaar Vechten
Een hero alleen is geen landingspagina. Ik vraag Fable om drie tot vier extra secties, en de prompt is ontworpen om alles te behouden wat al werkt:
"Voeg 3–4 secties toe onder de hero. Randvoorwaarden, niet-onderhandelbaar: dezelfde puur zwarte achtergrond, nergens verlopen, hergebruik exact hetzelfde lettertype en dezelfde groottes als de hero, houd layouts simpel en tekstgericht — geen stockfoto-rommel. Elke sectie moet aanvoelen als dezelfde pagina, niet als een nieuw template. Strak, modern, veel negatieve ruimte."
De frase "niet-onderhandelbaar" doet er meer toe dan zou moeten. Fable, op een lange context, behandelt expliciete beperkingen als vangrails die het actief verdedigt — en met een contextvenster van 1M tokens kan het elke vorige sectie in beeld houden terwijl het de volgende schrijft, dus "hergebruik exact hetzelfde lettertype" is geen hoop, het is iets dat het kan verifiëren tegen de bestanden die al op schijf staan. Vage begeleiding ("maak het consistent") drijft af. Harde regels ("nergens verlopen") houden stand.
Wat je krijgt is een pagina waar het oog nooit struikelt. Hetzelfde zwart. Hetzelfde type. Dezelfde genereuze tussenruimte. Het onthullingseffect is het ene moment van beweging, en omdat alles eromheen rustig is, komt dat moment harder aan. Terughoudendheid is niet de afwezigheid van ontwerp — het is het kader dat je ene gedurfde keuze leesbaar maakt.
Omdat Fable dit schreef als echte, semantische HTML en CSS in een projectmap — niet als een vergrendeld template — is het standaard responsief. Flexbox, grid, relatieve eenheden en een paar media-queries die het model zonder gevraagd te worden toevoegt. Ik testte de mijne op 375px en 1440px; de onthulling schaalde, de tekst hervloeide, niets brak. Dat is de stille opbrengst van bouwen in code in plaats van een drag-and-drop-bouwer: mobiele responsiviteit komt gratis omdat de layout nooit vastgepind was op vaste pixels. Voor de analytics-en-experimentatielaag bovenop pagina's als deze heb ik mijn volledige landingspagina-pipeline met MCPs apart gedocumenteerd — daar leeft de A/B-testing.
De pagina is klaar. Nu komt het deel dat bepaalt of iemand het ooit ziet.
De Build Omzetten in een Post Die Mensen Daadwerkelijk Delen
Een mooie pagina die niemand ziet is een dagboeknotitie. Het onthullingseffect is gebouwd om gedeeld te worden — het is een voor/na in één gebaar — dus de distributie moet net zo doordacht zijn als de build.
Dit is wat ik heb geleerd bij het posten hiervan op X:
Post de video, nooit de screenshot. De hele waarde zit in de beweging. Een stilstaand beeld van een donkere rots is niets; de drieseconden-clip van gras dat over de rots omhoog veegt terwijl je scrollt is de hele hook. Video en de eerste drie seconden beweging zijn precies wat het X-algoritme van 2026 beloont, en het platform weegt reacties nu ruwweg 150x zwaarder dan likes — dus een clip die mensen doet vragen "hoe heb je dit gedaan" presteert beter dan alles wat passief is.
Leid met de snelheid en het gebaar. Mijn posts die landen openen met de wrijvingsloze versie van het verhaal: "Ik bouwde deze scroll-onthulling met Claude Fable 5 in één prompt 👇" dan de clip. Mensen reageren om te vragen hoe. Die reacties voeden het algoritme, dat het aan meer mensen toont, die reageren om te vragen hoe. Het mechanisme is de marketing.
Pas elk element aan zodat het jouwe uniek is. Dit is belangrijker dan het klinkt. Als iedereen dezelfde rots post, is het effect tegen dinsdag niet meer nieuw. Verander de afbeeldingen. Verander de kop. Bouw de onthulling rond je eigen onderwerp — een product, een gezicht, een stadsgezicht. Uniciteit is wat iets deelbaar houdt nadat de trend piekt, want de techniek is de trend, en een fris onderwerp laat het weer nieuw aanvoelen.
Noem de tool. "Claude Fable 5" is op dit moment een actieve zoekterm — het is overal behandeld van TechCrunch tot Microsofts eigen Azure-blog sinds de lancering op 9 juni. De trending toolnaam in de post zetten bereikt een publiek dat er al naar zoekt. Je vecht niet om aandacht; je staat waar de aandacht al op gericht is.
Tag de mensen die het interessant zouden vinden. Tag de maker wiens pin je hebt reverse-engineered. Tag tool-accounts. Niet om te bedelen — om uit te nodigen. De helft van mijn beste samenwerkingen begon als een reactie op een post waarin ik iemand tagde en ze terugschreven. Prompt-voorbeelden en herbruikbare assets zweven rond in communities zoals motionsites.ai; het punt is om het gesprek in te gaan, niet om erin te zenden.
Het diepere patroon: bouw iets waarvan de waarde zichtbaar is in drie seconden beweging, en laat het formaat het verkoopwerk doen. Ik houd een hele workflow bij hiervoor — builds omzetten in distributie — in mijn notities over SEO en social media automatiseren met Claude.
Wat Deze Aanpak Fout Doet (Het Eerlijke Deel)
Twee dingen, want doen alsof het anders is zou dit weer zo'n hype-post maken.
De onthulling is een truc, en trucs hebben een houdbaarheidsdatum. De eerste keer dat iemand gras over een rots ziet groeien bij scrollen, is het magie. De veertigste keer is het een cliché. Ik bouw mijn daadwerkelijke producten hier niet omheen — ik gebruik het als een haak om mensen te trekken naar werk dat er substance onder heeft. Als de onthulling het enige idee op je pagina is, heb je een goocheltruc gebouwd, geen product. Gebruik het als een deur, niet als een kamer.
"Eén prompt" is grotendeels een marketingverhaal. Ik zeg "één prompt" in mijn posts omdat het pakkend is en ruwweg waar voor het eerste concept. De realiteit is dat de eerste generatie me 70% daar bracht, en de resterende 30% — het herstellen van de hover-vs-scroll-trigger, de 20%-resize, het doden van de verlopen die Fable er steeds weer insmokkelde — nam een dozijn iteraties. Iedereen die vlekkeloze one-shot output belooft, verkoopt je de demo, niet de workflow. De iteratie is waar de smaak zit, en smaak is nog steeds iets dat jij meebrengt. AI is snelle handen; het oog ben jij. Ik maakte dat punt uitgebreid in waarom AI-webontwerp nog steeds menselijk toezicht nodig heeft.
Er is ook de kostenmuur. Bouw dit tijdens een gratis venster en het voelt wrijvingsloos; bouw het op tegoed tegen $50 per miljoen output-tokens en elke hergeneratie heeft een prijskaartje. Wat terugloopt naar werken in de terminal met chirurgische bewerkingen in plaats van volledige pagina-hergeneraties — geen stijlvoorkeur, een budgetvoorkeur.
Dus wat kun je realistisch verwachten als je dit probeert?
Wat Je Realistisch Kunt Verwachten Als Je Dit Bouwt
Een strakke, responsieve, interactieve single-page site met een werkende scroll-onthulling, een geanimeerde hero en drie of vier consistente secties — in ruim onder een uur zodra je het een keer hebt gedaan. De eerste keer duurt langer; je leert waar Fable te veel levert en waar het harde beperkingen nodig heeft.
De pagina zal responsief zijn zonder dat je zelf media-queries schrijft, omdat het echte code is, geen vastgepind template. Het zal eruitzien alsof een kleine studio het heeft gemaakt, want terughoudendheid plus één gedurfde beweging leest als intentie.
Wat ik niet zal beloven: virale cijfers. Ik heb onthullingsclips gehad die het goed deden en ik heb ze dezelfde week plat zien landen met hetzelfde effect. Viraliteit is geen gegarandeerde output van een goede build — het is een kans die je verhoogt door video te posten, met het gebaar te leiden, de tool te benoemen, en het element aan te passen zodat het jouwe opvalt. Doe die vier dingen consequent en de wiskunde breekt uiteindelijk in je voordeel. Doe ze één keer en hoop, en je gooit met dobbelstenen.
Meet het juiste, ook. Niet likes — reacties en saves. Op het X-algoritme van 2026 zijn dat de signalen die daadwerkelijk accumuleren, en een "hoe heb je dit gebouwd"-reactie is honderd stille likes waard. Als mensen vragen hoe, heb je het juiste gebouwd.
Veelgestelde Vragen
Hoe maak je een beeldonthullingseffect bij scrollen?
Stapel twee overeenkomende afbeeldingen precies gecentreerd, knip dan de bovenste weg met CSS clip-path: inset() aangestuurd door scrollpositie. De onderste afbeelding wordt onthuld naarmate de bovenste progressief verborgen wordt. Clip paths geven scherpe randen en hebben geen JS-animatielibrary nodig voor een enkele hero — zie de sectie over gelaagde afbeeldingen hierboven voor de exacte CSS en scroll-handler.
Kan Claude Fable 5 een volledige interactieve website bouwen?
Ja. Claude Fable 5 bouwt complete responsieve interactieve sites — hero, scroll-effecten, meerdere secties — vooral wanneer het draait via Claude Code in een terminal waar het projectbestanden kan lezen en bewerken. Het contextvenster van 1M tokens laat het de hele pagina consistent houden. Werken in een echte map overtreft een browserchat die context vergeet tussen berichten.
Is een website gebouwd met Claude Fable 5 mobiel responsief?
Over het algemeen ja, omdat Fable echte semantische HTML en CSS schrijft met flexbox, grid en relatieve eenheden in plaats van templates met vaste pixels. Responsiviteit komt van de layoutmethode, niet van handmatig afstemmen. Ik testte de mijne op 375px en 1440px en zowel de onthulling als de typografie schaalde netjes. Controleer altijd op een echt apparaat.
Waarom scroll gebruiken in plaats van hover voor het onthullingseffect?
Scroll-triggers werken op mobiel, waar hover niets doet, en ze vouwen het effect in het natuurlijke verhaal van de pagina. Hover vereist dat de bezoeker het element ontdekt en erop richt; scroll beloont een gebaar dat elke bezoeker al maakt. Voor visuele storytelling en telefoonverkeer is scroll de sterkere trigger.
Wat maakt een AI-gebouwde website viraal op X?
Post een video van de interactie (geen screenshot), leid met het gebaar in de eerste drie seconden, noem de trending tool, en pas je assets aan zodat het effect fris aanvoelt. Het X-algoritme van 2026 weegt reacties ver boven likes, dus een clip die mensen doet vragen "hoe" presteert elke keer beter dan een passief beeld.
De Echte Les
Die Pinterest-pin was een statisch beeld van een rots. Geen code, geen interactie, geen instructies — alleen een gevoel dat ik moest reverse-engineeren. Veertig minuten en een koppige middag later was het een live, scrollende, responsieve pagina waar vreemden op reageerden.
De les is niet "AI bouwt nu websites." Het is dat de kloof tussen iets zien en het uitbrengen is ineengestort tot ongeveer een uur — als je de smaak meebrengt. Fable levert oneindige snelle handen. Het oog dat zegt "verklein het 20%," "schrap het verloop," "trigger het op scroll, niet op hover" — dat ben nog steeds jij. Dat is nog steeds het hele werk.
Dus hier is je volgende uur: vind één pin waar de interactie het woord doet. Open Claude Code. Bouw het na. Post dan de clip en kijk wie vraagt hoe. De eerste persoon die reageert met "wacht, hoe heb je dit gedaan" is het moment dat je begrijpt wat er net is veranderd.
Laten We Samenwerken
Wil je AI-systemen bouwen, workflows automatiseren of je technische infrastructuur opschalen? Ik help je graag.
- Fiverr (maatwerkbuilds & integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (enterprise-oplossingen): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
