The shader renders to an HTML canvas using requestAnimationFrame for smooth 60fps animation. Bands flow across the screen with wave-like motion, each colored from a gradient palette that can be customized via props.

Configurable properties include band count, spacing, thickness, wave amplitude, and animation speed. The canvas handles device pixel ratio for crisp rendering on high-DPI displays. A ResizeObserver keeps the canvas sized correctly.

The component pauses animation when the browser tab is hidden (using visibility change event) and resumes when visible. This saves resources when users switch tabs.

Works well as a hero section background, landing page hero, or anywhere you need a dynamic, colorful background that adds visual interest without distracting from content.