An instrument interface must be playable, not just a pretty picture.
An interactive tool or music product. · web instrument, shareable link
- playable groovebox
- 1
- the beat lives in the link
- URL
- tracks × steps
- 8 × 32
A browser groovebox that is an instrument, a brand channel and a measurable traffic engine at once.
KPT-UGMA · UNIT 02 is Keep It Underground's free instrument: eight tracks, 32 steps, synthesised sounds and the whole beat in one link. This page shows the system it is built from – tokens, type, components, motion, the naming engine and the share loop – and every example here works.
- 8 × 32tracks × steps, 8 patterns per track
- 36sounds, all synthesised in the browser – no samples are downloaded
- 16genre presets from dub techno to frenchcore
- 55automated checks in real Chrome after every change
Keep it underground. Keep it in the link.
What problem does the instrument solve?
Problem
A small clothing brand cannot buy attention. Its audience – people who build and run sound systems – ignores ads and responds to something it can use itself and pass on.
Approach
Give away a real instrument, not a demo. Every beat carries the brand, gets a name and fits in one link. Sharing is built in so that it is cheap, personal and measurable.
Outcome
The instrument lives at keepitunderground.com/unit and works on a phone, a desktop and offline. Every shared beat leads back to the same page and from there to the shop.
Listen, change it, watch the name change
This is the system page's own small UNIT: the same 16 presets, the same track colours and exactly the same naming function as the real instrument. Toggle a step – the name is a fingerprint of the pattern.
Arrow keys move the cursor, Space or Enter toggles the step. Track 1, 1: on
This page's instrument is simplified: reduced synthesis, one pattern per track. The full instrument has 8 patterns per track, knobs, a sample browser, MIDI, recording and export.
Eight signals on dark metal
The surface is one dark hardware panel in seven steps. Colour is reserved for signal: every track has its own colour and it repeats in the track number, the steps, the pattern slots and the selected-track panel. Every contrast here is computed from the real tokens.
Surfaces
- --ink#050505
- --ink-2#0B0B0A
- --panel#141513
- --panel-2#1B1C1A
- --cell#232421
- --cell-hi#2E302C
- --dim#333330
Text
- --paper#E8E4DC14.4 : 1 AA
- --slate#7080904.5 : 1 AA
- --muted#7A7D744.4 : 1 AA 18px+
Track signals
- --green#8ACE009.5 : 1 AA
- --orange#FF8C007.9 : 1 AA
- --paper#E8E4DC14.4 : 1 AA
- --rust#C0653A4.5 : 1 AA
- --sky#8FB3C98.3 : 1 AA
- --lime#D8E36A13.2 : 1 AA
- --sand#C9B27C8.8 : 1 AA
- --teal#6FB7A87.9 : 1 AA
Honestly: --muted on the panel stays below 4.5 : 1 and is an open fix for the next version (UX audit 18 Oct 2026, finding 7).
Two typefaces: poster and instrument
Bebas Neue carries the name, the number and the tempo – readable from two metres in a dark club. Space Mono carries everything that is measured: buttons, labels, values, tabular numbers. There is no third family.
EAST SYSTEM 53
▶ PLAY ■ STOP ↗ SHARE BEAT
170 BPM · 01 /32 STEP · −12 st · 18.0 kHz
0123456789 ÕÄÖÜ õäöü
Scale
- 34pxBrandBebas Neue 400
- 30pxLCD valueBebas Neue 400
- 26pxPanel titleBebas Neue 400
- 24pxTrack numberBebas Neue 400
- 22pxBrowser titleBebas Neue 400
- 12pxBodySpace Mono 400/700
- 11pxButtonSpace Mono 400/700
- 10pxLabelSpace Mono 400/700
- 9pxRulerSpace Mono 400/700
One panel, four breakpoints
On a desktop the instrument is one hardware panel: header, ruler, eight rows, the selected-track panel. On a phone the rule is "instrument first": Play and the beat name are on the first screen, the selected track is a thumb-sized 4 × 8 grid and the other tracks are overview rows.
- > 1240pxThree-part panel: browser | wave + note lane | 7 × 2 knobs
- ≤ 1240pxKnobs move below the panel into a full-width row
- ≤ 960px16 steps per row, secondary tools behind "More"
- ≤ 640pxFocus-track grid: selected track 4 × 8, others as overview rows
Components that behave like hardware
Every component gives feedback on press, not on release. Try them: buttons, a step with velocity, pattern slots, a knob and the LCD.
Buttons and states
Step
Velocity fills the cell from the bottom and drives the glow; the note sits at the bottom; the playhead is a paper-coloured frame.
Pattern slots
Grey = empty, light = saved, coloured = playing, blinking = queued until the next bar. Click one.
Knob
Drag up/down, scroll or use the arrow keys; double-click resets.
LCD
A hit has a body
Motion is not decoration, it is rhythmic feedback. The cell and the track number kick on the engine clock, not on the screen frame, so picture and sound never drift. The reduced-motion preference turns all of it off.
Motion tokens
| hit | 160 ms · cubic-bezier(.2, 1.4, .4, 1) | step kicks: scale 1.16 → 1, brightness 1.6 → 1 |
|---|---|---|
| numhit | 180 ms · cubic-bezier(.2, 1.4, .4, 1) | track number kicks along: scale 1.25 → 1 |
| press | scale(.96) · :active | press is felt on pointerdown |
| queue | 450 ms · steps(2) infinite | a queued pattern blinks until the bar ends |
Every beat has a name that comes from its pattern
Nobody writes the name. Tempo, sounds and active steps are joined into one string, an FNV-1a hash is computed from it, and the hash bits pick from 32 adjectives and 32 nouns and add a number. The same pattern always gives the same name – in the browser, on the server, on the share page and in the video. The calculation below runs on the beat you edited above.
- 1 · Canonical string
170|kick-hard:10001000100010001000100010001000|bass-roll:01110111011101110111011101110111|hat-open:00100010001000100010001000100010|clap:00001000000000000000100000000000|hat-closed:11111111111111111111111111111111|zap:00000001000000010000000100000001|bass-acid:00100010001000100010001000100110|ride:10101010101010101010101010101010 - 2 · FNV-1a hash
0x63D5155D = 1674909021 - 3a · adjective = h & 3129EAST3b · noun = (h >>> 5) & 3110SYSTEM3c · number = (h >>> 10) % 1005353
- 4 · NameEAST SYSTEM 53
A user's own name (the "Your name" field) makes a beat but never goes into the link, storage or an analytics event – a test checks this.
The beat lives in the link
The whole beat is packed into the URL: JSON → deflate-raw → base64url. No server, account or database is needed. Every way of sharing leads back to the same instrument, where the beat opens and can be changed again.
- 01Playfirst Play → unit_play
- 02Sharelink · text · embed · 9:16 video + QR · WAV
- 03Open/unit/b/<code> restores the beat → unit_remix_open
- 04Remixnew pattern = new name = new link
Link encoding
code = "1" + base64url( deflate-raw( JSON ) )
JSON = { v:1, b:bpm, m:master, g?:preset,
t:[ { s:sound, k:slot, l:level, p?:{…},
q:{ "<slot>": [ steps32, notes32? ] } } ] }
steps32 = "." off · "0"…"z" velocity 0.05…1.0
→ keepitunderground.com/unit/b/<code>The first seeding round has no numbers yet. The stop rule was written down first: if fewer than 5 % share at ≥ 200 plays, no more sharing features are added – the first minute is fixed instead.
What is under the hood?
Sample-accurate clock
Timing runs in an AudioWorklet and the visuals read the engine clock. WAV export renders two loops from the same clock.
Synthesised sounds
All 36 sounds are made in the browser with an OfflineAudioContext. Your own samples stay on the device and never enter the URL.
An instrument, not a page
Keys, live recording, Web MIDI (pads C1–G1 → tracks 1–8), PWA install and offline use.
A measured bridge
The instrument sends only four named events out of its iframe; the page checks origin and an allow-list before analytics.
Recording lock
Video export freezes the name, genre and tempo at the start – because two of the first three clips switched beats in the last second.
Checked after every change
Type checks, lint, unit tests and 55 checks in real Chrome before and after every release.
What was handed over?
- Instrument
- keepitunderground.com/unit, share page, embed player, PWA
- System
- 20 colour tokens, 2 type families, 5 components, 4 motion tokens, 4 breakpoints
- Growth engine
- named beats, 5 ways to share, a measured path from instrument to checkout, a seeding plan and a stop rule
- Quality
- QA script with 55 checks, unit tests, an evidence folder for every release
Want your brand to have something people pass on by themselves?
Your system
If you need a similar system, answer three questions in the enquiry:
- Which brand or product is it?
- How many surfaces (web, app, print …)?
- When does it need to be ready?