Een website die scrollt als film — en toch onder 10 MB blijft.
Hoe de twee Xreative-sites en 30 live demo’s gemaakt zijn: een beeld-pipeline van keyframes via Veo naar 144-185 scroll-frames onder 10 MB, en een code-pipeline van Vite/Astro via Playwright-QA naar de Cloudflare-edge.
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.
Bekijk de pijplijn Naar de live sites
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.
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
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
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: 144 tot 185 stilstaande beelden die het canvas tekent op basis van scrollpositie. De hele keten is erop ingericht dat die reeks onder de 10 MB blijft.
Hoe het werkt
Twee ketens die elkaar in de build ontmoeten
De beeldketen
- Keyframes genereren met een beeldmodel — eerste en laatste beeld van elke overgang, in het palet van het merk
- Die twee keyframes als begin- en eindpunt naar Google Flow/Veo, dat er een vloeiende clip tussen maakt
- Watermerk-resten en artefacten wegpoetsen met eigen scripts (desparkle.py, mirrorfill.py)
- ffmpeg extraheert de frames uit de gemergede clips, met een crossfade op de naad — 144 tot 185 per site
- Breedte per site zo gekozen dat de hele reeks onder het budget van 10 MB blijft (920–1536 px)
- GSAP ScrollTrigger pint de hero 300vh lang en tekent frame ⌊scroll × N⌋ op een canvas, met N het aantal frames van die site
- prefers-reduced-motion krijgt één statisch eindframe — geen scrub, geen pin
De codeketen
- Elk prijsniveau is een eigen buildsysteem: statisch, Astro of Vite — geen gedeelde monoliet
- collect-demos.sh assembleert de 20 builds tot één /voorbeelden/-boom in de hoofdsite
- Fonts self-hosted via @fontsource-variable; geen Google-Fonts-verzoek vanaf de pagina
- Playwright draait QA: 9 scrollposities × desktop/mobiel, en faalt op elke console-error
- Een crawler loopt alle interne links en assets na — de laatste run: 1.273 URL’s, 0 gebroken
- Cloudflare Pages voor de sites, een Worker met static assets voor de studio-site
- 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.
[
Starter
Kappers & barbershops
5 statische one-pagers, handgeschreven HTML/CSS
](https://xreative.neuralex.nl/voorbeelden/starter/kapsalon-nox/)[
Zakelijk
Restaurants & horeca
5 Astro-sites, 7 pagina’s elk
](https://xreative.neuralex.nl/voorbeelden/zakelijk/grand-cafe-statie/)[
Premium
Makelaars & vastgoed
5 Astro-sites, 13–14 pagina’s met objectdetail
](https://xreative.neuralex.nl/voorbeelden/premium/van-dijk-vastgoed/)[
Exclusief
Boutique hotels
5 Vite-sites met cinematische scroll-hero op echte Veo-video
](https://xreative.neuralex.nl/voorbeelden/exclusief/hotel-duinroos/)
Vier categorie-demo's
Elke dienst heeft nu een eigen demo
De vier diensten op de Xreative-site waren tot voor kort alleen woorden. Nu leidt elke regel naar een complete site die die dienst laat zien — met een eigen merk, een eigen letterpaar en een eigen ontwerpidee. Geen van de vier gebruikt een foto: al het beeld is getekend, berekend of een opname van eigen werk.
[
D/01 Websites
Xreative zelf
Een contactvel in plaats van een portfolio: twintig echte opnamen van de draaiende sites, doorlopend genummerd.
](https://xreative.neuralex.nl/voorbeelden/diensten/websites/)[
D/02 Design systems
HALTE — regionaal vervoer
Een stijlkompas dat zichzelf narekent: elk contrastgetal wordt uit de tokens berekend, en de themawissel herberekent ze allemaal.
](https://xreative.neuralex.nl/voorbeelden/diensten/design-systems/)[
D/03 E-commerce
ZAADGOED — zadenhuis sinds 1911
Een complete winkelstroom zonder één foto: elke productillustratie wordt in SVG getekend uit de artikel-id. Mandje, varianten en drie afrekenstappen werken echt.
](https://xreative.neuralex.nl/voorbeelden/diensten/e-commerce/)[
D/04 Motion
KADANS — bureau voor bewegingsontwerp
Een pagina die haar eigen beweging documenteert. De annotatie wordt gegenereerd uit dezelfde constanten die de animatie aandrijven, dus ze kan niet verlopen.
](https://xreative.neuralex.nl/voorbeelden/diensten/motion/)
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.
[
Fjordlys
Boutique hotel
fjordlys.neuralex.nl →
](https://fjordlys.neuralex.nl)[
AEROLITH
Meteorietenkabinet
aerolith.neuralex.nl →
](https://aerolith.neuralex.nl)[
Maertens & Dochters
Vleugelbouwers
maertens.neuralex.nl →
](https://maertens.neuralex.nl)
Calder & Voss Advocatenkantoor, tweetalig calder.neuralex.nl → FORMES Modellenbureau formes.neuralex.nl → Voyage Doré Reismerk paris-voyage.neuralex.nl →
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.
xreative.neuralex.nl xreative-studio.neuralex.nl
Volledige (opgemaakte) versie: https://neuralex.nl/showcase/xreative