Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Open live demo

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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A seamless loop of a whole number of bars at your tempo, with four-on-the-floor, broken or half-time drums
  • A turning record with your label, curved label type, side mark and a coloured or black pressing
  • 22 documented effect settings: tempo, bars, pattern, bar count, reach, thickness, gain, punch, waveform, sparks, rpm, colors, label, size and readout
  • Glowing bars on dark backgrounds or crisp printed ones on light, with the ring above the copy on phones
  • An SVG still for reduced motion and failures, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, and a frame-exact MP4 and poster
  • Open-source licenses for every part it builds on

Good fit

  • Podcast apps, radio shows and music players can put a turning record inside a living ring of bars right beside their headline.
  • Record labels and shops can press the vinyl in a brand color and set their name or catalogue number round the paper label.
  • Teams launching on social can record a seamless silent loop and lay their own track under it at the same tempo.

Not for

  • Visualizing real audio: the beat is generated, not analysed from a track
  • Playing sound: the page and the video are silent
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section with a circular audio visualizer round a turning vinyl record. Radial equalizer bars, bass at the bottom and treble at the top, rise and fall with a generated beat: the kick throws the bass outward and makes the ring breathe, the snare lifts the middle, hats flicker at the top and a four-chord pad moves slow peaks. A waveform loop hugs the record, sparks fly on each kick, a sheen lies across the turning grooves and a playhead runs round the dial. No audio file needed. Your agent sets your colors, label, tempo, fonts, logo and words, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Circular Equalizer hero for the Longwave podcast app: coral bars glowing on dark aubergine, label 'Longwave · Late shows', headline 'Long shows, well played.', and record the 12-second loop.

Similar Skills

View all
New
web
Pixel Sort Glitch HeroClaude CodeCodexCursor+3 more agents
New
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated hero section · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

2D canvas (no libraries, no audio)Generated drum patterns and pad as envelopes of timeMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial media

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

Write a review

FAQ

Does the ring react to my real music or audio?

No. The beat is generated as numbers, not analysed from a track, so the hero needs no audio file and every frame is the same on every machine. The page and the video are silent, but you can lay your own track under the video at the same tempo.

Can I set the tempo and the beat?

Yes. Set bpm from 70 to 170 (default 120), a loop of 2 to 8 bars of 4/4, and a pattern: four-on-the-floor, a broken beat or a slow half-time backbeat. The build prints the loop length; 6 bars at 120 BPM is 12 seconds, and recording exactly that length loops cleanly.

What do visitors see on phones or with reduced motion?

On phones the ring sits above the copy and the navigation pill is hidden. Visitors who ask for reduced motion get one real frame at 4.02 seconds, and if the browser blocks the script they see an SVG still picture instead, so the hero is never blank.

Which agents is Circular Equalizer 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 generated beat, the record and dial, the Motion Heroes kit and the examples. No third-party code 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.