Sequencer

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PULSE / 16-Step Drum Sequencer</title>
<style>
/* ── css: base ── */
:root{--bg:#101217;--panel:#191c23;--panel2:#20242d;--line:#303541;--text:#edf0f5;--muted:#7c8493;--cyan:#58e0d2;--orange:#ff9d4d;--red:#ff5b62;--yellow:#f6d365}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#252b36 0,#101217 55%);color:var(--text);font-family:'Trebuchet MS',Arial,sans-serif;min-height:100vh}.machine{width:min(1180px,calc(100% - 40px));margin:30px auto 20px}.topbar{height:108px;background:linear-gradient(135deg,#20242c,#16191f);border:1px solid #363c48;border-radius:14px 14px 7px 7px;display:flex;align-items:center;padding:24px 28px;gap:30px;box-shadow:0 12px 35px #0007}.brand{display:flex;align-items:center;gap:14px;min-width:260px}.brand-mark{color:var(--cyan);font-size:32px;text-shadow:0 0 18px #58e0d2}.brand h1{font-size:26px;letter-spacing:7px;margin:0;font-weight:700}.brand p{font:10px monospace;letter-spacing:2px;color:var(--muted);margin:6px 0 0}.transport{display:flex;align-items:center;gap:10px}.transport-btn{width:45px;height:45px;border-radius:9px;border:1px solid #4a5260;background:#2b313b;color:var(--cyan);font-size:18px;cursor:pointer;box-shadow:inset 0 1px #ffffff18}.transport-btn:hover{background:#3a4350}.transport-btn.stop{color:#ff7377}.status{font:11px monospace;letter-spacing:1px;color:var(--muted);margin-left:8px;display:flex;gap:8px;align-items:center}.led{width:7px;height:7px;border-radius:50%;background:#4a5361}.led.live{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.master{margin-left:auto;width:170px}.master label,.control-strip label{display:flex;justify-content:space-between;font:11px monospace;letter-spacing:1px;color:var(--muted)}output{color:var(--text);font-weight:500}small{font-size:9px;color:var(--muted);margin-left:3px}input[type=range]{width:100%;accent-color:var(--cyan);height:4px;margin-top:12px;cursor:pointer}.control-strip{display:flex;align-items:center;gap:45px;padding:22px 24px;border:1px solid var(--line);border-top:0;background:#171a20}.bpm-control{width:240px}.bpm-control label{font-size:13px;color:var(--text)}.bpm-control output{font-size:27px;color:var(--cyan);margin-left:auto}.swing-control{width:190px}.strip-actions{margin-left:auto;display:flex;gap:10px}.ghost-btn,.accent-btn{padding:11px 15px;border-radius:6px;font:11px monospace;letter-spacing:1px;cursor:pointer}.ghost-btn{background:transparent;border:1px solid #3d4450;color:var(--muted)}.accent-btn{background:#d66d31;border:1px solid #ff9d4d;color:#fff;box-shadow:0 0 18px #d66d3133}.ghost-btn:hover,.accent-btn:hover{filter:brightness(1.15)}.grid-shell{background:var(--panel);border:1px solid var(--line);border-radius:0 0 12px 12px;padding:18px 20px 22px;box-shadow:0 14px 30px #0005;overflow-x:auto}.grid-head,.track-row{display:grid;grid-template-columns:220px repeat(16,minmax(35px,1fr));gap:7px;min-width:850px}.grid-head{margin-bottom:10px}.track-head{font:10px monospace;color:var(--muted);letter-spacing:1px;padding:6px 10px}.step-labels{grid-column:2/-1;display:grid;grid-template-columns:repeat(16,1fr);gap:7px}.step-labels span{font:10px monospace;color:#667080;text-align:center;padding:6px 0}.step-labels span:nth-child(4n+1){color:var(--yellow)}.track-row{height:62px;margin-bottom:7px;align-items:stretch}.track-info{display:flex;align-items:center;gap:10px;background:#1d2129;border:1px solid #2c323d;border-radius:7px;padding:8px 10px}.track-icon{font-size:20px;width:28px;text-align:center}.track-name{font:12px monospace;letter-spacing:.5px;flex:1}.track-mix{display:flex;align-items:center;gap:7px}.track-mix input{width:48px;margin:0;height:3px}.mute{font:9px monospace;border:1px solid #49515f;border-radius:3px;background:transparent;color:#8992a1;padding:4px;cursor:pointer}.mute.on{color:var(--red);border-color:var(--red);background:#ff5b6215}.cell{border:1px solid #303744;background:#242a34;border-radius:5px;cursor:pointer;position:relative;transition:transform .08s,background .1s,box-shadow .1s}.cell:nth-child(4n+2){margin-left:4px}.cell:hover{border-color:#6c7788;transform:translateY(-1px)}.cell.active{background:linear-gradient(145deg,#287a7a,#194e56);border-color:#58e0d2;box-shadow:0 0 10px #58e0d244}.cell.accent{background:linear-gradient(145deg,#bd7134,#704025);border-color:var(--orange);box-shadow:0 0 13px #ff9d4d55}.cell.playing{outline:2px solid #f6d365;outline-offset:2px;z-index:2}.cell.playing.active{box-shadow:0 0 20px #f6d36599}.row-muted .cell{opacity:.25}.hint{font:10px monospace;color:#656d7c;letter-spacing:.6px;text-align:center;margin:18px}.hint span{color:#a0a8b6}.hint i{display:inline-block;width:4px;height:4px;background:#424956;border-radius:50%;margin:0 12px 2px}@media(max-width:760px){.machine{width:calc(100% - 18px);margin:10px auto}.topbar{height:auto;flex-wrap:wrap;padding:18px;gap:18px}.brand{min-width:0}.master{margin-left:0;width:150px}.control-strip{gap:18px;flex-wrap:wrap;padding:16px}.strip-actions{margin-left:0}.grid-shell{padding:14px 10px}.grid-head,.track-row{grid-template-columns:185px repeat(16,minmax(30px,1fr));gap:5px}.step-labels{gap:5px}.cell:nth-child(4n+2){margin-left:3px}.hint{line-height:2.2}.hint i{margin:0 5px}}
/* ── css: animations ── */
.cell.pulse{animation:cellPulse .22s ease-out}@keyframes cellPulse{50%{transform:scale(1.08);filter:brightness(1.4)}}
</style>
</head>
<body>
<main class="machine" id="machine"><header class="topbar"><div class="brand"><span class="brand-mark">✦</span><div><h1>PULSE</h1><p>16-STEP RHYTHM ENGINE</p></div></div><div class="transport"><button id="playBtn" class="transport-btn" aria-label="Play">▶</button><button id="stopBtn" class="transport-btn stop" aria-label="Stop">■</button><div class="status"><span class="led" id="statusLed"></span><span id="statusText">READY</span></div></div><div class="master"><label>MASTER <output id="masterVal">78%</output></label><input id="masterVol" type="range" min="0" max="1" step="0.01" value="0.78"></div></header><section class="control-strip"><div class="bpm-control"><label for="tempo">TEMPO <output id="tempoVal">112</output><small>BPM</small></label><input id="tempo" type="range" min="60" max="200" value="112"></div><div class="swing-control"><label for="swing">SWING <output id="swingVal">12%</output></label><input id="swing" type="range" min="0" max="0.6" step="0.01" value="0.12"></div><div class="strip-actions"><button id="clearBtn" class="ghost-btn">CLEAR</button><button id="randomBtn" class="accent-btn">✦ RANDOMIZE</button></div></section><section class="grid-shell"><div class="grid-head"><div class="track-head">TRACK / MIX</div><div id="stepLabels" class="step-labels"></div></div><div id="grid" class="grid"></div></section><footer class="hint"><span>SPACE</span> PLAY / STOP <i></i><span>CLICK</span> TOGGLE <i></i><span>RIGHT CLICK</span> ACCENT <i></i><span>DRAG</span> PAINT</footer></main>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.start = start;
// PULSE — 16-step synthesized drum sequencer
const STEPS = 16, TRACKS = 6, LOOKAHEAD = .1, TICK_MS = 25, STORAGE = 'pulse-pattern-v1';
const tracks = [{ name: 'KICK', icon: '◉', vol: .95, mute: false }, { name: 'SNARE', icon: '▰', vol: .78, mute: false }, { name: 'CLOSED HAT', icon: '⊹', vol: .55, mute: false }, { name: 'OPEN HAT', icon: '⌒', vol: .52, mute: false }, { name: 'CLAP', icon: '≋', vol: .62, mute: false }, { name: 'TOM', icon: '◒', vol: .72, mute: false }];
const starter = [[3, 0, 0, 0, 2, 0, 0, 0, 3, 0, 0, 0, 2, 0, 0, 0], [0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0], [2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 2], [0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0]];
let pattern = starter.map(r => r.slice()), tempo = 112, swing = .12, master = .78;
let audio = null, masterGain = null, running = false, timer = 0, nextStep = 0, origin = 0, raf = 0;
const $ = (id) => document.getElementById(id);
function restore() { try {
    const s = JSON.parse(localStorage.getItem(STORAGE) || 'null');
    if (s) {
        pattern = s.pattern;
        tempo = s.tempo;
        swing = s.swing;
        master = s.master;
        tracks.forEach((t, i) => { t.vol = s.vols[i]; t.mute = s.mutes[i]; });
    }
}
catch { } }
function save() { localStorage.setItem(STORAGE, JSON.stringify({ pattern, tempo, swing, master, vols: tracks.map(t => t.vol), mutes: tracks.map(t => t.mute) })); }
function render() {
    $('tempoVal').textContent = String(tempo);
    $('swingVal').textContent = Math.round(swing * 100) + '%';
    $('masterVal').textContent = Math.round(master * 100) + '%';
    $('tempo').setAttribute('value', String(tempo));
    $('swing').setAttribute('value', String(swing));
    $('masterVol').setAttribute('value', String(master));
    const labels = $('stepLabels');
    labels.innerHTML = '';
    for (let i = 0; i < STEPS; i++) {
        const x = document.createElement('span');
        x.textContent = String(i + 1).padStart(2, '0');
        labels.append(x);
    }
    const grid = $('grid');
    grid.innerHTML = '';
    tracks.forEach((t, r) => {
        const row = document.createElement('div');
        row.className = 'track-row' + (t.mute ? ' row-muted' : '');
        const info = document.createElement('div');
        info.className = 'track-info';
        info.innerHTML = '<span class="track-icon">' + t.icon + '</span><span class="track-name">' + t.name + '</span><span class="track-mix"><input type="range" min="0" max="1" step=".01" value="' + t.vol + '"><button class="mute ' + (t.mute ? 'on' : '') + '">M</button></span>';
        info.querySelector('input').addEventListener('input', e => { t.vol = +e.target.value; save(); });
        info.querySelector('button').addEventListener('click', () => { t.mute = !t.mute; render(); save(); });
        row.append(info);
        for (let s = 0; s < STEPS; s++) {
            const c = document.createElement('div');
            const state = pattern[r][s];
            c.className = 'cell ' + (state === 2 ? 'active' : state === 3 ? 'accent' : '');
            c.dataset.r = String(r);
            c.dataset.s = String(s);
            c.title = state === 3 ? 'Accent' : state ? 'On' : 'Off';
            c.addEventListener('click', () => { pattern[r][s] = pattern[r][s] === 0 ? 2 : pattern[r][s] === 2 ? 3 : 0; render(); save(); });
            c.addEventListener('contextmenu', e => { e.preventDefault(); pattern[r][s] = pattern[r][s] === 0 ? 3 : 0; render(); save(); });
            bindPaint(c, r, s);
            row.append(c);
        }
        grid.append(row);
    });
}
function setupAudio() { if (audio)
    return; audio = new AudioContext(); masterGain = audio.createGain(); masterGain.gain.value = master; masterGain.connect(audio.destination); }
function env(g, t, peak, decay) { g.gain.setValueAtTime(.0001, t); g.gain.exponentialRampToValueAtTime(peak, t + .004); g.gain.exponentialRampToValueAtTime(.0001, t + decay); }
function noise(t, dur, filter, peak, bright = false) { const b = audio.createBuffer(1, Math.ceil(audio.sampleRate * dur), audio.sampleRate), a = b.getChannelData(0); for (let i = 0; i < a.length; i++)
    a[i] = Math.random() * 2 - 1; const s = audio.createBufferSource(), f = audio.createBiquadFilter(), g = audio.createGain(); s.buffer = b; f.type = bright ? 'highpass' : 'bandpass'; f.frequency.value = filter; f.Q.value = bright ? .7 : 1.2; env(g, t, peak, dur); s.connect(f).connect(g).connect(masterGain); s.start(t); s.stop(t + dur + .02); }
function tone(t, freq, decay, peak, type = 'sine') { const o = audio.createOscillator(), g = audio.createGain(); o.type = type; o.frequency.value = freq; o.connect(g).connect(masterGain); env(g, t, peak, decay); o.start(t); o.stop(t + decay + .03); }
function hit(r, t, v) { const p = (v === 3 ? 1.25 : 1) * tracks[r].vol; if (r === 0) {
    const o = audio.createOscillator(), g = audio.createGain();
    o.type = 'sine';
    o.frequency.setValueAtTime(155, t);
    o.frequency.exponentialRampToValueAtTime(48, t + .12);
    o.connect(g).connect(masterGain);
    env(g, t, .85 * p, .38);
    o.start(t);
    o.stop(t + .42);
}
else if (r === 1) {
    noise(t, .22, 1500, .42 * p);
    tone(t, 185, .18, .22 * p, 'triangle');
}
else if (r === 2)
    noise(t, .055, 7200, .28 * p, true);
else if (r === 3)
    noise(t, .42, 5600, .25 * p, true);
else if (r === 4) {
    for (let i = 0; i < 3; i++)
        noise(t + i * .028, .12, 1900, .24 * p);
}
else
    tone(t, 105, .28, .42 * p, 'triangle'); }
function stepTime(n) { const d = 60 / tempo / 4; return origin + n * d + (n % 2 ? d * swing : 0); }
function schedule() { if (!audio || !running)
    return; while (stepTime(nextStep) < audio.currentTime + LOOKAHEAD) {
    const t = stepTime(nextStep), s = nextStep % STEPS;
    const w = window;
    w.__scheduled = w.__scheduled || [];
    w.__scheduled.push({ step: s, time: t });
    if (w.__scheduled.length > 100)
        w.__scheduled.shift();
    pattern.forEach((row, r) => { if (row[s] && !tracks[r].mute)
        hit(r, t, row[s]); });
    nextStep++;
} }
function visual() { if (!audio || !running)
    return; let n = 0; while (stepTime(n + 1) <= audio.currentTime)
    n++; document.querySelectorAll('.cell.playing').forEach(x => x.classList.remove('playing')); document.querySelectorAll('[data-s="' + (n % STEPS) + '"]').forEach(x => x.classList.add('playing')); raf = requestAnimationFrame(visual); }
function play() { setupAudio(); audio.resume(); if (running)
    return; running = true; nextStep = 0; origin = audio.currentTime + .06; window.__scheduled = []; $('statusText').textContent = 'RUNNING'; $('statusLed').classList.add('live'); schedule(); timer = window.setInterval(schedule, TICK_MS); raf = requestAnimationFrame(visual); }
function stop() { if (!running)
    return; running = false; clearInterval(timer); cancelAnimationFrame(raf); document.querySelectorAll('.playing').forEach(x => x.classList.remove('playing')); $('statusText').textContent = 'READY'; $('statusLed').classList.remove('live'); }
let painting = false;
function paintCell(c, r, s) { pattern[r][s] = pattern[r][s] === 0 ? 2 : 0; c.className = 'cell ' + (pattern[r][s] === 2 ? 'active' : pattern[r][s] === 3 ? 'accent' : ''); save(); }
function bindPaint(c, r, s) { c.addEventListener('pointerdown', e => { painting = true; e.preventDefault(); paintCell(c, r, s); }); c.addEventListener('pointerenter', () => { if (painting)
    paintCell(c, r, s); }); }
function randomize() { pattern = Array.from({ length: TRACKS }, (_, r) => Array.from({ length: STEPS }, (_, s) => r === 0 ? (Math.random() < .34 ? 2 : 0) : Math.random() < ([.18, .3, .22, .16, .12][r - 1] || .2) ? (Math.random() < .18 ? 3 : 2) : 0)); render(); save(); }
window.addEventListener('pointerup', () => painting = false);
restore();
render();
$('playBtn').addEventListener('click', play);
$('stopBtn').addEventListener('click', stop);
$('tempo').addEventListener('input', e => { tempo = +e.target.value; if (running && audio)
    origin = audio.currentTime - nextStep * (60 / tempo / 4); render(); save(); });
$('swing').addEventListener('input', e => { swing = +e.target.value; render(); save(); });
$('masterVol').addEventListener('input', e => { master = +e.target.value; if (masterGain)
    masterGain.gain.setTargetAtTime(master, audio.currentTime, .01); render(); save(); });
$('clearBtn').addEventListener('click', () => { pattern = pattern.map(r => r.map(() => 0)); render(); save(); });
$('randomBtn').addEventListener('click', randomize);
window.addEventListener('keydown', e => { if (e.code === 'Space' && !(e.target instanceof HTMLInputElement)) {
    e.preventDefault();
    running ? stop() : play();
} });
window.__pulse = { play, stop, getState: () => ({ tempo, swing, pattern, running }), setTempo: (v) => { tempo = v; render(); save(); } };
function start() { }
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"typescript","sessionId":"db3f6823-c087-4020-bf8f-76a4b092cbf4","tokensIn":712375,"tokensOut":32374,"tokensTotal":744749,"turns":16,"toolCalls":28,"failedToolCalls":3,"timestamp":"2026-07-31T03:28:27.506Z"} -->