← All effects
Wave Lines
-- 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.