> Bron: https://neuralex.nl/en/showcase/xreative > How the two Xreative sites and 30 live demos were made: an image pipeline from keyframes via Veo to 144-185 scroll frames under 10 MB, and a code pipeline from Vite/Astro via Playwright QA to the Cloudflare edge. Showcase · Xreative # A website that scrolls like film — and still stays under 10 MB. Xreative is the lab's web design track: two agency sites and twenty-six complete demo sites, all live on their own domain. This page explains how they come about — the image pipeline that turns two keyframes into a scrollable video, and the code pipeline that builds a page out of it which meets the *frame budget*. What is for sale is on the sites themselves; here you only get how it was made. [View the pipeline](#pijplijn) [To the live sites](#sites) 26 live sites on their own domain 1,273 URLs crawled, 0 broken ≤ 10 MB frame budget per cinematic hero 2 production lines: imagery and code Two sites, two theses ## The same lab, two different answers One site proves that you can *compute* a cinematic hero in full — no image model, no stock, only code. The other proves the opposite: that AI imagery and a hand-written frontend can carry a brand together. Both run on the same edge, to the same QA bar. [![Xreative — hero “Wij schrijven websites” with typographic noise](/img/xreative/xreative-hero.jpg)](https://xreative.neuralex.nl) Agency site ### Xreative The agency itself. A hero that moves from typographic noise to a tight grid in 180 frames — rendered entirely procedurally, no AI imagery, no stock. Below it four price tiers with twenty complete example sites. Vite + GSAP180 procedural frames20 examples [View live](https://xreative.neuralex.nl) [![Xreative Studio — hero with warm gold light on glass](/img/xreative/studio-hero.jpg)](https://xreative-studio.neuralex.nl) Studio site ### Xreative Studio The older sister site, with a different thesis: cinematic brand sites in which AI imagery and a hand-written frontend come together. Six of those brands are live on their own subdomain — all reachable from this page. AI keyframes + Veo6 brand sitesedge deploy [View live](https://xreative-studio.neuralex.nl) Architecture ## From two keyframes to a scrollable hero on the edge Putting a video on a page is easy; making it respond to the scroll is not. The solution is not to play the video but to *take it apart*: 144 to 185 still images that the canvas draws based on scroll position. The whole chain is set up so that sequence stays under 10 MB. How it works ## Two chains that meet in the build ### The image chain 1. Generate keyframes with an image model — first and last frame of every transition, in the brand palette 2. Feed those two keyframes to Google Flow/Veo as start and end point, which produces a smooth clip in between 3. Clean up watermark residue and artefacts with our own scripts (desparkle.py, mirrorfill.py) 4. ffmpeg extracts the frames from the merged clips, with a crossfade at the seam — 144 to 185 per site 5. Width per site chosen so the whole sequence stays under the 10 MB budget (920–1536 px) 6. GSAP ScrollTrigger pins the hero for 300vh and draws frame ⌊scroll × N⌋ onto a canvas, where N is the frame count of that site 7. prefers-reduced-motion gets a single static end frame — no scrub, no pin ### The code chain 1. Every price tier is its own build system: static, Astro or Vite — no shared monolith 2. collect-demos.sh assembles the 20 builds into a single /voorbeelden/ tree in the main site 3. Fonts self-hosted via @fontsource-variable; no Google Fonts request from the page 4. Playwright runs QA: 9 scroll positions × desktop/mobile, and fails on every console error 5. A crawler walks every internal link and asset — the last run: 1,273 URLs, 0 broken 6. Cloudflare Pages for the sites, a Worker with static assets for the studio site 7. The contact form goes to a separate Worker with an Email binding, because Pages Functions do not know send\_email Twenty examples ## Four tiers, four different build systems The example sites are not mockups but complete sites, each with its own navigation, content and pages. Deliberately increasing in technical weight, so that you can see from the build what a tier means — not just from the price. [ ![Kapsalon Nox — starter example](/img/xreative/vb-starter.jpg) ### Starter Hair salons & barbershops 5 static one-pagers, hand-written HTML/CSS ](https://xreative.neuralex.nl/voorbeelden/starter/kapsalon-nox/)[ ![Grand Café Statie — business example](/img/xreative/vb-zakelijk.jpg) ### Business Restaurants & hospitality 5 Astro sites, 7 pages each ](https://xreative.neuralex.nl/voorbeelden/zakelijk/grand-cafe-statie/)[ ![Van Dijk Vastgoed — premium example](/img/xreative/vb-premium.jpg) ### Premium Estate agents & real estate 5 Astro sites, 13–14 pages with property detail ](https://xreative.neuralex.nl/voorbeelden/premium/van-dijk-vastgoed/)[ ![Hotel Duinroos — exclusive example](/img/xreative/vb-exclusief.jpg) ### Exclusive Boutique hotels 5 Vite sites with a cinematic scroll hero on real Veo video ](https://xreative.neuralex.nl/voorbeelden/exclusief/hotel-duinroos/) Four category demos ## Every service now has its own demo Until recently the four services on the Xreative site were words only. Now every line leads to a complete site that shows that service — with its own brand, its own type pairing and its own design idea. None of the four uses a photo: all imagery is drawn, computed or a shot of our own work. [ ![The register — dark contact sheet with twenty shots](/img/xreative/dienst-websites.jpg) ### D/01 Websites Xreative itself A contact sheet instead of a portfolio: twenty real shots of the running sites, numbered consecutively. ](https://xreative.neuralex.nl/voorbeelden/diensten/websites/)[ ![Halte Kompas — colour ladders with computed contrast values](/img/xreative/dienst-design-systems.jpg) ### D/02 Design systems HALTE — regional transport A style compass that checks its own arithmetic: every contrast figure is computed from the tokens, and the theme switch recalculates all of them. ](https://xreative.neuralex.nl/voorbeelden/diensten/design-systems/)[ ![ZAADGOED — catalogue with drawn seed packets](/img/xreative/dienst-e-commerce.jpg) ### D/03 E-commerce ZAADGOED — seed house since 1911 A complete shopping flow without a single photo: every product illustration is drawn in SVG from the article ID. Cart, variants and three checkout steps genuinely work. ](https://xreative.neuralex.nl/voorbeelden/diensten/e-commerce/)[ ![KADANS — motion specimen with curve and duration next to every animation](/img/xreative/dienst-motion.jpg) ### D/04 Motion KADANS — studio for motion design A page that documents its own motion. The annotation is generated from the same constants that drive the animation, so it cannot go out of date. ](https://xreative.neuralex.nl/voorbeelden/diensten/motion/) Six brands on their own subdomain ## The same pipeline, six different stories What is interesting about a pipeline is not the first time it works, but the sixth. These brands share not a single line of content and yet share the same chain: keyframes, video, frame extraction, canvas scrubber. All six fictional — they are design studies, not clients. [ ![Fjordlys — flight over a fjord at sunrise](/img/xreative/demo-fjordlys.jpg) ### Fjordlys Boutique hotel fjordlys.neuralex.nl → ](https://fjordlys.neuralex.nl)[ ![AEROLITH — meteorite in orbit around the earth](/img/xreative/demo-aerolith.jpg) ### AEROLITH Meteorite cabinet aerolith.neuralex.nl → ](https://aerolith.neuralex.nl)[ ![Maertens & Dochters — winter forest](/img/xreative/demo-maertens.jpg) ### Maertens & Dochters Grand piano builders maertens.neuralex.nl → ](https://maertens.neuralex.nl) [Calder & Voss Law firm, bilingual calder.neuralex.nl →](https://calder.neuralex.nl) [FORMES Modelling agency formes.neuralex.nl →](https://formes.neuralex.nl) [Voyage Doré Travel brand paris-voyage.neuralex.nl →](https://paris-voyage.neuralex.nl) ### What honestly belongs with this All brands shown are **fictional**: they are design studies to demonstrate the pipeline, not clients. The figures on those sites — revenue, years, counts — belong to that fiction. When three hero videos were missing they were first *synthesised* locally from the existing keyframes; those versions were later replaced by real Veo clips and kept as .synth.bak.mp4, so the difference stays traceable. And the QA above measures what it says it measures: internal links and assets, not whether a text reads well. Built with ViteAstroGSAP ScrollTriggerffmpegGoogle Flow / VeoPlaywrightCloudflare PagesCloudflare WorkersEmail Routing@fontsource-variable See it yourself ## Both sites are live on their own subdomain Xreative is the agency with four price tiers and twenty example sites. Xreative Studio is the cinematic line, with six brand sites on their own domain. Scroll through both — that is where you really see the pipeline. [xreative.neuralex.nl](https://xreative.neuralex.nl) [xreative-studio.neuralex.nl](https://xreative-studio.neuralex.nl) --- Volledige (opgemaakte) versie: https://neuralex.nl/en/showcase/xreative