HYPERSOLID: a concept studio site built as one real-time 3D scene

VITON¹³ builds concept sites to show its range in genres where it has no client project to point to yet. HYPERSOLID is the most technical of them: the site of a fictional creative-technology studio that makes immersive web, real-time 3D, XR and installations, in the genre where the whole page is one 3D scene and the interface is text laid over it. The studio, its projects and its address are invented, and the site is in English.

The brief we set ourselves had two halves. The scene had to make the studio’s case on its own: an emblem, worlds, transitions and music made for this site and computed on the visitor’s device, not played back from a video. And it still had to be a usable website: real text over the canvas, keyboard navigation, a calmer version for visitors who ask for reduced motion and a static version for browsers without WebGL.

One address with 12 views: a scroll story in five chapters, the work gallery, eight project pages, About and Contact, each with its own hash route (#/work, #/work/aurora-dome and so on) so it can be linked and opened directly. The emblem is a tesseract, a four-dimensional cube that rotates in 4D and is projected into 3D every frame. Its edges are glass tubes with a thin-film rainbow sheen, surrounded by GPU particles (7,000 on a desktop, 2,400 on a phone) and shafts of volumetric light.

The five chapters are the studio statement, the tesseract unfolding into six capability panels, a tunnel built from its edges, the work and a contact prompt. The gallery is a 3D ring of eight invented projects: a planetarium aurora, a sneaker-drop arena game, a WebXR museum of lost sounds, a generative festival identity, a weather sculpture, a scent configurator, a data ocean and a holographic menu. Every card is a live raymarched shader world. A shader transition carries the card into its project full screen, with the idea, role, stack, three paragraphs, three stills captured from the world itself and a link to the next project.

The soundtrack is four procedural tracks generated with the Web Audio API. Sound stays off until the visitor switches it on, and the audio code loads only then. About holds a five-line manifesto and four working steps; Contact shows an example address marked as not monitored and a link to the author’s portfolio for real enquiries.

The site is written with three.js 0.186 and bundled with esbuild into a static folder with relative URLs, so it runs from any path: on the portfolio it lives at /demos/hypersolid/. Post-processing adds bloom, chromatic aberration, depth of field, light rays, tone mapping, a vignette and grain. The device decides one of three quality tiers: the full scene on a desktop, a lighter scene on phones and low-power machines, and a static page with the same content when WebGL is missing. When frames slow down, the engine lowers the resolution of the heavier worlds rather than dropping frames, and rendering pauses while the tab is hidden.

Every view has real HTML text over the canvas: headings, links and project texts that a screen reader can read and a keyboard can reach, with Tab, Enter, Esc and the arrow keys in the gallery. With reduced motion, camera flights become crossfades. The first paint is a preloader written into the HTML itself, before any script or stylesheet arrives; it draws the logo edge by edge as it counts the loaded files. The build contains no texture, 3D model, video or audio file: only code, two variable fonts, the icons and a social preview image.

What exists now is a working concept at tarasovvitalii.com/demos/hypersolid/: one address with 12 views, eight shader worlds and four procedural tracks, built on 23–24 September 2026. On 24 September the engine’s own frame counter was read 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. The main script, three.js included, is 0.77 MB, or 0.21 MB gzipped; the whole deployed folder is 1.1 MB.

Lighthouse, run three times per device on the live address the same day, gave accessibility 100 and best practices 100 on mobile and desktop, and performance 91 on mobile and 94 on desktop (medians). The page transfers 0.4 MB on load, CLS is 0, and LCP is 2.8 s on mobile and 0.9 s on desktop. SEO is 63 on purpose: the demo is marked noindex, so the page meant to be found in search is the portfolio’s case page about it.

HYPERSOLID is a concept VITON¹³ built to show range, not a commissioned project. The studio, its eight projects and its example address are fictional: the site has no client, no domain of its own, no users, no traffic and no enquiries, and it claims no clients, awards or press. It has no enquiry form and no analytics, so it proves nothing about conversion, and it does not show that we have shipped WebXR, an installation or any of the other invented projects: they exist only as shader worlds on this site.

The frame rate comes from one machine with a recent Apple chip, in headless Chrome, on one day. It says nothing about older laptops or phones, and it holds partly because the engine lowers the resolution of heavy worlds. Lighthouse measures loading, not how smoothly the 3D scene runs, and its mobile test slows the processor and the network but not the graphics chip. The demo is kept out of search on purpose, so it has no search results to show.

How to check a web studio’s portfolio →