Showcase · Xreative

Een website die scrollt als film — en toch onder 10 MB blijft.

Xreative is het webdesign-spoor van het lab: twee bureau-sites en zesentwintig complete demo-sites, allemaal live op een eigen domein. Deze pagina legt uit hoe ze ontstaan — de beeld-pipeline die van twee keyframes een scrollbare video maakt, en de code-pipeline die er een pagina van bouwt die het framebudget haalt. Wat er te koop is, staat op de sites zelf; hier staat alleen hoe het gemaakt is.

26
live sites op eigen domein
1.273
URL’s gecrawld, 0 gebroken
≤ 10 MB
framebudget per cinematische hero
2
productielijnen: beeld en code
Twee sites, twee stellingen

Hetzelfde lab, twee verschillende antwoorden

De ene site bewijst dat je een cinematische hero volledig kunt rekenen — geen beeldmodel, geen stock, alleen code. De andere bewijst het omgekeerde: dat AI-beeld en een handgeschreven frontend samen een merk kunnen dragen. Beide draaien op dezelfde edge, met dezelfde QA-lat.

Xreative — hero “Wij schrijven websites” met typografische ruis
Bureau-site

Xreative

Het bureau zelf. Een hero die in 180 frames van typografische ruis naar een strak raster gaat — volledig procedureel gerenderd, geen AI-beeld, geen stock. Daaronder vier prijsniveaus met twintig complete voorbeeldsites.

Vite + GSAP180 procedurele frames20 voorbeelden
Bekijk live
Xreative Studio — hero met warm goud licht op glas
Studio-site

Xreative Studio

De oudere zusje-site, met een andere stelling: cinematische merk-sites waarin AI-beeld en handgeschreven frontend samenkomen. Zes van die merken staan live op een eigen subdomein — allemaal vanaf deze pagina te bereiken.

AI-keyframes + Veo6 merk-sitesedge-deploy
Bekijk live
Architectuur

Van twee keyframes tot een scrollbare hero op de edge

Een video op een pagina zetten is makkelijk; hem laten reageren op de scroll is dat niet. De oplossing is de video niet af te spelen maar te ontleden: 180 stilstaande beelden die het canvas tekent op basis van scrollpositie. De hele keten is erop ingericht dat die reeks onder de 10 MB blijft.

Keyframes eerste + laatste beeld in het palet van het merk Flow / Veo overgang tussen A en B 8s · 1920×1080 · 24fps ffmpeg 180 frames + crossfade breedte → budget ≤10 MB Scroll-hero canvas + ScrollTrigger 300vh pin · scrub 0.8 Vite / Astro-build → Playwright-QA → Cloudflare Pages & Workers 0 console-errors als lat · linkcrawl over alle assets · deploy naar de edge, geen open poort
Hoe het werkt

Twee ketens die elkaar in de build ontmoeten

De beeldketen

  1. Keyframes genereren met een beeldmodel — eerste en laatste beeld van elke overgang, in het palet van het merk
  2. Die twee keyframes als begin- en eindpunt naar Google Flow/Veo, dat er een vloeiende clip tussen maakt
  3. Watermerk-resten en artefacten wegpoetsen met eigen scripts (desparkle.py, mirrorfill.py)
  4. ffmpeg extraheert precies 180 frames uit de gemergede clips, met een crossfade op de naad
  5. Breedte per site zo gekozen dat de hele reeks onder het budget van 10 MB blijft (920–1536 px)
  6. GSAP ScrollTrigger pint de hero 300vh lang en tekent frame ⌊scroll × 180⌋ op een canvas
  7. prefers-reduced-motion krijgt één statisch eindframe — geen scrub, geen pin

De codeketen

  1. Elk prijsniveau is een eigen buildsysteem: statisch, Astro of Vite — geen gedeelde monoliet
  2. collect-demos.sh assembleert de 20 builds tot één /voorbeelden/-boom in de hoofdsite
  3. Fonts self-hosted via @fontsource-variable; geen Google-Fonts-verzoek vanaf de pagina
  4. Playwright draait QA: 9 scrollposities × desktop/mobiel, en faalt op elke console-error
  5. Een crawler loopt alle interne links en assets na — de laatste run: 1.273 URL’s, 0 gebroken
  6. Cloudflare Pages voor de sites, een Worker met static assets voor de studio-site
  7. Het contactformulier gaat naar een aparte Worker met Email-binding, want Pages Functions kennen send_email niet
Twintig voorbeelden

Vier niveaus, vier verschillende buildsystemen

De voorbeeldsites zijn geen mockups maar complete sites, elk met eigen navigatie, content en pagina’s. Bewust in oplopende technische zwaarte, zodat je aan de bouw kunt zien wat een niveau betekent — niet alleen aan de prijs.

Zes merken op een eigen subdomein

Dezelfde pijplijn, zes keer een ander verhaal

Het interessante aan een pijplijn is niet de eerste keer dat hij werkt, maar de zesde. Deze merken delen geen enkele regel content en toch dezelfde keten: keyframes, video, frame-extractie, canvas-scrubber. Alle zes fictief — het zijn ontwerpstudies, geen klanten.

Wat hier eerlijk bij hoort

Alle getoonde merken zijn fictief: het zijn ontwerpstudies om de pijplijn te tonen, geen opdrachtgevers. De cijfers op die sites — omzet, jaartallen, aantallen — horen bij die fictie. Toen drie hero-video’s ontbraken zijn ze eerst lokaal gesynthetiseerd uit de bestaande keyframes; die versies zijn later vervangen door echte Veo-clips en bewaard als .synth.bak.mp4, zodat het verschil navolgbaar blijft. En de QA hierboven meet wat hij zegt te meten: interne links en assets, niet of een tekst goed leest.

Gebouwd met ViteAstroGSAP ScrollTriggerffmpegGoogle Flow / VeoPlaywrightCloudflare PagesCloudflare WorkersEmail Routing@fontsource-variable
Zelf kijken

Beide sites staan live op hun eigen subdomein

Xreative is het bureau met vier prijsniveaus en twintig voorbeeldsites. Xreative Studio is de cinematische lijn, met zes merk-sites op een eigen domein. Scroll ze allebei — daar zie je de pijplijn pas echt.