# Audio Visualizer Hero

> A hero section that really listens. Your track, started by a play button and never autoplayed, or the visitor’s microphone, is analysed live with the Web Audio API and drawn as a valley at dusk: the spectrum as ridgelines, treble meeting in the middle and bass rising into mountains at the sides, left channel left and right channel right. A dozen times a second the current ridge is stamped into the land and slides back toward a low sun, so the last seconds of the music stand as terrain. The sun blooms with the bass and flares on kicks, the stars shimmer with the treble, and the copy sits in the valley. Your agent sets your colors, fonts, logo, words and track, checks contrast at four widths and records a 1080p video with the track’s own sound, every frame drawn from the same spectrum the browser computes.

- Output: Web, Audio-reactive hero section · page + embed + 1080p video with sound
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/audio-visualizer-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- An audio file for the hero to play: a theme, an intro, a demo, 10 to 60 seconds that loops well (mp3, m4a, ogg, wav and anything else ffmpeg reads). No track? `scripts/music.mjs` writes an original loop (see step 2).
- Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg, to analyse the track and make the video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- A web server for the live page (any static host, or `npx serve out` locally). Opened from `file://`, the browser won't let the page analyse its own track; it then follows `assets/spectrum.js` instead, which looks the same.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add audio-visualizer-hero
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/audio-visualizer-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/audio-visualizer-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/audio-visualizer-hero` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Build an Audio Visualizer hero for Halfnight, our podcast studio: night sky, amber sun, cream ridgelines, our station theme in the player, headline 'Shows people stay up for.', and record a 12-second video with the theme under it.