The page this skill built from examples/halfnight, working in your browser. Opens in a new tab. Also: .

12-second example rendered by this skill from examples/halfnight · 1280×720

Example settingswhat each example above was built from

examples/halfnighthero.json

Brand: Halfnight
Headline: Shows people stay up for.
Badge: Independent podcast studio
Colors: background #0d0a18 · ink #f5ede0 · accent #ff9e5e
Mode: dark
Fonts: Fraunces and Instrument Sans

examples/tidewirehero.json

Brand: Tidewire
Headline: Every octave, left alone.
Badge: New · the Loom pocket polysynth
Colors: background #ece6da · ink #16140f · accent #e0452b
Mode: light
Fonts: Bricolage Grotesque and IBM Plex Sans

What you get

A self-contained index.html hero and an embed.html to paste into an existing site
A player with play/pause, track name and time, a level meter and a microphone toggle; nothing plays until the visitor asks
A ridgeline landscape of the last seconds of the music, stereo, converging on a sun that blooms with the bass, under stars that shimmer with the treble
An idle state that breathes on its own, a reduced-motion frame and an SVG still for no-script
An offline analysis of your track (assets/spectrum.js) that keeps the recording exact and stands in when a browser blocks live analysis
A 1080p MP4 with the track as AAC, frame-exact and seamless for looping tracks
A music generator with three styles (lo-fi, electronic, ambient) for original loops you can ship
24 documented effect settings, and contrast and layout checks at 390, 768, 1024 and 1440 px
Open-source licenses for every part it builds on

Good fit

Podcast studios, radio shows and labels can let visitors press play on a theme and watch the music build a landscape behind the headline.
Synth, headphone and audio-gear makers can turn the hero into a live demo that also listens to the visitor’s microphone.
Teams launching on social can record a seamless clip whose sound is the very track the picture reacts to.

Not for

Autoplaying sound: the visitor always presses play
Long-form players: it plays a theme or a demo, not an episode library (see a podcast player)
Full landing pages below the hero (see the Landing Pages series)

About this skill

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.

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.

How it works

You ask
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.
Your agent
1. 1
  Collect the brand
  Every claim, price and date in the copy must come from the person, and the track must be theirs to publish.
2. 2
  Get the track ready
  Put the audio file next to hero.json.
3. 3
  Write hero.json
  Copy the closer example and replace everything: examples/halfnight/hero.json (a podcast studio: night sky, amber sun, cream lines, a lo-fi theme) or examples/tidewire/hero.json (a headphone and synth maker: warm paper, ink ridgelines, a vermilion sun, an electronic demo).
4. 4
  Build and prepare the audio
  The build lists every problem in hero.json at once and writes nothing until they're fixed.
5. 5
  Check
  It loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast for every line of text (the player too), names on every link and button, one h1.
6. 6
  Look at it, and listen
  The stills are frames of the recording (the track playing).
7. 7
  Record the video with its sound
  Use the length audio.mjs printed (one whole loop) so the clip repeats without a seam.
8. 8
  Put it live
  As a page: upload out/index.html and the whole out/assets/ folder (logo, track, spectrum.js) to any static host.
You get
- out/index.html
- out/embed.html
- out/preview.mp4
- out/poster.png
- out/assets/logo.svg
- out/assets/spectrum.js

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.

Last checked Nov 7, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

build: fix hero.json first
Each line names the field and what to change.
The land doesn't react when I press play on my computer
You opened out/index.html from disk. Browsers don't let a file:// page analyse its own audio, so it follows assets/spectrum.js instead; if that's missing too, run audio.mjs. Serve the folder (npx serve out) to hear and see the live analyser. AudioVisualizerHero.source() in the console says what the land is following.
The track is on another site and the land only follows spectrum.js
The server doesn't send CORS headers for it. Add Access-Control-Allow-Origin, or host the file next to the page.

What’s in the download

SKILL.md19.8 KB
examples/
examples/halfnight/1.94 KBHalfnight, a podcast studio, with theme.mp3 · 2 files
examples/tidewire/2.03 KBTidewire, headphones and a synth, with loom-demo.mp3 · 2 files
scripts/
scripts/effect/
scripts/effect/effect.js34.4 KBthe visualizer in the browser: the player, the Web Audio graph, the band mapping, smoothing and onset, the idle land, and the sky, sun, stars and ridges on a 2D canvas.
scripts/effect/effect.mjs11.9 KBthe effect's settings, checks and the SVG still, drawn with the same maths.
scripts/kit/the kit shared by every Motion Heroes skill: build and checks, the section's CSS, the browser runtime (clock, pausing, pixel ratio, reduced motion, fallback), the recorder, the pinned fonts and KIT.md, which explains them.
scripts/kit/build.mjs34.5 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/fonts.json5.42 KB
scripts/kit/KIT.md16.0 KB
scripts/kit/record.mjs8.11 KB
scripts/kit/runtime.js15.1 KB
scripts/kit/shell.css9.48 KB
scripts/kit/three.json6.35 KB
scripts/audio.mjs7.40 KBcopies the track next to the page and writes assets/spectrum.js, the offline analysis the recording and the fallback use.
scripts/build.mjs263 Bbuild the page and record stills or a silent video. They call the Motion Heroes kit.
scripts/check.mjs9.73 KBLookbk's checks, screenshots, colour maths and HTML writer.
scripts/chrome.mjs3.63 KB
scripts/color.mjs1.40 KB
scripts/film.mjs4.28 KBrecords the video with the kit and lays the track under it, frame-exact.
scripts/inline.mjs1.67 KB
scripts/markup.mjs6.15 KB
scripts/music.mjs23.4 KBwrites original, seamless music loops (night, pulse, drift) if there's no track.
scripts/record.mjs255 B
scripts/screenshot.mjs1.79 KB
NOTICE.md2.09 KBwhere the effect and the music come from, and the fonts it loads.
TESTED.json950 B

28 files · 233 KB · installs to ~/.claude/skills/audio-visualizer-hero for Claude Code and ~/.agents/skills/audio-visualizer-hero for other agents

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

Similar Skills

View all

Circular Equalizer Hero+3

Pixel Sort Glitch Hero+3

Firefly Meadow Hero+3

Fireworks Night Hero+3

Kinetic Type Grid Hero+3

Constellation Map Hero+3

DNA Helix Hero+3

Origami Fold Hero+3

Details

Output: Audio-reactive hero section · page + embed + 1080p video with sound
Needs: Node.js 18+, Chrome (or Chromium/Edge), ffmpeg, and an audio file (or the included loop generator)
Series: Motion Heroes · 87 skills
For: Founder Marketer Designer Ecommerce seller Content creator
Updated: Nov 10, 2026
Checked: Nov 7, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

2D canvas and the Web Audio API (AnalyserNode per stereo channel), no librariesThe same FFT, window and band mapping run offline in Node for the recordingOriginal seamless music loops synthesised from scratchMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg

Uses tools

FFmpeg Chrome Node.js

Good forProduct launch Brand Social media

Effect guideAudio visualizer

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Does it really react to my audio, or is the beat faked?

It really reacts. The page analyses the track with the Web Audio API while it plays, and the recording draws every frame from the same analysis run offline on the same file, so the video’s motion matches its sound.

Will it play sound when the page opens?

No. Nothing plays until the visitor presses play, and the microphone is only used after they turn it on; it feeds the analysis and is never recorded or sent.

What if I don’t have a track?

The package includes a generator that synthesises original, seamless loops in three styles, and the land also has an idle state that breathes on its own without any audio.

Which agents is Audio Visualizer Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

Lookbk wrote this package: the visualizer, the analyser mapping, the offline analysis and recorder with sound, the music generator and its example tracks, the Motion Heroes kit and the examples. No third-party code or audio is included. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.