ANOMALY

• 

  Interactive Website

• 

  Character Moves on controls

• 

  Each Artifact can be inspected individually.

Inspiration

ANOMALY was inspired by theoretical physics, sci-fi world-building, and digital brutalism. The goal was to transform complex scientific concepts—such as multi-dimensional geometry, non-Euclidean space, and relativistic time dilation—into an interactive, tangible virtual multiverse exhibition rather than static diagrams or equations.

What it does

ANOMALY is an interactive 3D WebGL web platform where users explore monolithic architectural chambers using a procedural quantum android avatar. Within the space, users can inspect and calibrate four interactive exhibits in real time:

• The Tesseract: Visualizes 4D spatial folds projected into three dimensions with adjustable hyper-rotation speeds.

• The Chronic Hourglass: A gravitational fluid simulation where users accelerate, freeze, or reverse the flow of time.

• The Möbius Loop: Demonstrates wave mechanics and parametric closed loops synchronized with diagnostic audio frequencies.

• The Portal Mirror: Simulates non-Euclidean event horizons and multi-dimensional skyboxes using angle-of-incidence tracking.

The site also features real-time cinematic postprocessing (Bloom, Vignette, Chromatic Aberration) and a responsive HUD with wardrobe customization.

How we built it

• 3D & WebGL Engine: React Three Fiber (R3F) and Three.js for canvas rendering, procedural meshes, lighting, and custom GLSL shaders.

• State Management: Zustand to synchronize global interactions, inspection states, and HUD transitions across 3D and 2D elements.

• UI & Aesthetics: TypeScript, React, and modular styling to build brutalist interface overlays, diagnostic wireframes, and responsive controls.

• Build System: Vite and Node.js for optimized client-side asset compilation and real-time development.

Challenges we ran into

• Performance Optimization: Running complex real-time postprocessing pipelines (bloom, chromatic aberration) alongside physics-heavy exhibits without frame drops on low-end hardware.

• State Synchronization: Bridging the 3D WebGL scene graph with React 2D HUD overlays smoothly as inspection camera transitions engage and disengage.

• Mathematical Visualization: Accurately mapping higher-dimensional geometry (4D tesseract folding and non-orientable Möbius strips) into parametric 3D space.

Accomplishments that we're proud of

• Creating a seamless blend between digital brutalist UI design and real-time WebGL rendering.

• Implementing responsive interactive controls (dynamic time dilation and angle tracking) directly within browser-based shaders.

• Delivering a cohesive audiovisual atmosphere with floating diagnostic wireframes and dynamic glow effects.

What we learned

• Advanced shader programming (GLSL) and postprocessing optimization techniques in Three.js.

• Decoupling heavy 3D math calculations from React's render loop using performant state managers like Zustand.

• Designing intuitive 3D camera controls and spatial traversal systems for browser navigation.

What's next for ANOMALY

• WebXR/VR Integration: Adding direct support for VR headsets to explore chambers in full virtual reality.
• Spatial Audio Engine: Upgrading the simulated audio diagnostics to real-time Web Audio API positional soundscapes.
• Expanded Exhibits: Introducing new quantum chambers, including particle collision sandboxes and wormhole traversals.
• Multiplayer Multiverse: Enabling real-time multi-user synchronization so visitors can explore and calibrate exhibits together.

Built With

• glsl
• hud
• node.js
• r3f
• react
• three.js
• typescript
• vite
• zustand