---
canonical_url: "https://www.fftvisualizer.com"
---
<u-page-hero orientation="horizontal">
<template v-slot:title="">

Real-time audio spectrum, on the GPU

</template>

<template v-slot:description="">

A high-performance, WebGL-based audio spectrum analyzer and FFT visualizer for the web —
a framework-agnostic TypeScript core with first-class Vue 3 and React components. Visualize the
microphone, tab/system audio, a WebSocket stream, or your own data — the entire frame
drawn by a single fragment shader.

</template>

<div className="hero-visual">

![FFT Visualizer radial spectrum](https://www.fftvisualizer.com/hero.png)

</div>

<template v-slot:links="">
<u-button color="neutral" size="xl" to="https://www.fftvisualizer.com/guide/introduction" trailing-icon="i-lucide-arrow-right">

Get started

</u-button>

<u-button color="neutral" size="xl" to="https://demo.fftvisualizer.com/" icon="i-lucide-play" variant="subtle" target="_blank">

Live demo

</u-button>

<u-button color="neutral" size="xl" to="https://github.com/harmonics-audio/fft-visualizer" icon="i-simple-icons-github" variant="outline">

View on GitHub

</u-button>
</template>
</u-page-hero>

<u-container>
<demo-player>



</demo-player>
</u-container>

<u-page-section>
<template v-slot:title="">

Why FFT Visualizer

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-cpu">
<template v-slot:title="">

Single-draw-call WebGL

</template>

<template v-slot:description="">

Every bar, LED segment, gradient, glow and reflection is rendered by one fragment
shader — smooth at 120fps with 80 bands in stereo.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-mic">
<template v-slot:title="">

Three data sources

</template>

<template v-slot:description="">

Capture audio locally (mic or tab/system), stream pre-computed FFT over WebSocket,
or feed your own magnitudes via props.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-waves">
<template v-slot:title="">

In-browser FFT (Rust/WASM)

</template>

<template v-slot:description="">

Optional WebAssembly FFT processor, lazy-loaded only when you capture audio locally.
Zero backend required.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-palette">
<template v-slot:title="">

Rich visual modes

</template>

<template v-slot:description="">

LED segments, radial layout, stereo, mirrored reflection, glow, rotation, and 10
gradient presets or your own CSS-color stops.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-package">
<template v-slot:title="">

Framework-agnostic core

</template>

<template v-slot:description="">

A vanilla-TypeScript engine with thin wrappers for Vue and React. Rendering uses
native WebGL: no charting library, no canvas 2D.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-square-dashed">
<template v-slot:title="">

Transparent & themeable

</template>

<template v-slot:description="">

Any background color, including a fully transparent canvas that blends into your
page. SSR-safe for Nuxt.

</template>
</u-page-feature>
</template>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://www.fftvisualizer.com/.well-known/api-catalog)
- [Sitemap (XML)](https://www.fftvisualizer.com/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://www.fftvisualizer.com/sitemap.md)
- [MCP server card: MCP endpoint at https://www.fftvisualizer.com/mcp](https://www.fftvisualizer.com/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://www.fftvisualizer.com/mcp)
- [llms.txt: index of the documentation for LLMs](https://www.fftvisualizer.com/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://www.fftvisualizer.com/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://www.fftvisualizer.com/openapi.json)


## Sitemap

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