Get started

Install once. Ship motion fast.

Installation

NPM

npm install @sebastienrousseau/sine-wave-generator

CDN (unpkg)

<script src="https://unpkg.com/@sebastienrousseau/sine-wave-generator"></script>

CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/@sebastienrousseau/sine-wave-generator"></script>

Quick Start

Browser (script tag)

<canvas id="sine"></canvas>
<script src="https://unpkg.com/@sebastienrousseau/sine-wave-generator"></script>
<script>
  const generator = new SineWaveGenerator({
    el: "#sine",
    waves: [{ amplitude: 26, wavelength: 120, speed: 0.8 }]
  });
  generator.start();
</script>

CommonJS / ESM

const { SineWaveGenerator } = require(
  "@sebastienrousseau/sine-wave-generator"
);

const generator = new SineWaveGenerator({
  el: document.getElementById("sine"),
  maxPixelRatio: 2,
  waves: [{ amplitude: 26, wavelength: 120, speed: 0.8 }]
});

generator.start();

React

import { useSineWaveGenerator } from
  "@sebastienrousseau/sine-wave-generator/use-sine-wave-generator";

const Wave = () => {
  const { canvasRef } = useSineWaveGenerator({
    waves: [{ amplitude: 26, wavelength: 120, speed: 0.8 }],
  });
  return <canvas ref={canvasRef} />;
};

See it running live →

TypeScript

Types are bundled with the package. Import the interfaces directly:

import { SineWaveGenerator, Wave, Ease } from "@sebastienrousseau/sine-wave-generator";

const gen = new SineWaveGenerator({
  el: "#canvas",
  waves: [{ amplitude: 30, wavelength: 140, speed: 0.8 }],
});

gen.start();

The package exports SineWaveGenerator, Wave, and Ease with full JSDoc annotations for editor autocompletion.

Minimal reproduction

One self-contained file — no build step, no bundler. Paste it into a sandbox or a bug report and it just works.

<!doctype html>
<html>
  <body>
    <canvas id="sine" style="width: 100%; height: 300px"></canvas>
    <script src="https://unpkg.com/@sebastienrousseau/sine-wave-generator"></script>
    <script>
      const generator = new SineWaveGenerator({
        el: "#sine",
        autoResize: true,
        waves: [{ amplitude: 26, wavelength: 120, speed: 0.8 }],
      });
      generator.start();
    </script>
  </body>
</html>

Common patterns

Production‑ready by default.

Hero background

Full-bleed canvas with layered waves and low opacity.

const gen = new SineWaveGenerator({
  el: "#hero",
  autoResize: true,
  waves: [
    { amplitude: 16, wavelength: 220, speed: 0.6 },
    { amplitude: 10, wavelength: 160, speed: 0.4 }
  ]
});

gen.start();

Responsive container

autoResize (on by default) already watches the canvas element itself, not just the window — no manual ResizeObserver needed.

const gen = new SineWaveGenerator({ el: canvas, autoResize: true });

gen.start();

Pointer interaction

Bind to pointer move for responsive phase shifts.

canvas.addEventListener("pointermove", (event) => {
  const y = event.clientY / canvas.clientHeight;
  gen.waves.forEach((wave) => {
    wave.phase = y * Math.PI * 2;
  });
});