audio-reactive
audio-reactive lets you create dynamic visual experiences synchronized to sound. Tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. Perfect for live performances, interactive installations, and immersive media projects.
audio-reactive is an MIT-licensed library for creating dynamic visual experiences synchronized to sound. It lets you tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. You can build music visualizers, live performance visuals, interactive installations, and immersive media projects where graphics respond in real-time to audio input.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
audio-reactive is an MIT-licensed library for creating dynamic visual experiences synchronized to sound. It lets you tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. You can build music visualizers, live performance visuals, interactive installations, and immersive media projects where graphics respond in real-time to audio input.
Use it when
- audio-reactive provides real-time FFT analysis and reactive animation capabilities to build music visualizers.
- Yes.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/audio-reactive · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is audio-reactive and what can I build with it?
audio-reactive is an MIT-licensed library for creating dynamic visual experiences synchronized to sound. It lets you tap into music frequencies and beat detection to drive animations, lighting, and effects that pulse with your audio. You can build music visualizers, live performance visuals, interactive installations, and immersive media projects where graphics respond in real-time to audio input.
How does audio-reactive handle real-time audio visualization?
audio-reactive provides real-time FFT analysis and reactive animation capabilities to build music visualizers. It analyzes audio data on the fly, extracting frequency information and beat patterns that can trigger visual responses instantly. This enables you to create responsive graphics that react to music as it plays, from subtle frequency-based animations to dramatic beat-triggered effects.
Can I map audio data to visual properties like color and rotation?
Yes. audio-reactive lets you map audio data to visual properties including scale, color, rotation, and opacity. This means you can tie frequency ranges to specific visual attributes—for example, bass frequencies could control scale while mid-range frequencies drive color shifts. This flexible mapping approach lets you design custom audio-visual relationships tailored to your creative vision.
How do beat detection and triggered visual responses work?
audio-reactive implements beat detection that identifies rhythmic peaks in your audio, enabling triggered visual responses synchronized to the music's rhythm. When a beat is detected, you can fire animations, flash effects, particle bursts, or other visual events. This creates impactful moments where graphics respond directly to the song's pulse and energy.
Does audio-reactive work with Three.js and React Three Fiber?
audio-reactive integrates with Three.js and React Three Fiber, allowing you to build sophisticated 3D audio-reactive experiences. You can combine audio analysis with 3D graphics libraries to create immersive visualizations, from reactive geometry and bloom effects to particle systems and complex animations all driven by sound data.
What audio-driven effects can I create with this library?
audio-reactive supports a wide range of effects including beat flashes, pop animations, bloom effects, color shifts, particle systems, and audio smoothing/filtering. You can create frequency-to-visual mappings for subtle reactive graphics or dramatic beat-triggered effects. The library's flexible architecture lets you design custom audio-visual effects for performances, installations, and interactive media.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Audio Reactive Visuals
Connecting audio analysis to visual parameters.
Quick Start
import * as Tone from 'tone';
const analyser = new Tone.Analyser('fft', 256);
const player = new Tone.Player('/audio/music.mp3');
player.connect(analyser);
player.toDestination();
function animate() {
const fft = analyser.getValue();
const bass = (fft[2] + 100) / 100; // Normalize to 0-1
// Apply to visual
element.style.transform = `scale(${1 + bass * 0.2})`;
requestAnimationFrame(animate);
}
Core Patterns
Audio-to-Visual Mapping
```javascript class AudioReactiveMapper { constructor(analyser) { this.analyser = analyser; this.smoothers = { bass: new Smoother(0.85), mid: new Smoother(0.9), high: new Smoother(0.92) }; }
// Get values optimized for different visual properties getValues() { const fft = this.analyser.getValue(); const
(truncated - see the full file via the links below)
File tree — 2 files
skills/audio-reactive/SKILL.md
skills/audio-reactive/_meta.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create audio-driven visual effects that respond to music frequencies and beats”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
audio-analysis provides tools to decompose audio signals into their frequency components using FFT algorithms, enabling detailed spectral visualization and analysis. Extract magnitude and phase data across the frequency spectrum to understand audio characteristics, detect patterns, and power advanced audio processing workflows.
audio-router intelligently directs audio processing requests to the right specialized skill, whether for playback control, sound analysis, or reactive audio handling. Built for Claude, it streamlines how audio workflows are orchestrated across multiple focused capabilities.
postfx-effects delivers a collection of post-processing filters designed to enhance 3D scene rendering with cinematic quality. Apply bloom, color grading, depth-of-field, and other visual effects to transform raw renders into polished final output. Integrate seamlessly into game engines and real-time graphics pipelines.
postfx-bloom delivers post-processing bloom effects for 3D rendering pipelines. Configure bloom intensity, threshold, and blur radius to create glowing highlights and atmospheric lighting. Ideal for games and interactive visualizations seeking polished visual enhancement.
This skill lets you layer visual effects onto React Three Fiber scenes after rendering. Apply color grading, bloom, depth-of-field, and other post-processing techniques to elevate your 3D graphics. Perfect for developers building immersive web experiences with enhanced cinematography.
Develop your audio engineering skills with comprehensive guidance on recording, mixing, and mastering. This skill covers the core techniques and workflows used by professionals to achieve polished, broadcast-quality sound. Whether you're starting out or refining your craft, gain practical knowledge to elevate your audio projects.
More skills postfx-composer (MIT) · audio-playback (MIT)