Cello sustain
The solitary opening and returning center of the form.
Interactive spatial composition
Gravity
What if the audience could move inside a piece of music?
Composition / spatial audio / browser-native MVPHeadphones recommended
The original artistic question
Make an invisible force audible.
Gravity began as a live work for a cellist at the center of a roughly 200-seat performance space and approximately fourteen musicians moving around the audience.
Each mobile performer repeated one of eight patterns without synchronizing with anyone else. They approached the cello, curved into orbit, escaped through another edge of the room, and returned. The accumulation created the form: cello alone, a dense independent texture, then a gradual return to stillness.
- Origin
- Senior recital
- Core ensemble
- Cello + ~14 performers
- Digital medium
- Spatial browser experience
Actual app capture
Browser audio activation became the opening scene, not a permissions modal.
Hear the source material
One field. No shared clock.
Start two violin clips close together and they will immediately begin drifting. That independence is the musical material, not an implementation accident.
Headphones recommended
Violin · Pattern 1
A short independent loop used by an entering performer.
Violin · Pattern 5
A longer contrasting pattern that drifts against the others.
The creative method
Brainstorm. Specify. Design. Build.
Codex accelerated each stage, but the sequence mattered. I did not begin with code; I began by deciding what the work had to preserve.
01
Brainstorm
Begin with the artistic question
Gravity began as an interdisciplinary concert work for cello and mobile instrumentalists. I returned to it by asking what the original performance could not do: let a listener move inside the composition and hear the same system from its center, its edge, or alongside a performer.
Before choosing technology, I defined the experience principles. The cello would remain the gravitational center. Performers would enter, orbit, escape, and return. Most importantly, every performer would keep an independent musical timeline—no shared tempo, quantization, or hidden conductor.
02
Product requirements
Turn the idea into a PRD
I wrote the product requirements document as the creative contract: origin, audience, journey, core objects, musical and spatial-audio behavior, interface requirements, accessibility, MVP boundaries, and 28 explicit acceptance criteria.
That document made subjective intent testable. “Make gravity audible” became visible and audible lifecycle agreement. “Preserve musical independence” became a prohibition on shared musical clocks, phase locking, and synchronized entrances.
03
Design document
Make the visual system buildable
Next came a focused design system rather than a loose mood board. It defined a visual thesis, interaction verbs, color and type tokens, performer shapes, eight trail cadences, listener cues, motion, accessibility, and the DOM/canvas boundary.
I generated four concept images for the entry gate, Atomic field, Celestial field, and cello listening perspective. Then I converted them into named, deterministic acceptance fixtures so the build could be compared against a stable target instead of a vague request to “make it feel better.”
04
MVP
Build the smallest complete composition
The MVP uses Vite and TypeScript, native Web Audio behind a replaceable engine boundary, and one shared simulation feeding the visual renderer and every spatial source position.
Original cello and violin recordings are decoded in the browser. Each performer receives its own loop source, playback state, spatial graph, lifecycle, trail, and return schedule. The result can accumulate toward a dense field, release naturally, and return to cello alone without turning the work into a sequencer.
Generated concept art
Images became requirements.
The concept images supplied composition, material, light, depth, and interface targets. They were never copied as static backdrops. Real simulation state, accessible controls, and truthful audio metadata always took priority.
Entry gate
Audio activation treated as an opening scene: cello alone, one action, and generous negative space.
Atomic field
A cool, intimate interpretation where shape and trail cadence distinguish autonomous performers.
Celestial field
The same system at another scale: warm light, dust-fine paths, and an invented celestial vocabulary.
Listening from the cello
A perspective study for hearing and seeing the piece from its gravitational center.
The generated references included a few speculative instrument labels. The live app corrects those details: the current mobile library is violin, so the interface never claims clarinet or horn recordings that are not actually present.
The Ultra visual-fidelity push
From working to worth entering.
After the MVP worked, I used Codex in Ultra mode for a concentrated visual pass. The goal was not decoration. It was to close the gap between the live field and the intended atmosphere without breaking the musical system underneath it.
Turn references into a QA contract
Four deterministic fixtures fixed the viewport, simulation seed, performer count, listener state, theme, and renderer time. Each live capture could be compared side by side and as a 50% overlay.
Upgrade materials, not just color
The renderer gained dimensional performer forms, richer field geometry, restrained bloom, cello spectral detail, trail grammar, haze, and clearer foreground-to-distance separation.
Protect product truth
Visual trails still come from the same performer path used for spatial audio. Switching Atomic and Celestial preserves position and playback. Accessibility and performer autonomy remain higher priority than matching a generated pixel.
Test the actual browser
The pass ended in runtime captures across the entry scene, active fields, and cello perspective, plus tests for simulation, spatial mix, performer presence, visual fixtures, and renderer fallback.
Live perspective
Listening from the cello makes perspective compositional: nearby performers become immediate, distant performers recede into the shared acoustic field, and no audio timeline restarts.
How Codex was used
AI as translation, execution, and critique.
Structure
Codex helped turn brainstorming into a PRD, design system, implementation contract, and explicit testable boundaries.
Build
It implemented the simulation, audio boundary, UI, renderers, fixture states, tests, and browser QA workflow.
Refine
Ultra mode drove the focused visual-fidelity loop against the concept targets while keeping behavior and accessibility intact.
The authorship boundary
The original composition, central metaphor, musical material, performer-independence rule, product direction, concept selection, and final taste decisions are mine. Codex made it possible to carry that creative intent into a medium I could not have built this quickly on my own.
The live system
One simulation, two scales.
Atomic and Celestial are visual interpretations of one composition. Every performer keeps its position, visit, lifecycle, selection, and independent playback phase when the view changes.
Atomic
Seven independent violin performers occupy one shared visual and spatial-audio coordinate system.
Celestial
A warm visual interpretation of the same simulation state, with no reset to position or playback.
What this changed
The audience is no longer positioned only outside the work.
Gravity can now be heard from perspectives that were impossible in the concert hall. Everyone inhabits the same composition, but no one has to hear exactly the same performance.