← All effects

Wave Lines

Background Vanilla JS · zero dependencies Kit: Cinematic Dark — soon
-- fps
prefers-reduced-motion detected — waves frozen on one frame

X-ray · layers

the wave strokes themselves
waves flow sideways
every 4th line glows purple

Parameters

Lines28
Amplitude40 px
Speed1.0
Detail1.0
your version · updates as you tinker

How this effect works

Each line is a flat horizontal path bent by two sine waves. For every x position, we add a big slow sine and a smaller faster one — two waves of different frequencies summed together stop looking mathematical and start looking organic, like water or terrain. Each line gets a slightly different phase offset, which is why neighbors flow together but never identically.

The waves also pass through an envelope — a curve that's zero at the edges and full in the middle — so every line stays pinned at both ends and swells in the center, like a plucked string. The accent layer simply paints every 4th line in the brand color at higher opacity: an almost embarrassingly cheap trick that instantly adds rhythm and depth to the whole field.

Production notes: respects prefers-reduced-motion (renders one static frame) · cost scales with line count × canvas width — 30 lines is comfortable everywhere · classic use: section backgrounds, footers, audio/data-themed heroes · the copied snippet is self-contained HTML + JS.