Seven — een sterrenwacht achter zes portalen

2026

Een one-page site voor een verzonnen sterrenwacht. In een bewegende sterrenhemel draait een kubus van donker kristal. Elk vlak is een portaal naar een eigen 3D-wereld en hoort bij één onderdeel van de pagina; klik je erop, dan vliegt de camera erdoorheen. Gebouwd met SvelteKit, three.js en postprocessing.

Seven is een designstudie voor een sterrenwacht die niet bestaat: Seven Observatory. De site opent met een korte intro. Eén ster wordt een warp door duizenden sterren, de kubus tekent zich lijn voor lijn en de zes portalen gaan één voor één open.

Achter elk vlak ligt een eigen wereld: een spiraalnevel, een planeet met ringen, het interieur van een koepel, een sterrenbeeld dat zich tekent, sterrensporen boven een heuvel en een radioschotel. Elke wereld wordt getekend met de camera zoals die vanuit dat vlak gezien staat, zodat je door het glas echte diepte ziet. Klik je op een vlak, dan draait de kubus het naar je toe en vliegt de camera erdoorheen. Op het moment dat het portaal het scherm vult, schakelt de renderer over op die wereld zonder dat je een naad ziet. Daarna verschijnt het onderdeel als gewone, toegankelijke HTML boven de bewegende wereld.

De nevel wordt geraymarcht, en het beeld krijgt bloom, scherptediepte, AgX-tonemapping, chromatische aberratie en filmkorrel. De kwaliteit past zich aan het apparaat aan en gaat een stap omlaag als de frametijd te hoog wordt. Met 'minder beweging' aan staat de kubus stil en wisselen onderdelen met een korte fade. Zonder WebGL komt alle inhoud als gewone pagina. Geluid is optioneel en wordt in de browser gesynthetiseerd. De vijf foto's zijn gemaakt met gpt-image-2.

Technologieën

SvelteKit three.js WebGL postprocessing TypeScript Web Audio

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk