# Pulse

> **Category:** Interactive
> **Effect:** A synchronized 16-step playhead scans four synthesized percussion tracks while tactile controls shape tempo, swing, and groove.
> **Platform:** cmd-code (`qoder`)
> **Model:** `qoder` — Qoder
> **License:** Free / MIT — copy, paste, ship.
> **Self-contained:** yes — one `index.html`, no build step, no external media.

---

## 🎬 Live demo

Open [`public/demos/pulse/index.html`](../public/demos/pulse/index.html) — generated by the model
above from the prompt below, with no human edits to the markup.

## ✅ Verification

<!-- VERIFICATION:START -->
**Verified:** 17/17 checks passed — ✅ fully passing
**Verified at:** 2026-10-26T01:14:37.274Z
**Demo size:** 41.4 KB (single self-contained file)

### Provenance

| Field | Value |
|---|---|
| Platform | qoder — `` |
| Model | `qoder` |
| Prompt sent | — characters (sha256:—) |
| Prompt tokens | 0 |
| Completion tokens | 0 |
| Reasoning tokens | 0 |
| **Total tokens** | **0** |
| API calls | 0 (0 attempts) |
| Latency | 0.0 s |
| Finish reason | `—` |

### Automated checks

| | Check | Observed |
|---|---|---|
| ✅ | demo file exists and is non-trivial | 42392 bytes |
| ✅ | window.__DEMO__.ready became true | 2 frames, effects: web-audio-percussion, synchronized-playhead |
| ✅ | animation loop is live (>= 20 frames / 1.2s) | 72 frames in 1.2s |
| ✅ | window.__DEMO__.errors empty | clean |
| ✅ | canvas present (optional) | no canvas in this design |
| ✅ | exactly one <h1> with text | "Find your pocket.
Make it pulse." |
| ✅ | header/main/footer landmarks present | header,main,footer |
| ✅ | interactive elements have accessible names | 0 unnamed |
| ✅ | document has <title> | Pulse - Browser Rhythm Sequencer |
| ✅ | document declares lang | en |
| ✅ | no horizontal overflow @ 390px | clean |
| ✅ | no horizontal overflow @ 768px | clean |
| ✅ | no horizontal overflow @ 1440px | clean |
| ✅ | no console errors | clean |
| ✅ | no uncaught page errors | clean |
| ✅ | no failed network requests | clean |
| ✅ | reduced-motion: page still renders content | h1=1 textLen=1045 pageErrors=0 |

_Cross-check pending._

*Reproduce: `node tools/runner.mjs --jobs data/jobs.json` then `node tools/verify.mjs --only pulse`.*
<!-- VERIFICATION:END -->

## 📋 Prompt

```text
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".
```

---

*LandingPagePrompts Prompt Library — free, verified, model-attributed.*