SONIC OBJECTS / 07IMMERSIVE MUSIC STUDIO2026 / PLAYABLE PROTOTYPE

BROWSER + WEBXR / TWO OCTAVES

VR Piano

Your first melody.
Within reach.

Follow the light from note to key. Learn a melody in your browser, or place a playable piano in front of you in VR.

ENTER THE STUDIO ↗WATCH THE DEMO ↓
VR Piano welcome screen overlooking a lake beneath an illuminated halo
VR PIANO / ACTUAL BROWSER CAPTURE
24
PLAYABLE KEYS / C4–B5
42
NOTES IN THE GUIDED MELODY
02
MODES / GUIDED + FREE PLAY
DEVELOPMENT SYSTEM / 07

A NOTE IN SPACE.
A SOUND IN TIME.

TypeScript connects the lesson rules to React controls, a Three.js piano and local Web Audio synthesis. WebXR adds headset views, tracked fingertips and controller rays to the same instrument.

TypeScriptLesson + input + note stateReactStudio controls + fit settingsThree.jsPiano model + note visualizationWebXRHeadset + hand + controller inputMeta QuestCompatible-headset target; hardware testing pendingWeb Audio APIPolyphonic sound + note envelopesWebGLGPU renderingBlender24-key model + materialsPythonPiano model generationOpenAIEnvironment + interface artworkViteDevelopment + production buildNode.jsBuild + simulated-input testsTailwind CSSResponsive studio interfaceCloudflareHTTPS application hostingCodexAI development agentGitHubSource + version historyCursorAgentic code editingVisual StudioNative IDE + debuggerVS CodeCode editor + tooling
WHAT MADE THE BUILD DIFFERENT

Finger positions are transformed into piano space, so changing the keyboard size also changes its touch zones. Raised black keys, press-and-release thresholds and tracking-loss handling keep note triggering separate from the visual glow. The 24-key model is authored in Blender and exported as glTF.

01 / FIND THE NEXT NOTE

A melody that
waits for you.

Learn “Twinkle, Twinkle, Little Star” one note at a time. The guided sequence waits at the strike line until you play the correct key. Watch the demonstration, then try it yourself.

GUIDED / DEMONSTRATION / FREE PLAY

FOLLOW.
TOUCH.
PLAY.

VR Piano guided lesson with colored notes approaching a labeled two-octave keyboard
TWO OCTAVES / C4—B5

Colored notes lead to labeled keys. Switch to free play to explore notes and chords without following the song; sound is synthesized locally in the browser.

BROWSER CAPTURE
02 / MAKE ROOM FOR YOUR HANDS

Move the piano.
Not your shoulders.

Start with a smaller-hands or adult-reach preset, then adjust the key width, keyboard height, distance and press depth. Fit preferences stay on your device. Recenter the instrument to face your seated position.

WIDTH / HEIGHT / REACH / TOUCH

SETTLE.
ADJUST.
BEGIN.

VR Piano settings for hand-size presets, key width, piano height, reach, touch depth, tempo and volume
PERSONAL FIT / TWO ENVIRONMENTS

Choose Nocturne or Golden hour, set the tempo and volume, and toggle note labels. Height and distance take effect in VR; changing the fit pauses the lesson.

BROWSER CAPTURE
03 / SEE THE PHRASE UNFOLD

From a ribbon
to a note.

Approaching notes, key illumination and a soft afterglow connect what you see to what you play. Demo mode performs the melody so you can follow the sequence before taking over.

A 15-second, silent recording of the browser demonstration. This is the real application, not footage recorded inside a VR headset.

ACTUAL BROWSER DEMO / NO AUDIO
04 / TAKE A SEAT

In your browser.
Or around you.

01 / OPEN

Enter the studio.

On a computer, use the keyboard, mouse or a standard gamepad. For VR, open the studio’s HTTPS address in a compatible headset browser, such as Quest Browser, and choose Enter VR.

02 / FIT

Bring it within reach.

Adjust the keyboard until both ends are within comfortable reach, then recenter while facing forward. This is an immersive VR scene, not passthrough or an overlay on a physical piano.

03 / PLAY

Lower a finger. Lift to release.

With supported hand tracking, press into a virtual key with a fingertip. With XR controllers, aim and squeeze the trigger. The floating menu supports touch, ray/pinch selection and controller input.

Desktop shortcut: Space starts or pauses; R restarts; Escape pauses or goes back. Your browser may require a click or keypress to enable sound. Losing hand or controller tracking releases held notes.

PLAYABLE PROTOTYPEBROWSER / COMPATIBLE WEBXR HEADSETS

OPEN A SPACE
FOR MUSIC.

The browser studio is available now. VR hand tracking and controllers are implemented, but headset comfort, tracking accuracy and performance still need physical hardware testing.

This is a note-learning and exploration tool, not an assessment of piano technique or rhythmic accuracy. Virtual keys have no physical resistance, and the sound is synthesized rather than sampled from an acoustic piano.

ENTER VR PIANO ↗
BACK TO / SONIC OBJECTSSONIC OBJECTS←