tuneframes 0.1.0 → 0.2.0

package/skills/audio-jazz/SKILL.md

@@ -0,0 +1,141 @@
+---
+name: audio-jazz
+description: Jazz — ii-V-I changes, extended chords, walking bass, swing feel, bebop melody
+---
+
+# TuneFrames — Jazz
+
+## Genre Profile
+- BPM range: 100–180 (ballad 60–90, bebop 180–240)
+- Key characteristics: ii-V-I progressions, extended/altered chords (maj7, min7, dom7, dim7), swing 8th notes, call-and-response phrasing
+- Typical instruments: Piano (PolySynth), walking upright bass (Synth sine), ride cymbal (MetalSynth), brush snare (NoiseSynth), optional vibraphone
+- Mood: Sophisticated, improvisatory, warm, intellectually alive
+
+## Core Pattern
+
+```js
+// Jazz core: 120 BPM swing, Dm7–G7–Cmaj7 (ii-V-I in C major)
+async function main() {
+  await Tone.start();
+  Tone.Transport.bpm.value = 120;
+
+  const reverb = new Tone.Reverb({ decay: 1.8, wet: 0.3 }).toDestination();
+
+  // ── Piano voicings (shell voicings: root + 3rd + 7th) ─────────────────
+  const piano = new Tone.PolySynth(Tone.Synth, {
+    oscillator: { type: 'triangle' },
+    envelope: { attack: 0.01, decay: 0.4, sustain: 0.5, release: 1.2 }
+  }).connect(reverb);
+  piano.volume.value = -10;
+
+  const bar = Tone.Time('1n').toSeconds(); // 1 bar in seconds
+
+  // ii–V–I–I in C (shell voicings)
+  const changes = [
+    ['D3','F3','C4'],      // Dm7 (ii)
+    ['G3','B3','F4'],      // G7  (V)
+    ['C3','E3','B3'],      // Cmaj7 (I)
+    ['C3','E3','G3','B3'], // Cmaj7 full (I hold)
+  ];
+  changes.forEach((ch, i) => piano.triggerAttackRelease(ch, '1n', i * bar));
+
+  // ── Walking bass (quarter notes, chromatic approach notes) ────────────
+  const bass = new Tone.Synth({
+    oscillator: { type: 'sine' },
+    envelope: { attack: 0.01, decay: 0.1, sustain: 0.6, release: 0.2 }
+  }).connect(reverb);
+  bass.volume.value = -8;
+
+  // Classic walking line: D–F–A–C / G–B–D–F / C–E–G–B / C–E–G–C
+  const walk = ['D2','F2','A2','C3','G2','B2','D3','F3','C2','E2','G2','B2','C2','E2','G2','C3'];
+  const q = Tone.Time('4n').toSeconds();
+  walk.forEach((n, i) => bass.triggerAttackRelease(n, '4n', i * q));
+
+  // ── Ride cymbal (swing pattern: 1–2–ah–3–4–ah) ────────────────────────
+  const ride = new Tone.MetalSynth({
+    frequency: 250, harmonicity: 5.1, modulationIndex: 16,
+    resonance: 4000, octaves: 1.5,
+    envelope: { attack: 0.001, decay: 0.3, release: 0.1 }
+  }).connect(reverb);
+  ride.volume.value = -22;
+
+  // Swing ride: beats 1, 2 triplet-late, 3, 4 triplet-late
+  const swingOffset = q * 0.67; // triplet-swing "ah"
+  for (let i = 0; i < 4; i++) {
+    ride.triggerAttackRelease('8n', i * bar);
+    ride.triggerAttackRelease('8n', i * bar + swingOffset);
+    ride.triggerAttackRelease('8n', i * bar + q * 2);
+    ride.triggerAttackRelease('8n', i * bar + q * 2 + swingOffset);
+  }
+}
+```
+
+## Instrument Configuration
+
+```js
+// Jazz piano — triangle wave (mellow, not harsh), moderate decay
+const piano = new Tone.PolySynth(Tone.Synth, {
+  oscillator: { type: 'triangle' },
+  envelope: { attack: 0.01, decay: 0.4, sustain: 0.5, release: 1.2 }
+});
+
+// Upright bass feel — pure sine, tight decay, no sustain tail
+const bass = new Tone.Synth({
+  oscillator: { type: 'sine' },
+  envelope: { attack: 0.01, decay: 0.08, sustain: 0.55, release: 0.15 }
+});
+
+// Ride cymbal — low frequency MetalSynth, long decay
+const ride = new Tone.MetalSynth({
+  frequency: 250, harmonicity: 5.1, modulationIndex: 16,
+  resonance: 4000, octaves: 1.5,
+  envelope: { attack: 0.001, decay: 0.3, release: 0.1 }
+});
+
+// Brush snare — bandpass-filtered white noise
+const snare = new Tone.NoiseSynth({
+  noise: { type: 'white' },
+  envelope: { attack: 0.005, decay: 0.1, sustain: 0, release: 0.05 }
+});
+const snareFilter = new Tone.Filter(2500, 'bandpass');
+snare.connect(snareFilter);
+
+// Room reverb — short, warm
+const reverb = new Tone.Reverb({ decay: 1.8, wet: 0.3 }).toDestination();
+```
+
+## Composition Structure
+
+1. **Head in (0–4s):** Piano states the changes, bass walks, ride establishes swing
+2. **Melody chorus (4–8s):** Bebop-style single-note melody over the changes (arpeggiated +chromatic passing tones)
+3. **Reharmonization (8–12s):** Tritone sub on the V chord (Db7 instead of G7), piano plays richer voicings
+4. **Tag / turnaround:** Quick ii-V back to the top, ritardando on the final bar
+
+## Example Variations
+
+### 1 — Tritone substitution on V (G7 → Db7)
+```js
+// Replace G7 shell with Db7 shell (tritone sub)
+const changes = [
+  ['D3','F3','C4'],    // Dm7
+  ['Db3','F3','B3'],   // Db7 (tritone sub for G7)
+  ['C3','E3','B3'],    // Cmaj7
+];
+```
+
+### 2 — Ballad tempo (70 BPM) with rubato melody
+```js
+Tone.Transport.bpm.value = 70;
+// Hold each chord for 2 bars, melody uses longer note values ('2n', '1n')
+```
+
+### 3 — Vibraphone color (add shimmer on the I chord)
+```js
+const vibe = new Tone.PolySynth(Tone.Synth, {
+  oscillator: { type: 'sine' },
+  envelope: { attack: 0.005, decay: 1.5, sustain: 0.2, release: 2.0 }
+});
+const vibeVib = new Tone.Vibrato({ frequency: 5, depth: 0.05 }).connect(reverb);
+vibe.connect(vibeVib);
+vibe.triggerAttackRelease(['C4','E4','G4','B4'], '2n', barStart);
+```

package/skills/audio-jazz/example.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>TuneFrames — Jazz</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
+</head>
+<body>
+  <div id="tuneframes" style="display:none">{"bpm":132,"duration":"12s"}</div>
+  <script>
+    async function main() {
+      await Tone.start();
+      Tone.Transport.bpm.value = 132;
+
+      // ── Effects ─────────────────────────────────────────────────────────
+      const reverb = new Tone.Reverb({ decay: 1.6, preDelay: 0.01, wet: 0.28 }).toDestination();
+      await reverb.ready;
+
+      // ── Piano — shell voicings (3rd + 7th on top) ───────────────────────
+      const piano = new Tone.PolySynth(Tone.Synth, {
+        oscillator: { type: 'triangle' },
+        envelope: { attack: 0.008, decay: 0.35, sustain: 0.5, release: 1.4 }
+      }).connect(reverb);
+      piano.volume.value = -10;
+
+      const bar = Tone.Time('1n').toSeconds();
+      const q   = Tone.Time('4n').toSeconds();
+
+      // ii–V–I–vi turnaround in C major (2 full passes = 8 bars)
+      // Bar layout: Dm7 | G7 | Cmaj7 | Am7 | repeat
+      const changes = [
+        { chord: ['D3','F3','C4'],       dur: '1n' }, // Dm7
+        { chord: ['G2','B2','F3'],       dur: '1n' }, // G7
+        { chord: ['C3','E3','B3'],       dur: '1n' }, // Cmaj7
+        { chord: ['A2','C3','G3','E4'],  dur: '1n' }, // Am7
+        { chord: ['D3','F3','C4'],       dur: '1n' }, // Dm7 (repeat)
+        { chord: ['Db3','F3','B3'],      dur: '1n' }, // Db7 (tritone sub)
+        { chord: ['C3','E3','B3','G4'],  dur: '2n' }, // Cmaj7
+        { chord: ['G2','B2','F3'],       dur: '2n' }, // G7 (turnaround)
+      ];
+      let t = 0;
+      changes.forEach(({ chord, dur }) => {
+        piano.triggerAttackRelease(chord, dur, t);
+        t += Tone.Time(dur).toSeconds();
+      });
+
+      // ── Walking bass ────────────────────────────────────────────────────
+      const bass = new Tone.Synth({
+        oscillator: { type: 'sine' },
+        envelope: { attack: 0.008, decay: 0.09, sustain: 0.55, release: 0.15 }
+      }).connect(reverb);
+      bass.volume.value = -6;
+
+      // 8-bar walking line (one note per beat = 32 quarter notes)
+      const walkLine = [
+        // Bar 1 Dm7
+        'D2','F2','A2','C3',
+        // Bar 2 G7
+        'G2','B2','D3','F3',
+        // Bar 3 Cmaj7
+        'C3','E2','G2','B2',
+        // Bar 4 Am7
+        'A2','C3','E3','G2',
+        // Bar 5 Dm7 (chromatic approach)
+        'D2','Eb2','E2','F2',
+        // Bar 6 Db7 (tritone)
+        'Db3','Ab2','F2','Eb2',
+        // Bar 7 Cmaj7
+        'C2','G2','E2','B2',
+        // Bar 8 G7
+        'G2','Ab2','A2','B2',
+      ];
+      walkLine.forEach((n, i) => bass.triggerAttackRelease(n, '4n', i * q));
+
+      // ── Ride cymbal (jazz swing pattern) ────────────────────────────────
+      const ride = new Tone.MetalSynth({
+        frequency: 240, harmonicity: 5.1, modulationIndex: 16,
+        resonance: 4000, octaves: 1.5,
+        envelope: { attack: 0.001, decay: 0.28, release: 0.08 }
+      }).connect(reverb);
+      ride.volume.value = -22;
+
+      // Swing triplet feel: beat 1, beat 2-and (triplet late), beat 3, beat 4-and
+      const swingLate = q * 0.67;
+      for (let b = 0; b < 8; b++) {
+        const base = b * bar;
+        ride.triggerAttackRelease('8n', base);
+        ride.triggerAttackRelease('8n', base + swingLate);
+        ride.triggerAttackRelease('8n', base + q * 2);
+        ride.triggerAttackRelease('8n', base + q * 2 + swingLate);
+      }
+
+      // ── Brush snare on 2 and 4 ──────────────────────────────────────────
+      const snareBp = new Tone.Filter(2800, 'bandpass').connect(reverb);
+      const snare   = new Tone.NoiseSynth({
+        noise: { type: 'white' },
+        envelope: { attack: 0.004, decay: 0.09, sustain: 0, release: 0.04 }
+      }).connect(snareBp);
+      snare.volume.value = -26;
+
+      for (let b = 0; b < 8; b++) {
+        snare.triggerAttackRelease('8n', b * bar + q);       // beat 2
+        snare.triggerAttackRelease('8n', b * bar + q * 3);   // beat 4
+      }
+
+      // ── Bebop melody (enters bar 3) ─────────────────────────────────────
+      const melody = new Tone.Synth({
+        oscillator: { type: 'triangle' },
+        envelope: { attack: 0.005, decay: 0.15, sustain: 0.4, release: 0.5 }
+      }).connect(reverb);
+      melody.volume.value = -12;
+
+      // Classic bebop phrase: arpeggiated chords + chromatic passing tones
+      const phrase = [
+        // Over Cmaj7 (bar 3)
+        { note: 'G4',  time: bar * 2,             dur: '8n' },
+        { note: 'E4',  time: bar * 2 + q * 0.5,  dur: '8n' },
+        { note: 'C5',  time: bar * 2 + q,         dur: '8n' },
+        { note: 'B4',  time: bar * 2 + q * 1.5,  dur: '8n' },
+        { note: 'A4',  time: bar * 2 + q * 2,     dur: '8n' },
+        { note: 'G4',  time: bar * 2 + q * 2.5,  dur: '8n' },
+        { note: 'F4',  time: bar * 2 + q * 3,     dur: '4n' },
+        // Over Am7 (bar 4)
+        { note: 'E4',  time: bar * 3 + q * 0.5,  dur: '8n' },
+        { note: 'C5',  time: bar * 3 + q,         dur: '8n' },
+        { note: 'B4',  time: bar * 3 + q * 1.5,  dur: '8n' },
+        { note: 'A4',  time: bar * 3 + q * 2,     dur: '4n' },
+        { note: 'G4',  time: bar * 3 + q * 3,     dur: '4n' },
+        // Over Dm7 again (bar 5)
+        { note: 'D5',  time: bar * 4,             dur: '8n' },
+        { note: 'C5',  time: bar * 4 + q * 0.5,  dur: '8n' },
+        { note: 'A4',  time: bar * 4 + q,         dur: '8n' },
+        { note: 'F4',  time: bar * 4 + q * 1.5,  dur: '8n' },
+        { note: 'E4',  time: bar * 4 + q * 2,     dur: '4n' },
+        { note: 'Eb4', time: bar * 4 + q * 3,     dur: '8n' }, // chromatic
+        { note: 'D4',  time: bar * 4 + q * 3.5,  dur: '8n' },
+        // Over Db7 (bar 6) — altered sound
+        { note: 'Ab4', time: bar * 5,             dur: '8n' },
+        { note: 'F4',  time: bar * 5 + q * 0.5,  dur: '8n' },
+        { note: 'Db4', time: bar * 5 + q,         dur: '4n' },
+        { note: 'C4',  time: bar * 5 + q * 2,     dur: '2n' }, // resolve to C
+      ];
+      phrase.forEach(({ note, time, dur }) => melody.triggerAttackRelease(note, dur, time));
+    }
+  </script>
+</body>
+</html>

package/skills/audio-lofi/SKILL.md

@@ -0,0 +1,140 @@
+---
+name: audio-lofi
+description: Lo-fi Hip Hop — dusty jazzy chords, soft keys, muffled drums, chill study vibe
+---
+
+# TuneFrames — Lo-fi Hip Hop
+
+## Genre Profile
+- BPM range: 70–90
+- Key characteristics: Jazz-adjacent chord progressions (Am–F–C–G or ii–V–I extensions), swung/lazy 8th-note feel, heavy reverb + slight LP filter on everything, vinyl warmth
+- Typical instruments: Rhodes/electric piano (PolySynth triangle/sine), soft bass (Synth), MembraneSynth kick filtered low, closed hi-hat (MetalSynth), pad layer
+- Mood: Nostalgic, cozy, introspective, study-focus
+
+## Core Pattern
+
+```js
+// Lo-fi core: 80 BPM, Am–F–C–G, 4 chords × 2 beats each
+async function main() {
+  await Tone.start();
+  Tone.Transport.bpm.value = 80;
+
+  // ── Effects chain (everything runs warm and muffled) ──────────────────
+  const reverb  = new Tone.Reverb({ decay: 3.5, wet: 0.55 }).toDestination();
+  const lpFilter = new Tone.Filter(1800, 'lowpass').connect(reverb);
+  // Optional: slight tape distortion
+  const warm    = new Tone.Distortion(0.04).connect(lpFilter);
+
+  // ── Rhodes-style chords ───────────────────────────────────────────────
+  const keys = new Tone.PolySynth(Tone.Synth, {
+    oscillator: { type: 'triangle' },
+    envelope: { attack: 0.04, decay: 0.3, sustain: 0.7, release: 1.8 }
+  }).connect(warm);
+  keys.volume.value = -10;
+
+  // ii–V–I–VI in A minor
+  const chords = [
+    ['A3','C4','E4'],   // Am
+    ['F3','A3','C4'],   // F maj
+    ['C3','E3','G3'],   // C maj
+    ['G3','B3','D4'],   // G maj
+  ];
+  const step = Tone.Time('2n').toSeconds(); // 2 beats each chord
+  chords.forEach((ch, i) => keys.triggerAttackRelease(ch, '2n', i * step));
+
+  // ── Walking bass ──────────────────────────────────────────────────────
+  const bass = new Tone.Synth({
+    oscillator: { type: 'sine' },
+    envelope: { attack: 0.02, decay: 0.1, sustain: 0.5, release: 0.4 }
+  }).connect(lpFilter);
+  bass.volume.value = -8;
+
+  const bassNotes = ['A2', 'F2', 'C2', 'G2'];
+  bassNotes.forEach((n, i) => bass.triggerAttackRelease(n, '4n', i * step));
+
+  // ── Muffled kick (MembraneSynth + deep LP) ────────────────────────────
+  const kickFilter = new Tone.Filter(200, 'lowpass').connect(reverb);
+  const kick = new Tone.MembraneSynth({
+    pitchDecay: 0.05, octaves: 5,
+    envelope: { attack: 0.001, decay: 0.4, sustain: 0, release: 0.4 }
+  }).connect(kickFilter);
+  kick.volume.value = -14;
+
+  // Kick on beats 1 and 3 (seconds at 80 BPM: beat = 0.75s)
+  const beat = 60 / 80;
+  [0, beat * 2, beat * 4, beat * 6].forEach(t => kick.triggerAttackRelease('C1', '8n', t));
+
+  // ── Soft hi-hat ───────────────────────────────────────────────────────
+  const hat = new Tone.MetalSynth({
+    frequency: 400, envelope: { attack: 0.001, decay: 0.08, release: 0.01 },
+    harmonicity: 5.1, modulationIndex: 32, resonance: 4000, octaves: 1.5
+  }).connect(reverb);
+  hat.volume.value = -24;
+
+  for (let i = 0; i < 8; i++) {
+    hat.triggerAttackRelease('8n', i * beat * 0.5);
+  }
+}
+```
+
+## Instrument Configuration
+
+```js
+// Rhodes feel — triangle oscillator, slow attack, long release
+const keys = new Tone.PolySynth(Tone.Synth, {
+  oscillator: { type: 'triangle' },
+  envelope: { attack: 0.04, decay: 0.3, sustain: 0.7, release: 1.8 }
+});
+
+// Tape warmth — very light distortion before the LP filter
+const tape = new Tone.Distortion(0.04);
+const lp   = new Tone.Filter(1800, 'lowpass');  // cuts harsh highs
+
+// Lush room reverb
+const reverb = new Tone.Reverb({ decay: 3.5, preDelay: 0.01, wet: 0.55 });
+
+// Chain: keys → tape → lp → reverb → destination
+keys.connect(tape); tape.connect(lp); lp.connect(reverb); reverb.toDestination();
+
+// Muffled kick — very tight low-pass (200 Hz)
+const kickLp = new Tone.Filter(200, 'lowpass').toDestination();
+const kick   = new Tone.MembraneSynth({ pitchDecay: 0.05, octaves: 5 }).connect(kickLp);
+
+// Airy hat — kept very quiet, short decay
+const hat = new Tone.MetalSynth({ frequency: 400, envelope: { decay: 0.08 } });
+hat.volume.value = -24;
+hat.connect(reverb);
+```
+
+## Composition Structure
+
+1. **Intro (0–2s):** Keys enter alone with chord 1, bass follows on beat 2
+2. **Main loop (2–8s):** Full Am–F–C–G cycle, kick on 1+3, hat 8ths, bass walks roots
+3. **Variation (8–10s):** Add a simple melody fragment (C5–E5–G5–A5) over the progression
+4. **Outro:** Let chords ring out with long release, hat fades (volume ramp)
+
+## Example Variations
+
+### 1 — Jazzier chord voicings (7ths)
+```js
+const chords = [
+  ['A3','C4','E4','G4'],  // Am7
+  ['F3','A3','C4','E4'],  // Fmaj7
+  ['C3','E3','G3','B3'],  // Cmaj7
+  ['G3','B3','D4','F4'],  // G7
+];
+```
+
+### 2 — Slower, dreamier (70 BPM + delay)
+```js
+Tone.Transport.bpm.value = 70;
+const delay = new Tone.FeedbackDelay('8n.', 0.3).connect(reverb);
+keys.connect(delay); // dotted-8th echo
+```
+
+### 3 — Add a simple vinyl-crackle effect (noise burst)
+```js
+const noise = new Tone.Noise('pink').connect(new Tone.Filter(600, 'lowpass').toDestination());
+noise.volume.value = -40;
+noise.start(0).stop('+10');
+```

package/skills/audio-lofi/example.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>TuneFrames — Lo-fi Hip Hop</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
+</head>
+<body>
+  <div id="tuneframes" style="display:none">{"bpm":80,"duration":"12s"}</div>
+  <script>
+    async function main() {
+      await Tone.start();
+      Tone.Transport.bpm.value = 80;
+
+      // ── Effects chain ───────────────────────────────────────────────────
+      const reverb   = new Tone.Reverb({ decay: 3.5, preDelay: 0.01, wet: 0.55 }).toDestination();
+      await reverb.ready;
+      const lpFilter = new Tone.Filter(1800, 'lowpass').connect(reverb);
+      const tape     = new Tone.Distortion(0.04).connect(lpFilter);
+
+      // ── Soft pink noise (vinyl warmth) ──────────────────────────────────
+      const noiseLp   = new Tone.Filter(600, 'lowpass').connect(reverb);
+      const vinylNoise = new Tone.Noise('pink').connect(noiseLp);
+      vinylNoise.volume.value = -42;
+      vinylNoise.start(0).stop('+12');
+
+      // ── Rhodes-style keys ───────────────────────────────────────────────
+      const keys = new Tone.PolySynth(Tone.Synth, {
+        oscillator: { type: 'triangle' },
+        envelope: { attack: 0.05, decay: 0.3, sustain: 0.7, release: 2.0 }
+      }).connect(tape);
+      keys.volume.value = -10;
+
+      // Am7 – Fmaj7 – Cmaj7 – G7
+      const chords = [
+        ['A3','C4','E4','G4'],
+        ['F3','A3','C4','E4'],
+        ['C3','E3','G3','B3'],
+        ['G3','B3','D4','F4'],
+      ];
+
+      // 2 beats per chord at 80 BPM = 1.5s per chord
+      const step = Tone.Time('2n').toSeconds();
+      chords.forEach((ch, i) => keys.triggerAttackRelease(ch, '2n', i * step));
+      // Second pass — loop the chords again from 6s
+      chords.forEach((ch, i) => keys.triggerAttackRelease(ch, '2n', 6 + i * step));
+
+      // ── Walking bass ────────────────────────────────────────────────────
+      const bassFilter = new Tone.Filter(600, 'lowpass').connect(reverb);
+      const bass = new Tone.Synth({
+        oscillator: { type: 'sine' },
+        envelope: { attack: 0.02, decay: 0.12, sustain: 0.5, release: 0.5 }
+      }).connect(bassFilter);
+      bass.volume.value = -6;
+
+      // Root + passing tone on each chord (quarter notes)
+      const bassLines = [
+        ['A2','C3'],
+        ['F2','G2'],
+        ['C2','E2'],
+        ['G2','A2'],
+      ];
+      bassLines.forEach(([root, pass], i) => {
+        bass.triggerAttackRelease(root, '4n', i * step);
+        bass.triggerAttackRelease(pass, '4n', i * step + step * 0.5);
+      });
+      bassLines.forEach(([root, pass], i) => {
+        bass.triggerAttackRelease(root, '4n', 6 + i * step);
+        bass.triggerAttackRelease(pass, '4n', 6 + i * step + step * 0.5);
+      });
+
+      // ── Muffled kick ────────────────────────────────────────────────────
+      const kickLp = new Tone.Filter(200, 'lowpass').connect(reverb);
+      const kick   = new Tone.MembraneSynth({
+        pitchDecay: 0.05, octaves: 5,
+        envelope: { attack: 0.001, decay: 0.4, sustain: 0, release: 0.4 }
+      }).connect(kickLp);
+      kick.volume.value = -14;
+
+      const beat = 60 / 80; // 0.75s
+      // Kick on beats 1 and 3 of each bar (2 bars = 12 beats total)
+      for (let bar = 0; bar < 4; bar++) {
+        kick.triggerAttackRelease('C1', '8n', bar * beat * 4);
+        kick.triggerAttackRelease('C1', '8n', bar * beat * 4 + beat * 2);
+      }
+
+      // ── Snare (soft) ────────────────────────────────────────────────────
+      const snare = new Tone.NoiseSynth({
+        noise: { type: 'white' },
+        envelope: { attack: 0.001, decay: 0.12, sustain: 0, release: 0.05 }
+      }).connect(new Tone.Filter(3000, 'bandpass').connect(reverb));
+      snare.volume.value = -22;
+
+      // Snare on beats 2 and 4
+      for (let bar = 0; bar < 4; bar++) {
+        snare.triggerAttackRelease('8n', bar * beat * 4 + beat);
+        snare.triggerAttackRelease('8n', bar * beat * 4 + beat * 3);
+      }
+
+      // ── Soft hi-hat (swung 8ths) ────────────────────────────────────────
+      const hat = new Tone.MetalSynth({
+        frequency: 400,
+        envelope: { attack: 0.001, decay: 0.06, release: 0.01 },
+        harmonicity: 5.1, modulationIndex: 32, resonance: 4000, octaves: 1.5
+      }).connect(reverb);
+      hat.volume.value = -28;
+
+      // Swung 8th notes: on beat, then slightly late (lazy swing)
+      for (let i = 0; i < 16; i++) {
+        const swing = (i % 2 === 1) ? 0.05 : 0; // slight swing delay on offbeats
+        hat.triggerAttackRelease('16n', i * beat * 0.5 + swing);
+      }
+
+      // ── Melody fragment (enters bar 3, ~4.5s) ───────────────────────────
+      const melodyDelay = new Tone.FeedbackDelay({ delayTime: '8n', feedback: 0.25, wet: 0.3 }).connect(reverb);
+      const melody = new Tone.Synth({
+        oscillator: { type: 'sine' },
+        envelope: { attack: 0.02, decay: 0.2, sustain: 0.3, release: 0.8 }
+      }).connect(melodyDelay);
+      melody.volume.value = -16;
+
+      // Simple pentatonic phrase over bars 3–4 (starting at 4.5s)
+      const phrase = [
+        { note: 'E5', time: 4.5, dur: '8n' },
+        { note: 'C5', time: 5.0, dur: '8n' },
+        { note: 'A4', time: 5.5, dur: '4n' },
+        { note: 'G4', time: 6.5, dur: '8n' },
+        { note: 'A4', time: 7.0, dur: '4n' },
+        { note: 'E5', time: 7.75, dur: '8n' },
+        { note: 'C5', time: 8.25, dur: '2n' },
+      ];
+      phrase.forEach(({ note, time, dur }) => melody.triggerAttackRelease(note, dur, time));
+    }
+  </script>
+</body>
+</html>