# Wave Text — `wave-text@1.0.0`

A line of bold text that ripples like a flag: every letter rises, tilts and changes colour as a wave passes along it. Loops perfectly.

A line of text that ripples like a flag in the wind. Every letter rides a travelling sine wave: it rises and falls, tilts with the slope of the wave, swells a little on the crest and shifts colour along a gradient as the wave passes. The wave makes a whole number of cycles per loop, so it repeats forever. Type the words, pick a gradient (sunset, ocean, mint or mono), how many waves run through the line per loop, how high they rise and the backdrop colour.

- Kind: text; status: published; digest sha256:93cd4f46bbf1c9194560c5d5c96cae84833aa679ae151e8c31408fb89695d91a
- Role: Text scene (Canvas 2D): a lively, seamless title or sale banner.
- Implementation: canvas2d; entry `src/wave-text.js`
- Files: https://aipixelwizard.com/registry/wave-text/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/wave-text.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/wave-text/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/wave-text/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `apw-runtime@1.0.0` (demo) — Demo harness. The reusable source has no dependencies.

## Exports
- `createWaveText({ text?, gradient?, waves?, amplitude?, weight?, maxWidth?, fontFamily? }) => { draw(ctx, info, width, height) }` — Canvas 2D text layer; info.progress (or time and duration) sets the place in the loop.
- `GRADIENTS: { sunset, ocean, mint, mono }` — Colour gradients along the line.

## Parameters
- `text` (text, default "SUMMER SALE") — Text
- `gradient` (select one of sunset | ocean | mint | mono, default "sunset") — Colours
- `waves` (integer 1–4, default 2) — Waves per loop
- `amplitude` (number 0.2–2, default 1) — Wave height
- `background` (color, default "#1a1530") — Backdrop

## Composition
- Inputs: Canvas 2D context, info.progress (0 to 1 over the loop), width, height.
- Outputs: Draws the text on top of the canvas; does not clear it.
- Coordinates: Centred; the line is scaled to fit 84% of the width; wave height is a fraction of the type size.
- Lighting: A soft drop shadow lifts the letters.
- Timing: Pure function of info.progress (or time and duration).
- Works with: kinetic-title, gradient-background
- Colour follows the letter's position plus a small shift by the wave's height, so the gradient seems to flow.

## Output and loop
- 1080×1080, 30 fps, 6 s, procedural
- Seamless loop: yes — The wave makes a whole number of cycles per loop, so the last frame meets the first.
- Verified 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: Create the text once, then each frame draw your backdrop and call wave.draw(ctx, { progress }, width, height).

Existing project: Copy src/wave-text.js. Call draw on your existing 2D canvas after the rest of the frame.

Reuse ideas:
- Sale banner: Sunset, two waves.
- Calm title: Ocean, gentle.
- Energetic drop: Mint, lively.

## Limitations
- System fonts differ between computers; pass fontFamily and load the font first for identical renders.
- There is no line wrapping.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).