🎛️ Atomic Boombox

A browser-based sample-pad / launchpad instrument where every pad is an element of the periodic table. Tap a pad and you hear that element's signature tone — its atomic emission spectrum, transposed down into the audible range. It plays like an MPC/launchpad crossed with an interactive periodic table.

Built with TypeScript + React + Vite + Tailwind. No backend, no build-time assets to fetch — it runs fully offline.

Sound concept inspired by Atom Tones, which maps each element's spectral emission lines into audible frequencies via additive synthesis with an exponential-decay envelope.

Quick start

npm install
npm run dev      # http://localhost:5173
npm run build    # type-check + production build to dist/
npm run preview  # serve the production build

How it works

Every element on Atom Tones gets one tone built by summing its atomic emission spectral lines (additive synthesis). Atomic spectral lines live in the optical band (hundreds of THz), so Atomic Boombox folds an element's strongest line down by octaves into a musical register and scales the remaining lines by the same factor — preserving the spectral ratios as audible partials. Each partial is a sine oscillator; a fast-attack / exponential-decay envelope makes it read as a struck pad rather than a drone.

This means the pitch and timbre of each pad are derived from the element's actual light.

Audio sourcing (two layers, never silent)

The AUDIO_SOURCE switch in the header (Auto / Synth / Files) selects the strategy in src/audio/engine.ts:

1. Files — if an element has an audioUrl (e.g. an official Atom Tones MP3/M4A), it is fetched, decoded, and cached. Atom Tones' real filenames are irregular (1-Hydrogen-new-raw.mp3, 2-Helium-Tone.mp3, …), so URLs are supplied per-element in the data rather than templated.
2. Synthesis fallback (default, required) — when no file is set or it can't be fetched, the engine synthesises the tone in-browser from the element's spectral lines. The app therefore works with zero external dependencies and never breaks if atomtones.com is unreachable.

Auto uses a file when present and reachable, otherwise synthesises. Out of the box no audioUrls are wired in, so everything is synthesised locally.

Spectral data

src/data/elements.ts holds all 118 elements. A handful of recognisable elements (H, He, Ne, Na, Ar, Ca, Fe, Cu, Hg, …) carry a few real principal emission lines ([wavelength nm, intensity]) so they sound authentic. Every other element derives a deterministic pseudo-spectrum from its atomic number, guaranteeing a distinct, repeatable tone even without measured data.

Elements with no tone

Atom Tones reports no observed emission spectrum for astatine (85), francium (87), and elements 100–118. Those 21 pads render dimmed and silent (hasTone: false) and say so when inspected — never broken audio.

Features

• Full periodic-table pad grid (18 × 7 plus the offset lanthanide/actinide rows), colored by category or by s/p/d/f block.
• Polyphony with a 16-voice cap and oldest-voice stealing — play chords.
• Keyboard play: the first 36 elements map to QWERTY (hints shown on the pads). Octave/transpose shift pitch, not the mapping.
• Web MIDI (optional): MIDI note 48 → element 1, ascending chromatically.
• Performance controls: master volume, ADSR, octave & semitone transpose, hold/sustain, mute, and a convolution-reverb send.
• Step sequencer: up to 8 element tracks × 16 steps, BPM + swing, per-step accents, presets (Noble Gases, Alkali Metals, Organic CHONPS, Coinage), and JSON export/import. Kit + pattern auto-save to localStorage.
• Element detail card: mass, block, group/period, category, and the spectral lines → audible frequencies that build the tone.
• Live visualizer (oscilloscope + spectrum) from the master AnalyserNode.
• Accessible & autoplay-safe: pads are real buttons with ARIA labels, the AudioContext resumes only on a user gesture, prefers-reduced-motion is respected, and nothing autoplays on load.

Project structure

src/
  data/elements.ts      # 118 elements + curated spectral lines + tone metadata
  audio/engine.ts       # AudioContext graph, additive synth, file fallback,
                        # polyphony/voice-stealing, reverb, sequencer scheduler
  hooks/
    useKeyboard.ts      # QWERTY play
    useMIDI.ts          # Web MIDI input
  lib/
    types.ts  layout.ts  colors.ts  keymap.ts  storage.ts
  components/
    PeriodicTable.tsx  Pad.tsx  Controls.tsx  Sequencer.tsx
    ElementDetail.tsx  Visualizer.tsx  Legend.tsx
  App.tsx               # orchestration + state

The original build brief lives in PROMPT.md.

Attribution & licensing

The sound-mapping concept is inspired by atomtones.com (atomic spectra → audible tones). All tones in this app are synthesised locally from spectral data; no Atom Tones audio files are bundled. If you wire official Atom Tones audio in via audioUrl, those files are sourced from atomtones.com and used under that site's terms.