Audio spectrum waves
Layered horizontal waves that vibrate like a music visualizer and fade softly towards the edges.
Settings
Code
<div class="pt-spectrum"><canvas></canvas></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
These waves fit anything with sound: the homepage of a podcast, the release page of a new single, a voice assistant’s landing page or a DJ’s booking page. They move on their own and don’t react to real audio, which keeps them simple and predictable. An animated sound wave background drawn on canvas with a little JavaScript.
The number of lines follows the density slider: two or three look elegant, ten feel busy and energetic. Put the headline above or below the middle band, since that’s where the waves swing the most.