Wave Lines

A background component built for Framer. Live preview below — interact with it directly before you buy.

Buy this component — $5 Preview Get All-Access instead

About Wave Lines

WaveLines is a GPU-powered WebGL animation component for Framer. Silky smooth Perlin noise wave lines flow in real time, fully customizable from the property panel — no code or setup needed. Perfect as a hero background, section divider or ambient visual layer on any landing page.

Features

→Real-time WebGL animation driven by Perlin noise
→Two-color gradient blend across horizontal axis
→Adjustable amplitude, speed, line count, width and blur
→Four flow directions: horizontal, vertical and two diagonals
→Smooth mouse interaction — lines subtly react to cursor position
→Vignette effect fades lines toward edges for a polished look
→Reduced-motion support for accessible experiences
→Demo Mode — floating live control panel for presentations
→Static preview in Framer canvas — zero editor lag or GPU waste
→Resolution cap on high-DPI screens for consistent performance
→WebGL failure fallback — soft gradient renders instead of breaking
→Works out of the box — no setup, no configuration needed

Use Cases

→Hero section backgrounds for portfolios and creative agencies
→Immersive headers for SaaS, tech startup and product pages
→Music, audio production and creative studio websites
→Dark-mode editorial, magazine and blog layouts
→Fashion and lifestyle brand landing pages
→Event, conference and festival splash screens
→Architecture and interior design portfolios
→Motion design and animation studio showcases
→Gaming, esports and interactive entertainment sites
→Generative art and digital experience microsites

Best value

Get every component with All-Access — $129

Wave Lines and all 122 others, current and future.

Get All-Access

More Background

Soft Background

Compare Slider Pro X

Aura Cursor