About Synthwave

A playable neon instrument built to test browser audio, pattern, and control feel.

Synthwave explores how far a small Tone.js system can go when the visual grid and the musical grid are the same thing. Each scene stays deterministic through its seed, while the player shapes rhythm and tone through hover, taps, keys, scale choice, and voice changes.

What It Is

This experiment is a browser-based instrument panel built with Tone.js. Each tile in the grid maps to a note, and each seed creates a repeatable color arrangement so the same scene can be heard and seen again.

The system is intentionally small: a 7 by 16 deck, a few scales, a few synth voices, and one shared URL state. The goal was not realism or deep synthesis. It was immediacy, mood, and readable cause and effect.

How To Use It

1. Arm audio

Browsers gate Web Audio behind a user gesture, so the live route asks for one explicit tap before notes can sound.

2. Play the grid

Hover for sustained phrases, tap for shorter hits, or use the keyboard for precise note stepping.

3. Shape and share

Use the mixer drawer to change scale, voice, volume, or seed, then copy the URL to keep the exact state.

What To Notice

Pattern and repetition

The seed controls the tile arrangement, so favorite scenes can be revisited and compared. Musical repetition becomes easier to hear when the visual scene is stable.

Tone changes

The voice and scale options are intentionally few, so it is easy to hear how the same grid changes character without getting lost in excessive controls.

Interaction model

Pointer hover, taps, and keyboard stepping all produce slightly different rhythms. That mix is part of what makes the stage feel performative instead of static.

Tradeoffs

The project stays shallow by design. It avoids sequencing, recording, or patch editing so the main surface can stay legible, bold, and quick to touch.

Browser audio constraint

Browsers gate Web Audio behind a user gesture, so the live route requires an explicit interaction before notes can sound. Keeping that rule close to the stage was part of the design brief, because it is a real limitation of the medium rather than optional onboarding copy.