# Pocket Groovebox

A boutique-hardware beat machine that sounds good on the first tap.

Category: Music toy

## The brief

Build a playable pocket groovebox: a beat machine with the tactile charm of a boutique hardware instrument. It needs a 16-step sequencer with four synthesized tracks (kick, snare, hi-hats and bass) made with the Web Audio API or Tone.js; no samples. Add tempo, swing, knobs that turn by dragging, per-track mute, a Mutate button that tastefully varies the pattern, and a live visualizer. Load a catchy default pattern so pressing Play sounds good immediately. Encode the current pattern in the URL hash so a groove can be shared as a link.

## The exact prompt every model received

````markdown
Build a playable pocket groovebox: a beat machine with the tactile charm of a boutique hardware instrument. It needs a 16-step sequencer with four synthesized tracks (kick, snare, hi-hats and bass) made with the Web Audio API or Tone.js; no samples. Add tempo, swing, knobs that turn by dragging, per-track mute, a Mutate button that tastefully varies the pattern, and a live visualizer. Load a catchy default pattern so pressing Play sounds good immediately. Encode the current pattern in the URL hash so a groove can be shared as a link.

## House rules (identical for every model)

- Build a website in `./site/`. The entry point is `./site/index.html`. Only `./site/` gets published, so keep scratch files, scripts and tooling outside it.
- It must be fully static: no backend, no server code, no API keys, no logins. It will be served as plain files from a CDN under a sub-path and shown inside an iframe, so use relative URLs only.
- JavaScript libraries and web fonts from public CDNs are fine (cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com, esm.sh, Google Fonts). Nothing else may be fetched at runtime.
- Resources: you may create any media the site needs (images, textures, audio, video, 3D models, data files) and put them in `./site/`. Make them yourself with code or local tools: node, python3 and ffmpeg are installed, and you may `npm install` packages into a folder outside `./site/`. Do not download third-party media. Budget: 40 MB total, 15 MB per file.
- It must work with mouse, keyboard and touch, on screens from 375 px phones to wide desktops, and run smoothly on a mid-range laptop.
- The first 3 seconds matter: it should look impressive immediately.
- Test it. Run `node .prism/check.mjs`: it opens `./site` in a real headless Chromium at desktop (1440×900) and phone (390×844) sizes, prints console errors and failed requests, and saves screenshots to `./.prism/shots/`. Look at the screenshots. Run it as often as you like.
- Work autonomously; nobody will answer questions. You have up to 60 minutes.
- When you are done, write `./NOTES.md` (outside `./site/`) covering what you built, your key decisions, and known issues.
````

## Artifacts

- **Haiku 4.5** (`claude-haiku-4-5-20251001`, 4m 59s): live https://prism-artifacts.berrocal.xyz/pocket-groovebox/haiku-4-5/site/index.html · replicate https://prism.berrocal.xyz/i/pocket-groovebox/haiku-4-5/index.md · pack https://prism-artifacts.berrocal.xyz/pocket-groovebox/haiku-4-5/pack.zip
- **GPT-6 Sol** (`gpt-6-sol`, 10m 56s): live https://prism-artifacts.berrocal.xyz/pocket-groovebox/gpt-6-sol/site/index.html · replicate https://prism.berrocal.xyz/i/pocket-groovebox/gpt-6-sol/index.md · pack https://prism-artifacts.berrocal.xyz/pocket-groovebox/gpt-6-sol/pack.zip
- **GPT-6 Luna** (`gpt-6-luna`, 6m 6s): live https://prism-artifacts.berrocal.xyz/pocket-groovebox/gpt-6-luna/site/index.html · replicate https://prism.berrocal.xyz/i/pocket-groovebox/gpt-6-luna/index.md · pack https://prism-artifacts.berrocal.xyz/pocket-groovebox/gpt-6-luna/pack.zip

Input resources: none