Fragile Shards Interactive Visualiser

About the visualiser

The Fragile Shards Visualiser is a real-time browser environment rather than a pre-rendered video. Movement, perspective, colour and intensity can all be changed while it is running, so every session can find a different pace and visual character.

The visualiser operates independently of audio. It can accompany Fragile Shards, another Holostatic release or an entirely different soundtrack without requiring microphone access or audio-reactive analysis. That separation also makes the engine useful as a prototype for live sets and projected digital environments.

How the Three.js tunnel works

The current build places a perspective camera inside a field of 110 reusable geometric structures, spaced along the depth of the scene. Ten repeating construction patterns combine rings, toruses, spokes and layered forms. Randomised rotation prevents the sequence from reading as a simple repeated loop.

During each animation frame, the structures move towards the camera. When one passes the viewpoint it is repositioned at the far end of the tunnel instead of being destroyed and recreated. That recycling system produces the impression of continuous travel while keeping the number of rendered objects bounded.

Wireframe materials use additive blending, transparency and fog to merge the geometry into a luminous space. A pulse system changes scale over time, while five selectable colour themes recolour the existing materials without rebuilding the scene. Rainbow mode introduces a separate cycling palette for a more volatile result.

Interaction and performance choices

Four motion presets control speed, pulse strength, warp and rotational acceleration. Visitors can also adjust forward movement with the keyboard or mouse wheel, steer the perspective, stop the tunnel instantly, toggle fullscreen and trigger the optional flash accent.

The engine runs directly in a modern browser with GPU acceleration enabled—there is no download, plug-in or account requirement. To control rendering cost on high-density displays, the pixel ratio is capped and the geometry uses reduced segment counts. The camera also adjusts its field of view for portrait screens.

These are deliberate creative constraints. The goal is not maximum geometric complexity; it is a stable visual rhythm that can run long enough to become part of the listening experience.

From sound design to moving image

The visual language mirrors the way Holostatic approaches music: layers accumulate, patterns repeat with variation and small changes in pressure alter the emotional reading of the whole space. The fractured geometry and controlled neon colour reflect the tension between damage and beauty that runs through Fragile Shards of Dreams.

The same questions appear in the Holostatic essays on sound design and creative restraint and building music inside a shared production logic. In both music and code, the important decision is not how many possibilities exist, but which ones are allowed to remain.

Explore Holostatic

Continue with the Holostatic music catalogue, read more about the project on the About page, or use the contact page for audiovisual, licensing and collaboration enquiries.