CASE STUDY · CREATIVE TECHNOLOGY · NEXT.JS / TYPESCRIPT / THREE.JS / GSAP / WEB AUDIO

Building a computational observatory where probability has a pulse

DUST//SIGNAL is an original interactive digital experience built around mathematics, sound, and cinematic scale. It transforms stochastic motion, covariance, Fourier composition, and rhythmic sequencing into a connected computational world that visitors can observe, control, and hear.

This is an independent concept project created to explore a specific design and technical direction. It was not commissioned by any organisation.

The problem

Most experimental technology websites fall into one of two extremes: visual spectacle without meaning, or technically accurate interfaces that feel like dashboards. The challenge was to create something cinematic and emotionally engaging while ensuring that the mathematics, interaction, and sound were more than decoration. The project also needed to remain original. It could draw from monumental science-fiction atmosphere, quantitative systems, and underground house rhythm without reproducing a film world, soundtrack, logo, scene, or visual identity.

The decision

Build the experience as a fictional computational observatory rather than a conventional portfolio or product page. Mathematics would generate structure, rhythm would govern movement, and scale would create emotion. A restrained palette of carbon, mineral, dust, bone, amber, and signal red keeps the world cohesive. Large typography establishes scale, technical labels make the system feel measurable, and the interactive models allow visitors to observe how changing parameters changes the field.

What I built

• — A cinematic Observatory homepage connecting procedural environments, typography, mathematical fields, and rhythmic interaction
• — Four interactive mathematical models covering stochastic drift, volatility, covariance, and Fourier composition
• — A Monte Carlo probability chamber with seeded simulations and percentile-based output
• — A sixteen-step, four-channel procedural audio-visual sequencer
• — Six creative-coding archive experiments based on genuine mathematical systems
• — Reproducible seeded states for simulations and interactive patterns
• — User-controlled audio with mute, volume, and no autoplay
• — Adaptive rendering and reduced-quality behavior for less powerful devices
• — Responsive layouts for desktop, tablet, and mobile
• — Keyboard support, reduced-motion handling, and accessible controls
• — An original emblem, typography system, interface language, and visual world
• — Route-specific pages for Observatory, Models, Signal, Archive, and Protocol

The proof

DUST//SIGNAL demonstrates that creative coding can be both expressive and accountable. The mathematics determines the behavior, the sound responds to interaction, and the visual identity connects every route into the same world. It is not a themed landing page with decorative particles; it is a complete experimental system with its own logic, language, and interaction model.

One honest moment

The hardest part was balancing cinematic density with clarity and performance. Large typography, procedural visuals, moving particles, simulations, and audio controls can compete for attention and processing power. The work required repeated adjustments to scene complexity, content hierarchy, responsive behavior, and rendering quality so that the experience remained readable and usable instead of becoming visual noise. The dual-rendering strategy — WebGL for the primary observatory scene with a Canvas 2D fallback — was essential to keep the experience accessible across devices without sacrificing the homepage impact.

How it went

Technology: Next.js, TypeScript, Three.js, React Three Fiber, GSAP, Web Audio API, Tailwind CSS