Luminous Waves
Canvas-based glowing sine wave threads running horizontally and bending dynamically to track cursor position.
Component Showcase
Luminous Waves
Canvas-based glowing sine wave threads running horizontally and bending dynamically to track cursor position.
CanvasGlowSine Wave
Interactive Playground
Adjust sliders and values to preview changes in real-time
waveCount
Number of horizontal wave threads.
amplitude
Peak vertical displacement amplitude.
frequency
Wave cycle horizontal frequency spacing.
waveColor
Neon hex color of the glowing waves.
secondaryColor
Secondary color to blend into for iridescent waves.
speed
Velocity of horizontal wave flow.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| waveCount | number | 5 | Number of horizontal wave threads. |
| amplitude | number | 38 | Peak vertical displacement amplitude. |
| frequency | number | 0.006 | Wave cycle horizontal frequency spacing. |
| waveColor | string | "#7fff5e" | Neon hex color of the glowing waves. |
| secondaryColor | string | "#ff5c71" | Secondary color to blend into for iridescent waves. |
| speed | number | 0.5 | Velocity of horizontal wave flow. |