October 14, 2026

Space Voyager: een filmische site die nog steeds gewoon content is

Een videopreloader, een portaal dat meekantelt met je muis, en een sprong van Mars naar de aarde naar Venus. Elk woord en elke video is nog steeds een blok dat jij, of je AI-agent, kunt bewerken.

Space Voyager is een demosite die er niet uitziet als een CMS-pagina. Er loopt een teller terwijl de video's laden. Een afgerond portaal kantelt mee als je de muis beweegt. Klik erop en de camera duikt door naar de volgende planeet: Mars, dan de aarde, dan Venus. De feiten schuiven één voor één in beeld.

Het draait op een standaard Justflows-site. Elke titel, elk feit en elke video is een blok dat je in de blokbuilder kunt bewerken, of dat een AI-agent voor je kan bewerken. Dit bericht laat zien hoe de demo is gebouwd en waarom die structuur ertoe doet zodra AI erbij komt.

Space Voyage-demo op Mars: een grote titel MARS, een lijst met planeten links, een afgerond portaal met de aarde in het midden en feiten over de planeet rechts — De eerste halte. Het portaal in het midden toont al de aarde.

Open de demo

Waar je naar kijkt

De demo gebruikt Space Voyage, een gratis thema van Sean Galt voor Justflows 0.3.6 en later. Op de homepage voegt het toe:

een videopreloader met een percentageteller, gevolgd door het logo dat op zijn plek schuift
een portaal, getekend op een canvas, dat meekantelt met je aanwijzer, met een eigen cursor waarop Enter staat
een sprong op volledig scherm naar de volgende planeet, waarna de achtergrondvideo stilstaat op het laatste frame
feiten die één voor één verschijnen, en een lijst met planeten die laat zien waar je bent
aparte lay-outs voor telefoons en tablets

Het script is ongeveer 300 regels gewoon JavaScript en laadt geen externe libraries.

Space Voyage-demo na de sprong naar de aarde: savanne bij zonsondergang, met Venus nu in het portaal — Na één klik: de aarde, met Venus die al wacht in het portaal.

Elk woord en elke video is een blok

De meeste sites zoals deze zetten hun content hard in de JavaScript, dus een feit aanpassen betekent een ontwikkelaar en een deploy. Space Voyage houdt de content in de pagina. De homepage is één groepsblok, sv-experience. Daarin zitten een logo, een introvideo, een linklijst voor het menu, de namen van de planeten en één groep per planeet. Elke planeetgroep ziet er zo uit:

{"type":"core.group","props":{"className":"sv-state sv-state--mars"},"children":[{"type":"core.heading","props":{"text":"Mars","level":1,"className":"sv-state-title"}},{"type":"core.video","props":{"src":"…/mars.mp4","className":"sv-background-source"}},{"type":"core.button","props":{"label":"Earth","url":"#earth","className":"sv-destination-source"}},{"type":"core.paragraph","props":{"text":"[03]","className":"sv-number-source"}},{"type":"core.video","props":{"src":"…/earth.mp4","className":"sv-portal-source"}},{"type":"core.paragraph","props":{"text":"<strong>Year:</strong> One Martian year is equal to 687 Earth days.","className":"sv-fact-source"}}]}

De classnamen sv-* geven aan waar elk blok voor is. Justflows rendert en schoont de blokken op zoals altijd. Het themascript leest daarna de gerenderde pagina en bouwt daaruit de ervaring op. Het haalt tekst uit tekstnodes en videobronnen uit attributen, dus content wordt nooit als HTML in de pagina geïnjecteerd.

De editor toont de gewone blokken, niet de animatie. Verander je de temperatuur van Mars, vervang je een video of hernoem je de menu-items en publiceer je, dan gebruikt de ervaring de nieuwe content.

Waar AI om de hoek komt kijken

Elke Justflows-site draait een MCP-server. Verbind Claude, ChatGPT, Cursor of VS Code ermee en je agent werkt met dezelfde blokken als jij. Hij heeft geen toegang tot de themacode nodig, en jij hebt geen aparte integratie nodig. Omdat Space Voyage alles in blokken bewaart, werken gewone verzoeken zoals deze:

"Werk de feiten over Mars bij met de nieuwste cijfers en houd elk feit onder de twintig woorden."
"Hernoem het menu naar Verhaal, Missies en Planeten."
"Voeg een Nederlandse versie van de homepage toe."
"Gebruik deze video als achtergrond voor de aarde."

Achter elk verzoek leest de agent de pagina, past de blokken aan die nodig zijn en slaat op met de versie die hij heeft gelezen. Heeft iemand anders intussen opgeslagen, dan wordt de opslag geweigerd en wordt er niets overschreven. Blokken die de site niet kent, worden geweigerd met een uitleg. Wijzigingen aan een gepubliceerde pagina gaan naar een werkrevisie, dus de live site blijft hetzelfde tot iemand publiceert.

Jij bepaalt ook wat de agent mag. Een API-sleutel of OAuth-toegang heeft alleen de rechten die jij geeft, zoals content bewerken maar niet publiceren of thema's installeren.

Wat een thema kan, en waar het ophoudt

Space Voyage laat ook zien hoeveel één thema kan, en binnen welke grenzen het werkt:

Eén gedeclareerd script. Het manifest noemt scripts/planet-jumping.js, en Justflows serveert dat op /theme.js. Het start alleen als de hele groep sv-experience op de pagina staat, dus elke andere pagina houdt het normale scrollen en de gewone sitekoppen en -voeten.
Gedeclareerde mediabronnen. De video's komen van een CDN. Het thema noemt die host in mediaOrigins, zodat het standaard beveiligingsbeleid van de site die video's toestaat en verder niets.
Aanpasbare kleuren. De gloed van de planeten is een instelling in de customizer, naast het gewone palet.
Standaard toegankelijk. Het menu en het portaal werken met het toetsenbord. Op touchapparaten staan het kantelen en de eigen cursor uit. Met verminderde beweging aan worden de animaties tot een minimum beperkt. Speelt een video niet af, dan blijft de pagina bruikbaar en biedt die aan het opnieuw te proberen.

Space Voyage-demo op een telefoon: het portaal, de titel Mars en de feiten onder elkaar — Dezelfde blokken op een telefoon, in een lay-out die is ontworpen voor kleine schermen.

Bouw je eigen

Een Justflows-thema is een map met gewone bestanden: een manifest justflows-theme.json, stylesheets, JSON-templates, patronen, een demohomepage en optionele scripts. Dat maakt het makkelijk te lezen, en makkelijk om te bouwen met een coding-agent naast je. Space Voyage valt onder GPL-2.0-or-later, dus je mag het uit elkaar halen en kijken hoe het werkt.

Wil je dit op je eigen site proberen? Installeer het thema, open de homepage in de blokbuilder en bewerk de planeten zelf, of verbind je agent en vraag het hem.

Ga mee op reis

✌️

Thanks for reading!
Find more posts on the blog or star Justflows on GitHub.