BeatBloom

Inspiration

Music apps keep asking for accounts, subscriptions, and downloads before you can make a single sound. Meanwhile, the most joyful creative tool we know - a step sequencer - is just a grid and some math. We wanted to see how far a single static web page could go: a real synthesizer, a generative visual that grows out of the notes you play, and a song you can hand to a friend as a link, with no server anywhere in the loop.

What it does

BeatBloom is a browser step sequencer with a 4-track x 16-step grid (kick, snare, hi-hat, lead synth). Every note you light up feeds a synchronized generative bloom visualizer: petals, rings, and particles that pulse with the kick and grow with the pattern's density. The lead columns are tuned to A minor pentatonic, so any pattern you draw stays in key - there is no wrong note.

• Three visual themes (Neon, Sunset, Mono).
• Presets, a musical randomizer, tempo control, mute, and keyboard play.
• The entire song - pattern, tempo, and theme - is encoded into the share link's URL hash. Paste the link anywhere and your friend opens your exact beat.
• One-click WAV export renders your loop offline and downloads a real audio file.

No account, no backend, no tracking. Everything runs in the tab.

How we built it

Plain HTML, CSS, and JavaScript. The audio is a Web Audio step sequencer with a 25 ms lookahead scheduler: synthesized kick (sine pitch-drop), snare (filtered noise burst), hi-hat (high-passed noise), and a detuned-saw lead through a lowpass envelope. The visualizer is a 2D canvas renderer driven by the same scheduler clock, so blooms land exactly on the steps that trigger them. Songs serialize to a compact base64 payload in the URL fragment, which is never sent to a server. WAV export uses OfflineAudioContext to render the exact same pattern. The layout adapts from desktop to small phones, with 30px+ touch targets and a horizontally scrolling grid whose labels travel with the cells.

Challenges we ran into

Scheduling audio and visuals from one clock without drift took a few iterations - requestAnimationFrame alone is not sample-accurate, so the bloom engine reads the sequencer's audio-time step queue instead of its own timer. Getting the mobile grid to stay usable meant rebuilding the header and grid as one wrapping, scrolling unit rather than a squeezed fixed layout.

Accomplishments

A full song survives a copy-paste. The share link is the save file. The exported WAV is rendered by the app's own synth, so what you download is exactly what you heard.

What we learned

How much of a DAW's core feel comes from scheduling discipline, and how the pentatonic constraint turns a randomize button into a composition tool instead of a noise generator.

What's next

Pattern banks, swing control, longer song chains in the URL, and MIDI export.

Built with

JavaScript, Web Audio API, Canvas 2D, OfflineAudioContext, HTML, CSS. No frameworks, no build step, no dependencies.

Built With

• css
• html
• javascript
• web-audio-api