CASE STUDY 7 OF 8
DEEPHOUSE MANTA
Deep house, a manta ray, and my first iPod
I built a rhythm game around three things I love: deep house, manta rays, and the iPod my parents gave me in 2005. The first playable took 48 hours. I spent the next two weeks tuning procedural music, four input models, and a world that responds to every beat.
Context
A public browser build with touch, keyboard, controller, and an implemented spatial input path.
My role
I owned the concept, interaction design, visual direction, music system, integration, testing, and final decisions.
Gameplay
Why this one matters to me
My favorite sea animal moves through deep house, and my scratched 2005 iPod becomes the menu. You ride the beat through rings of light. Missing drops the combo, never your life.
The song and the level are the same data.
THE MUSIC
A procedural deep house engine on raw Web Audio: synthesized kick, offbeat hats, claps, sidechained sub bass, detuned stabs, pads, arps, and a breakdown riser, scheduled by a lookahead sequencer. Nothing is a recording.
THE WORLD
Three.js with cel shading and ink outlines. The world plays the band: kelp bends to the sub bass, coral blinks with the stabs, marine snow twinkles with the hats, and a pressure ring leaves the ray on every kick.
THE PROOF
Courses and music share a seeded section model, so the same mix generates the same course on each run. Beat timing, scoring, and assists are covered by automated tests.
HOW IT PLAYS
Rhythm controls speed
THE LOOP
Boost on the kick and the water shoves you forward.
Chain rings and you are the melody: each one plays the next note of the mix's own scale, climbing as the streak grows. Sixteen in a row and the manta ignites.
THE STAKES
Miss a ring and your combo drops, never your life.
Stay sloppy and the silence rises from the trench to stalk your wake. Find the beat again and it cannot touch you.
THE FINISH
Every mix ends at the old DJ's monument.
His checkered banner is strung across the final gate. Cross it and the stage lights, the speakers wake, and the ocean is yours to swim free.
One distinct landmark per mix
Mt. Reef
the volcano launches you out of the water
The Glasshouse
rings under the ice shelf
The Migration
a spiral through the migrating pod
The Encore
the gold ring and the checkered finish
Every level needs a landmark you can name afterward. The rule that kept it honest: structure before decoration, so geometry has to frame, carry, enclose, launch, or reveal something. If a shape only looked good, it came out.
The menu is my 2005 iPod, scratches and all
I found my old iPod and made it the menu.
My parents gave me this iPod in 2005; the engraving on the back is theirs. Two decades later it came out of a drawer, and the UI designer in me knew exactly what it should become. Drag a thumb around the click wheel and the list ticks past in detents, the way it did in 2005. The scratches are drawn on. The familiar click wheel gives the menu a clear interaction cue before instructions appear.
Three tuning changes made the rhythm easier to read.
PACING
Every level was cut roughly in half.
The early courses outlasted their musical ideas. Shorter runs brought each landmark into the part of the mix where its energy made sense.
RHYTHM
Slow motion came out.
It looked dramatic in isolation, but broke the relationship between movement and the beat. Removing it made the rhythm easier to feel.
CONTROL
Camera and steering were tuned together.
A 17 degree camera whip and barrel roll made one course harder to read. I corrected the camera, then tuned ring radius, turn rate, and speed as one control problem.
Browser controls shaped for four surfaces
- IPHONE
- Drag anywhere and a thumbstick appears under your thumb.
- IPAD
- The same touch controls with a lot more ocean on screen.
- DESKTOP
- WASD or arrows to swim, space to boost on the kick.
- APPLE VISION PRO
- A spatial-browser path renders the ocean as a hand-controlled diorama.
Touch, keyboard, and controller paths were tested in the browser. The Vision Pro path was implemented, but not physically tested.
Finished, playable, and free in your browser
48 hrs
from empty file to first playable
2 wks
of tuning until it felt right
4
input models: touch, keys, controller, spatial
IMPLEMENTATION SUPPORT
Claude Code accelerated the build. I directed the system.
Claude Code generated and revised implementation under my direction. I set the concept, interaction model, visual direction, music rules, integration plan, test criteria, and final decisions. The code moved faster, but the design still depended on testing and judgment.
AI working method
How I used AI to move from product decision to working software
- Product decision
- Game concept, progression, art direction, interaction model, spatial adaptation, accessibility, and play testing.
- AI-assisted build
- I used Claude Code and Codex to build and refine the Three.js game, while I set the rules, art direction, timing model, and play-test decisions.
- Evidence
- Game: 6 levels · 5 characters
- First playable: 48 hours
- Refinement: 2 weeks
REFLECTION
The game worked when the systems stopped feeling separate.
Music, movement, landmarks, and controls all needed to feel like one world. That coherence mattered more than adding another feature.
The write-up ends here. The game is one click away.
Touch, keyboard, and controller were tested in the browser. A spatial input path is implemented.