Build Animated Line Waves in React
Create a hypnotic animated line wave background using canvas and sine curves that flow in real time.
Static backgrounds feel static. Softly undulating lines of color feel alive. This component draws sine curves on a canvas and animates them frame by frame.
The final result
Adjust the number of lines, amplitude, and color to see how different configurations feel:
Setting up
No external dependencies. Just canvas and requestAnimationFrame.
import { useRef, useEffect } from 'react';Step 1: Canvas setup with retina support
The canvas needs to respect device pixel ratio so lines stay sharp on retina screens.
Step 2: The sine wave drawing loop
Each line is positioned at an even vertical spacing. The sine function offsets each point, and each line gets a different phase so they oscillate out of sync.
Try different line counts and amplitudes:
Step 3: Animation loop
The offset advances each frame, creating continuous horizontal motion. Keep speed low (0.01 to 0.03) for a calm feel behind content.
Step 4: Put it together
Drop it inside any positioned container:
Key takeaways
- The devicePixelRatio scale call is essential for crisp lines on high-DPI screens.
- Varying the phase offset per line makes the waves look organic.
- Keeping speed low keeps the motion calm and readable behind content.