Luna Yoga

GIF
luna_yoga

Inspiration

Luna Yoga was inspired by the growing need for calming, accessible meditation tools in a high-stress world. Our goal was to merge ancient mindfulness practices with immersive VR so users could see, hear, and feel meditation not just listen passively.

Research suggests 528 Hz (“Love Frequency”) may reduce cortisol, while 432 Hz promotes deep relaxation. We drew inspiration from:

Solfeggio frequencies and sound healing
Chakra energy systems
Hand mudras as tactile meditation cues
Controlled breathing cycles for nervous system regulation

Vision: a fully immersive, controller-free meditation space powered only by natural hand interaction.

What It Does

Luna Yoga is an immersive WebXR meditation experience featuring:

🧘 Breathing 3D Model

Virtual figure synced to a 4–2–6–2 breath cycle
~15% vertical and 4.5% horizontal expansion
Smooth easing: [ \text{easeInOut}(t)= \begin{cases} 2t^2 & t<0.5\ -1+(4-2t)t & t \ge 0.5 \end{cases} ]

🎵 Healing Soundscape

Procedurally generated tones:

432 Hz, 528 Hz, 136.1 Hz, 396 Hz, 639 Hz, 108 Hz
Breathing modulation at 0.08 Hz
Shimmer effect at 0.05 Hz

🌈 Mudra Interaction

Four hand gestures trigger visual effects:

Gyan (Blue), Anjali (Pink), Raised (Gold), Open Palms (Green)
Each includes:
2.0× flash (200 ms)
Sustained glow
Emissive material update

✨ Visual Enhancements

Breath-synced energy rings
Dynamic breathing light
Proximity glow: [ \text{intensity} = 1 - \frac{d}{r} ]

🎮 Controller-Free Hand Tracking

WebXR Hand Tracking API
Two-hand scaling (0.3×–2.0×)
Single-hand repositioning via lerp: [ \text{lerp}(a,b,t)=a+t(b-a) ]

🎨 Themes

11 ambient environments (Ocean, Forest, Aurora, Zen, etc.)

How We Built It

Tech Stack

Three.js – 3D rendering
IWSDK / WebXR – VR + hand tracking
TypeScript – architecture
Web Audio API – procedural sound
GLTFLoader – 3D model handling

Key Systems

Dynamic breathing animation
Audio oscillators + LFO modulation
Procedural mudra glows
Inverse-distance proximity detection

Challenges

Breathing vs. Repositioning

Breathing animations conflicted with user scaling. Solution: dynamic base scale tracking: [ \text{scale}_{final}=\text{baseScale}\times(1+0.15\,\text{breathProgress}) ]