Aetherium-3d

Aetherium transforms a website into a quiet sanctuary. Visitors descend a bioluminescent archive where memory fragments become glass shards and tactile specimens designed for slow exploration.

Comment

Inspiration

Aetherium — The Memory Reef was inspired by museum exhibition design, deep-sea natural history plates, hand-blown glass sculptures, and the quiet weight of physical artifacts that carry emotional warmth.

Most websites are built to push users forward as quickly as possible. We asked a fundamental question: What happens when a website offers somewhere to stay? We set out to bridge web design and architecture, turning digital archives into a quiet, physical sanctuary built for curiosity over speed.

What it does

Aetherium transforms a digital archive into a navigable underwater reef and cosmic memory field:

  • Submerged Exploration: Visitors descend through human memory traces—a room left warm for a late arrival or a coastline keeping time at 04:17.
  • Interactive 3D Specimens: WebGL artifacts respond to hover physics and open detailed archival records upon click.
  • Living Constellation: As visitors discover specimens, an ambient Memory Nebula brightens, updating spatial coordinates on the Atlas of Elsewhere star map.
  • Generative Web Audio: An ambient soundscape transitions dynamically from submerged bass tones to wide cosmic harmonics as visitors explore deeper.
  • Personal Memory Artifact: Upon returning to the surface, visitors receive a personalized share card generated from their unique discovery path.

How we built it

Aetherium is constructed using a high-performance modern web stack:

  • Frontend Framework: React 19, TypeScript, and Vite for fast builds and responsive state handling.
  • 3D Graphics Engine: Three.js and native WebGL featuring raycast hit testing, custom point lighting, perspective camera parallax, and smooth orbit physics.
  • Procedural Audio System: Native Web Audio API using dynamic oscillator nodes, dynamic filter automation, and volumetric gain controls.
  • UI & Design System: Tailwind CSS v4 paired with custom art direction, utilizing typography from Cormorant Garamond, DM Sans, and IBM Plex Mono.

Mathematically, the continuous transition between the ocean reef and the cosmic constellation is modeled by defining the visitor's depth profile $D(t)$ as a smooth interpolation between ocean depth $d_{\text{ocean}}$ and cosmic elevation $h_{\text{cosmos}}$:

$$D(t) = (1 - \sigma(t)) \cdot d_{\text{ocean}} + \sigma(t) \cdot h_{\text{cosmos}}$$

where $\sigma(t) = \frac{1}{1 + e^{-k(t - t_0)}}$ governs the smooth spatial transition and corresponding audio cutoff frequencies.

Challenges we ran into

  1. WebGL Performance Optimization: Rendering multiple interactive 3D specimens alongside a dense dynamic particle field (the Memory Nebula) caused frame drops on low-power devices. We resolved this through efficient geometry instancing, unmounting off-screen render loops, and strict raycasting hit-box management.
  2. Procedural Web Audio Harmonics: Synthesizing pleasant, evolving ambient sound purely through code—without relying on external audio files—required precise low-pass filter mapping to avoid harsh resonant frequencies during user interactions.
  3. Cross-Act State Persistence: Synchronizing specimen discovery across two distinct visual acts (the ocean reef and the cosmic sky) required a unified reactive state layer that dynamically updates the star map and generates final share card analytics.

Accomplishments that we're proud of

  • Delivering a fully custom Web Audio synthesis engine that operates seamlessly without external audio assets.
  • Crafting a calm, emotionally resonant UI that makes 3D web design feel atmospheric and accessible rather than overwhelming.
  • Achieving smooth 60 FPS performance across complex WebGL scenes with reactive mouse-parallax lighting effects.

What we learned

Building Aetherium proved that WebGL technologies do not need to be aggressive or flashy to engage users. When paired with deliberate spatial UI, reactive audio, and high-contrast typography, 3D web design can create contemplative, quiet digital spaces that encourage slow exploration.

Design System & Visual Philosophy

The visual identity relies on three core atmospheric colors:

  • Ink Navy: Creates the feeling of deep ocean depth and quiet cosmos.
  • Shell Ivory: Evokes the tactile warmth of archival paper and historical specimens.
  • Aether Amber: Marks key points of interest, attention, and discovery.

What's next for Aetherium-3d

  1. User-Submitted Memory Specimens: Allowing visitors to upload their own text, audio, and visual fragments to extend the memory reef organically.
  2. Spatial VR/AR Support: Porting the WebGL scene to WebXR so users can walk through the bioluminescent reef in immersive virtual reality.
  3. Spatialized Audio Panning: Expanding the Web Audio system to support 3D binaural positioning relative to the user's cursor and view direction.

Built With

Share this project:

Updates

Submission history