Remotion Rule: Audio Visualization

What it is

This is a Remotion skill rule that provides audio visualization patterns for programmatic video creation in React. It covers spectrum bar animations, waveform rendering, and bass-reactive visual effects. The rule is part of the official Remotion Agent Skill and activates automatically when an AI coding agent works on audio visualization in a Remotion project.

The rule targets developers using Remotion to create programmatic videos with audio-reactive visuals. It provides the exact API patterns, hook usage, and animation techniques needed to sync visual elements with audio data.

How it saves time or tokens

Without this rule, an AI agent guesses at Remotion's audio visualization API based on general React knowledge. The rule provides verified patterns for useAudioData(), visualizeAudio(), and frequency-domain processing. This eliminates debugging cycles from incorrect API usage and produces working audio-reactive animations on the first attempt.

How to use

1. Install the Remotion skills:

npx skills add remotion-dev/skills

1. The rule activates automatically when you work on audio visualization in a Remotion project.

1. Ask your AI agent to create audio-reactive components and it will use the correct Remotion patterns.

Example

Spectrum bar visualization using Remotion's audio APIs:

import { useAudioData, visualizeAudio } from '@remotion/media-utils';
import { useCurrentFrame, useVideoConfig } from 'remotion';

export const SpectrumBars: React.FC<{ src: string }> = ({ src }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const audioData = useAudioData(src);

  if (!audioData) return null;

  const visualization = visualizeAudio({
    fps,
    frame,
    audioData,
    numberOfSamples: 32,
  });

  return (
    <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
      {visualization.map((v, i) => (
        <div
          key={i}
          style={{
            width: 20,
            height: v * 300,
            backgroundColor: `hsl(${i * 10}, 80%, 60%)`,
          }}
        />
      ))}
    </div>
  );
};

This creates a color-coded spectrum bar visualization that reacts to audio frequencies in real time.

Related on TokRepo

• AI Tools for Video — Video creation and editing tools for programmatic content
• AI Tools for Design — Design tools for creating visual assets and animations

Common pitfalls

• useAudioData() is async and returns null initially. Always add a null check before accessing the audio data to prevent render errors.
• The numberOfSamples parameter must be a power of 2 (16, 32, 64, etc.) for proper FFT processing.
• Audio visualization adds computation per frame. Keep the sample count reasonable (32-64) for real-time preview performance.
• Always check the official documentation for the latest version-specific changes and migration guides before upgrading in production environments.