Sine Wave Animation

About Sine Wave Animation

Sine Wave Animation draws up to five flowing wave lines with a soft light pulse traveling along each one. Drop it behind a hero or landing page section for calm, premium motion with no video, Lottie, or image files. It is one lightweight SVG component, and every style is controlled from the properties panel.

Key Features

- Up to 5 waves, each with its own color, speed, peaks, amplitude, and height

- Wave settings grouped into collapsible sections, so the panel stays tidy

- Designed default pattern, with a custom mode and one-click reset

- Glow size, glow edge color, line color, opacity, and width controls

- Glow Quality: High, or Light for a faster option on mobile

- Fill or Fit modes to control cropping at any size

- Accepts Framer color tokens

Benefits

- Adds depth to hero sections without heavy video files

- Seamless 60 second loop that does not feel repetitive

- Pauses when offscreen to save resources

- Shows a still frame when reduced motion is turned on

- Resolution independent, so lines and glows stay sharp on any display

- Works on dark and light backgrounds