HTML + CSSBackgrounds

Pulsing ridgelines

Stacked lines with peaks that move like a pulse; the pointer raises mountains wherever it passes, on canvas.

Settings

1x
1x
1

Code

<div class="pt-ridgelines"><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

See all Backgrounds

Where to use it

A nod to the famous pulsar album cover. Rows of lines are stacked from top to bottom, each with sharp peaks concentrated in the middle that ripple over time. Every line fills its area with the background color, so lines in front hide those behind and the stack reads as a landscape of ridges.

Moving the pointer lifts a soft mountain under it that travels with the hand. The line color fades from the first to the second color down the stack, density sets how many rows there are and speed how fast they ripple. Perfect for music and audio products.