SoundWave Sanctuary

LANDING PAGE

💡 Inspiration Modern web applications often isolate audio and visual elements into flat, static interfaces. We were inspired to bridge the gap between high-fidelity spatial audio and real-time WebGL graphics to build Soundwave Sanctuary—a digital sanctuary where users can retreat from screen fatigue, focus on creative work, and experience continuous 3D sensory atmospheres.

🛠️ How We Built It Soundwave Sanctuary was built from the ground up using Next.js 16 (App Router with Turbopack), React 19, Framer Motion, and Spline WebGL.

The core visual architecture integrates a fixed 3D canvas layer beneath a continuous 3D scrolling flow. Soundwave particles are procedurally rendered in an interactive canvas where each particle's position $(x, y)$, height $H$, and parallax offset $X_{\text{offset}}$ dynamically respond to user cursor movement according to:

$$X_{\text{offset}} = -k \cdot d_{\text{depth}} \cdot \left( \frac{2 \cdot x_{\text{cursor}}}{W} - 1 \right)$$

where $d_{\text{depth}} \in [0.3, 1.9]$ represents particle depth and $W$ is screen width.

The dynamic vertical soundwave bar oscillation $H(t)$ at time $t$ with frequency $\omega$ and phase shift $\phi$ is calculated as:

$$H(t) = H_0 \cdot \left( 1 + \lambda \cdot \sin(\omega t + \phi) \right)$$

As users scroll between sections (Home $\rightarrow$ Multiverse Worlds $\rightarrow$ Spatial Audio Engine $\rightarrow$ Mind Reflection $\rightarrow$ Immersive Gallery $\rightarrow$ System Console), each section smoothly executes custom 3D perspective transforms with matrix rotators:

$$\begin{bmatrix} x' \ y' \ z' \ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & 0 \ 0 & \cos\theta & -\sin\theta & 0 \ 0 & \sin\theta & \cos\theta & 0 \ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ z \ 1 \end{bmatrix}$$

🚧 Challenges We Faced Performance & WebGL Rendering: Overlaying glassmorphism UI cards with heavy backdrop-filter blurs over a real-time 3D Spline canvas required fine-tuning rendering layers and GPU execution to maintain 120 FPS. Seamless 3D Scroll Synchronisation: Preventing double scrollbars while maintaining sticky navigation pills and section-by-section 3D entrance animations. Stateful Audio Crossfading: Ensuring continuous background audio playback without interruption when switching between environments or scrolling across sections. 🎓 What We Learned Advanced 3D viewport triggers and preserve-3d CSS perspective styling in Framer Motion. Optimizing Next.js 16 App Router state management with Web Audio API context providers. Balancing visual luxury and accessibility through responsive UI glass panels.