Seven is a design study for an observatory that does not exist: Seven Observatory. The site opens with a short intro. One star becomes a warp through thousands of stars, the cube draws itself line by line and the six portals open one by one.
Behind each face lies its own world: a spiral galaxy, a ringed planet, the inside of a dome, a constellation that draws itself, star trails above a hill and a radio dish. Each world is drawn with the camera as seen from that face, so you see real depth through the glass. Click a face and the cube turns it toward you while the camera flies through. When the portal fills the screen, the renderer switches to that world without a visible seam. The section then appears as plain, accessible HTML on top of the moving world.
The nebula is ray-marched, and the image gets bloom, depth of field, AgX tone mapping, chromatic aberration and film grain. Quality adapts to the device and drops a step when frame times get too long. With reduced motion on, the cube stands still and sections switch with a short fade. Without WebGL all content appears as a normal page. Sound is optional and synthesised in the browser. The five photos were made with gpt-image-2.
Behind each face lies its own world: a spiral galaxy, a ringed planet, the inside of a dome, a constellation that draws itself, star trails above a hill and a radio dish. Each world is drawn with the camera as seen from that face, so you see real depth through the glass. Click a face and the cube turns it toward you while the camera flies through. When the portal fills the screen, the renderer switches to that world without a visible seam. The section then appears as plain, accessible HTML on top of the moving world.
The nebula is ray-marched, and the image gets bloom, depth of field, AgX tone mapping, chromatic aberration and film grain. Quality adapts to the device and drops a step when frame times get too long. With reduced motion on, the cube stands still and sections switch with a short fade. Without WebGL all content appears as a normal page. Sound is optional and synthesised in the browser. The five photos were made with gpt-image-2.
More work
Interactive 3D WebGL Experience
A 3D WebGL piece with animated chrome letters, a neon grid and warp-speed stars. Move your mouse to pan the camera.
Interactive World Globe
A 3D globe of 2,000 points of light, built with Three.js. Pick the Netherlands, Suriname or England and the globe turns to that country, with a short text.
Interactive DOS Experience
An MS-DOS simulation with CRT effects and real commands such as DIR, CD, TYPE and HELP. CAROUSEL.EXE breaks the screen into ASCII blocks that turn into a 3D carousel.