> Bron: https://neuralex.nl/showcase/xreative > 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](#pijplijn) [Naar de live sites](#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. [![Xreative — hero “Wij schrijven websites” met typografische ruis](/img/xreative/xreative-hero.jpg)](https://xreative.neuralex.nl) 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](https://xreative.neuralex.nl) [![Xreative Studio — hero met warm goud licht op glas](/img/xreative/studio-hero.jpg)](https://xreative-studio.neuralex.nl) 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](https://xreative-studio.neuralex.nl) 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 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 de frames uit de gemergede clips, met een crossfade op de naad — 144 tot 185 per site 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 × N⌋ op een canvas, met N het aantal frames van die site 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. [ ![Kapsalon Nox — starter-voorbeeld](/img/xreative/vb-starter.jpg) ### Starter Kappers & barbershops 5 statische one-pagers, handgeschreven HTML/CSS ](https://xreative.neuralex.nl/voorbeelden/starter/kapsalon-nox/)[ ![Grand Café Statie — zakelijk voorbeeld](/img/xreative/vb-zakelijk.jpg) ### Zakelijk Restaurants & horeca 5 Astro-sites, 7 pagina’s elk ](https://xreative.neuralex.nl/voorbeelden/zakelijk/grand-cafe-statie/)[ ![Van Dijk Vastgoed — premium voorbeeld](/img/xreative/vb-premium.jpg) ### Premium Makelaars & vastgoed 5 Astro-sites, 13–14 pagina’s met objectdetail ](https://xreative.neuralex.nl/voorbeelden/premium/van-dijk-vastgoed/)[ ![Hotel Duinroos — exclusief voorbeeld](/img/xreative/vb-exclusief.jpg) ### 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. [ ![Het register — donker contactvel met twintig opnamen](/img/xreative/dienst-websites.jpg) ### 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/)[ ![Halte Kompas — kleurladders met berekende contrastwaarden](/img/xreative/dienst-design-systems.jpg) ### 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/)[ ![ZAADGOED — catalogus met getekende zaadzakjes](/img/xreative/dienst-e-commerce.jpg) ### 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/)[ ![KADANS — motion-specimen met curve en duur naast elke animatie](/img/xreative/dienst-motion.jpg) ### 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 — vlucht over een fjord bij zonsopgang](/img/xreative/demo-fjordlys.jpg) ### Fjordlys Boutique hotel fjordlys.neuralex.nl → ](https://fjordlys.neuralex.nl)[ ![AEROLITH — meteoriet in een baan om de aarde](/img/xreative/demo-aerolith.jpg) ### AEROLITH Meteorietenkabinet aerolith.neuralex.nl → ](https://aerolith.neuralex.nl)[ ![Maertens & Dochters — winters bos](/img/xreative/demo-maertens.jpg) ### Maertens & Dochters Vleugelbouwers maertens.neuralex.nl → ](https://maertens.neuralex.nl) [Calder & Voss Advocatenkantoor, tweetalig calder.neuralex.nl →](https://calder.neuralex.nl) [FORMES Modellenbureau formes.neuralex.nl →](https://formes.neuralex.nl) [Voyage Doré Reismerk paris-voyage.neuralex.nl →](https://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](https://xreative.neuralex.nl) [xreative-studio.neuralex.nl](https://xreative-studio.neuralex.nl) --- Volledige (opgemaakte) versie: https://neuralex.nl/showcase/xreative