Layered Sine Waves

Live preview — fully interactive

The prompt

Build three layered canvas sine waves.

## Structure
- Full-viewport canvas + centered headline

## Behavior
- Wave A: amp 28, wavelength 280, speed 0.018, baseline 58%, opacity 0.9, stroke 2.2
- Wave B: amp 42, wavelength 360, speed 0.012, baseline 62%, opacity 0.55, stroke 1.6

Full prompt (595 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; color: #f2f2f7; font-family: Inter, system-ui, sans-serif; overflow: hidden; }
  canvas { display: block; }
  .copy { position: fixed; inset: 0; display: flex; align-ite

Complete self-contained HTML unlocks after purchase

About this effect

A calm canvas ocean: three sine waves share a violet-to-cyan stroke, but each has its own amplitude, wavelength, speed, and opacity. Use it behind pricing, waitlists, or any quiet hero.