HYPERSOLID is a fictional creative-technology studio: immersive web, real-time 3D, XR and installations. I built its site on 23–24 September 2026 in the genre of immersive WebGL studio sites, where the whole page is one real-time 3D scene and the interface sits on top of it as text.

The brief I set myself: let the scene make the studio’s case and stay honest about what a browser can do. The emblem, the worlds, the transitions and the music all had to be made for this site and computed on the visitor’s device rather than played back from video, and the site still had to work with reduced motion or without WebGL.

The emblem is a tesseract, a four-dimensional cube, rotating in 4D and projected into 3D every frame. Its edges are glass tubes with thin-film iridescence and dispersion, surrounded by GPU particles and volumetric light. A preloader draws the logo line by line while it counts the loaded assets, then unfolds into the scene.

Scrolling moves a camera through five chapters instead of scrolling a page: the studio statement, the tesseract unfolding into six capability panels, a tunnel built from its edges, the work and a contact prompt. The work gallery is a 3D ring of eight projects, and each card is a live raymarched shader world, not a picture; a shader transition carries you into a project, which opens full screen with its own text on top.

The soundtrack is 100% procedural: four tracks generated with the Web Audio API, silent until the visitor switches the sound on. Everything is built with three.js and bundled into a static site with relative URLs, so it runs from any folder — here, /demos/hypersolid/. With reduced motion, camera flights become crossfades, and browsers without WebGL get a static version with the same content.

The concept exists as a single-page site with five chapters, a gallery of eight shader worlds, eight project views and four procedural tracks. On 24 September 2026 I read the engine’s own frame counter (window.__HS.fps, a 90-frame average) in 14 states — the five chapters, the gallery and all eight worlds — in headless Chrome on a MacBook with an Apple M5, at 1600 × 1000 on a Retina scale: the median was 60 fps and the lowest reading 55.7 fps.

The main script, dist/assets/app.js with three.js inside, is 0.76 MB, or 0.21 MB gzipped. The whole build, fonts and images included, is 1.1 MB and contains no texture, 3D model, video or audio files: every world and every sound is generated in the browser.