---
title: "Introduction"
description: "What FFT Visualizer is, and why it renders differently from other audio visualizers."
canonical_url: "https://www.fftvisualizer.com/guide/introduction"
---
# Introduction

> What FFT Visualizer is, and why it renders differently from other audio visualizers.

**FFT Visualizer** is a high-performance, WebGL-based real-time audio **spectrum analyzer**
and **FFT visualizer** for the web.

The entire visual — bars, LED segments, radial layout, gradient, glow, reflection — is
drawn by a **single fragment shader in one GPU draw call**, so it stays smooth even at
120 fps with 80 bands in stereo.

<note>

It ships as three packages from [one monorepo](https://github.com/harmonics-audio/fft-visualizer):
[`@fft-visualizer/core`](https://www.fftvisualizer.com/core/installation) — a framework-agnostic vanilla-TypeScript class
you drop onto a `<canvas>` in any framework, or none — plus two thin wrappers around it,
[`@fft-visualizer/vue`](https://www.fftvisualizer.com/vue/installation) and
[`@fft-visualizer/react`](https://www.fftvisualizer.com/react/installation).
**This Guide covers the shared concepts;** the Core, Vue and React tabs cover each package's
own API.

</note>

## Highlights

- **WebGL fragment-shader rendering** — the whole spectrum is one draw call; no per-bar canvas ops.
- **Three data sources** — capture audio locally (mic or tab/system), stream pre-computed FFT over WebSocket, or feed your own data.
- **In-browser FFT** — optional Rust/WASM FFT processor, lazy-loaded only when you capture audio locally.
- **Rich visual modes** — LED segments (two styles), radial, stereo, mirrored reflection, glow, rotation, per-level or per-axis coloring.
- **Flexible gradients** — 10 built-in presets or custom stops in any CSS color format.
- **Zero rendering dependencies** — the whole visual is native WebGL; no charting library, no canvas 2D.
- **Framework-agnostic** — a vanilla-TS core with thin per-framework wrappers for Vue and React.

## Why this instead of a canvas visualizer?

Most spectrum visualizers (e.g. audioMotion-analyzer) draw to a 2D canvas. FFT Visualizer
renders the entire frame — every bar, LED gap, gradient, glow and reflection — in a
**single WebGL fragment shader / draw call**, which keeps it cheap at high band counts and
frame rates.

It also ships a **WebSocket remote-FFT protocol** with reference servers (Python, Node.js,
Rust), so the FFT can run on a separate device — a Raspberry Pi, a media server — and the
browser only draws. That's a case canvas visualizers don't cover.

## Browser support

Requires WebGL (all modern browsers): Chrome 56+, Firefox 51+, Safari 15+, Edge 79+.
Local capture additionally needs `getUserMedia` / `getDisplayMedia`.


## Sitemap

See the full [sitemap](https://www.fftvisualizer.com/sitemap.md) for all pages.