Pulse

The exact prompt

Build PULSE as a complete, dependency-free browser rhythm sequencer in one HTML file with inline CSS and JavaScript. Make no external requests and use no media assets. The visual direction is a polished piece of compact studio hardware: dark charcoal casing, recessed graphite panels, subtle physical borders and key travel, warm off-white typography, restrained monospace readouts, and coral #f27763 as the only accent. Use responsive system fonts, visible focus states, tactile button feedback, and reduced-motion behavior. Keep the page within the viewport width on phone, tablet, and desktop without horizontal page scrolling; the step grid may reflow from 16 columns to 8 and then 4 on narrow screens.

Use exactly one h1 and semantic header, nav, main, and footer landmarks. The header contains a small Pulse wordmark and internal navigation. The introduction presents a concise rhythm-making message. The main hardware panel includes transport controls, tempo and swing sliders, three presets, Clear and Randomize actions, live status and enabled-step readouts, and a 16-step by 4-track grid. A short guide explains pointer and keyboard operation, and a simple footer notes that audio is generated locally.

Implement four tracks named Kick, Snare, Hat, and Clap. Every one of the 64 step buttons toggles independently, exposes its on/off state with aria-pressed, and updates the enabled-step count. Include a native Play/Pause button, a Stop button that resets the playhead, four working track mute buttons, BPM from 60 to 180, swing from 0 to 60 percent, Clear, Randomize, and House, Hip hop, and Techno presets. Presets load distinct patterns and suitable tempo/swing values. Controls remain editable during playback, and the status text reports meaningful changes.

Generate all percussion with Web Audio oscillators and filtered noise only. Do not create or resume an AudioContext until a Play gesture; never autoplay. Use a look-ahead scheduler for steady timing, apply swing as alternating sixteenth-note offsets, and synchronize the visible playhead to audioContext.currentTime. Stop must silence output and clear scheduling state. Support touch and pointer through native controls. Space toggles playback unless focus is in a form field, arrow keys move among grid buttons, Home and End move to track boundaries, and Enter activates the focused native step button. Use roving tabindex within the grid.

At the very start of the inline script initialize window.__DEMO__ = { name: 'pulse', ready: false, frames: 0, effects: ['web-audio-percussion', 'synchronized-playhead'], errors: [] }, install runtime error listeners, keep errors empty during normal use, set ready after the first paint, and increment frames in a requestAnimationFrame loop when reduced motion is not requested. Do not log to the console. Avoid em dash characters in visible copy. Keep the complete file below 90KB.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".

Acceptance criteria (14)

1. Pressing Play for the first time creates or resumes Web Audio and starts synthesized percussion; no AudioContext or playback occurs before that gesture, Pause/Stop silence it, and Stop resets all four playhead columns.
2. All 64 step buttons, four mute buttons, Clear, Randomize, and House, Hip hop, and Techno presets change the pattern or audible state correctly, while the enabled-step count and status text update after each action.
3. BPM changes are clamped by the native 60-180 range and affect scheduler timing, swing from 0-60 percent changes alternating step durations, and the visual playhead follows scheduled audioContext times while playing.
4. At 320px, 768px, and desktop widths the page has no horizontal overflow, every native control has visible keyboard focus, Space toggles playback outside form fields, arrow keys navigate the grid, reduced motion disables decorative transitions and the continuous demo frame counter, and window.__DEMO__ reports ready with an empty errors array.
5. window.__DEMO__.ready becomes true within 5s
6. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
7. window.__DEMO__.errors is empty
8. zero console errors and zero page errors
9. zero failed network requests
10. exactly one <h1> with non-empty text
11. header, main, footer landmarks present
12. no horizontal overflow at 390 / 768 / 1440 widths
13. no horizontal overflow after 2s of animation
14. prefers-reduced-motion: reduce leaves the page usable and errors empty