Click
Audio-Reactive Visualizer
/187colorwaveaudioA real WebAudio AnalyserNode feeds a live waveform to the glowing curve; press Start to sound a soft chord pad.
187AUDIO skill
187AUDIO — Audio-reactive 3D geometry.
Connects Web Audio to Three.js so meshes react to music or mic input, with clear permission and safety notes.
Audio lab
5 live audio systems
The two 187AUDIO patterns wired to the real Web Audio API — plus a few extra tricks for the cool factor: a playable theremin, pentatonic pluck pads, and a spectrum-bloom arpeggiator. Everything is a soft sine chord or pluck (no harsh tones), needs no audio file, and tears its audio graph down on stop. Press Start / Play, or tap the pads.
Click
Spectrum Bloom Arp
★ bonusA pentatonic arpeggio of plucks runs through a real AnalyserNode; each note blooms a glowing frequency bar.
Drag
press & glide
Theremin
★ bonusPress and glide — X bends the pitch, Y the volume, with a 5.5Hz vibrato and a low-pass for warmth.
Click
Pentatonic Pluck Pads
★ bonusTap any pad for a soft two-oscillator pluck with a fast decay envelope — pentatonic, so it never clashes.
Click
Custom Audio Player
/187howlerA Howler-style player — play/scrub/volume UI wired to a soft WebAudio chord pad, so it needs no audio file.
Triggers
How to invoke 187AUDIO
| Trigger | |
|---|---|
| /187audio | |
| 187AUDIO | |
| audio | |
| audio reactive | |
| music visualizer | |
| frequency mesh | |
| mic input | |
| audio three.js | |
| beat reactive |
Use cases
When to route to 187AUDIO
Build audio-reactive mesh or particle systems
Sync visuals to frequency bands or beat detection
Add microphone-driven motion with permission handling
Avoid autoplay audio and harsh flashing effects
Output contract
What 187AUDIO delivers
- 1Audio node graph
- 2Frequency-band mapping
- 3Geometry reactivity spec
- 4Permission and performance notes
- 5Next actions
Routing
When to hand off to another skill
| Route to | When |
|---|---|
| 187VIZ | the output is a data-driven visualization |
| 187MOTION | reusable audio-reactive hooks are needed |
| 187ACCESS+ | auto-play audio or flashing motion is involved |
Templates
Artifacts 187AUDIO produces
| Template | When to use |
|---|---|
| audio-reactive-spec.md | Building a music-reactive scene |
| frequency-mapping.md | Mapping audio bands to geometry |