A website that scrolls like film — and still stays under 10 MB.
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 To the live 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.
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
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
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
- Generate keyframes with an image model — first and last frame of every transition, in the brand palette
- Feed those two keyframes to Google Flow/Veo as start and end point, which produces a smooth clip in between
- Clean up watermark residue and artefacts with our own scripts (desparkle.py, mirrorfill.py)
- ffmpeg extracts the frames from the merged clips, with a crossfade at the seam — 144 to 185 per site
- Width per site chosen so the whole sequence stays under the 10 MB budget (920–1536 px)
- GSAP ScrollTrigger pins the hero for 300vh and draws frame ⌊scroll × N⌋ onto a canvas, where N is the frame count of that site
- prefers-reduced-motion gets a single static end frame — no scrub, no pin
The code chain
- Every price tier is its own build system: static, Astro or Vite — no shared monolith
- collect-demos.sh assembles the 20 builds into a single /voorbeelden/ tree in the main site
- Fonts self-hosted via @fontsource-variable; no Google Fonts request from the page
- Playwright runs QA: 9 scroll positions × desktop/mobile, and fails on every console error
- A crawler walks every internal link and asset — the last run: 1,273 URLs, 0 broken
- Cloudflare Pages for the sites, a Worker with static assets for the studio site
- 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.
[
Starter
Hair salons & barbershops
5 static one-pagers, hand-written HTML/CSS
](https://xreative.neuralex.nl/voorbeelden/starter/kapsalon-nox/)[
Business
Restaurants & hospitality
5 Astro sites, 7 pages each
](https://xreative.neuralex.nl/voorbeelden/zakelijk/grand-cafe-statie/)[
Premium
Estate agents & real estate
5 Astro sites, 13–14 pages with property detail
](https://xreative.neuralex.nl/voorbeelden/premium/van-dijk-vastgoed/)[
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.
[
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/)[
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/)[
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/)[
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
Boutique hotel
fjordlys.neuralex.nl →
](https://fjordlys.neuralex.nl)[
AEROLITH
Meteorite cabinet
aerolith.neuralex.nl →
](https://aerolith.neuralex.nl)[
Maertens & Dochters
Grand piano builders
maertens.neuralex.nl →
](https://maertens.neuralex.nl)
Calder & Voss Law firm, bilingual calder.neuralex.nl → FORMES Modelling agency formes.neuralex.nl → Voyage Doré Travel brand 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 xreative-studio.neuralex.nl
Volledige (opgemaakte) versie: https://neuralex.nl/en/showcase/xreative