Wave Background is a high-performance, interactive canvas component designed to create visually rich, fluid wave animations using WebGL shaders. It generates layered sine-based wave patterns that blend seamlessly into dynamic gradients, producing a soft, organic motion that feels both modern and immersive.

The component includes 21 carefully crafted color palettes, each offering a unique visual mood. Users can switch palettes instantly using built-in controls, making it easy to explore different styles without modifying code.

Mouse interaction enhances the experience by subtly influencing wave distortion and color blending in real time. An optional halo effect adds depth and focus around the cursor, creating a more engaging and responsive feel.

With adjustable speed, intensity, and UI controls, the component is highly flexible and adapts smoothly to any layout, from hero sections to full-screen experiences.

Key Features

• 21 pre-designed color palettes for diverse styles

• Real-time animated wave system using WebGL shaders

• Multi-layered wave patterns for smooth depth and motion

• Interactive mouse tracking with optional halo effect

• Adjustable animation speed for different motion styles

• Configurable wave intensity to control visual complexity

• Built-in palette switcher with clean UI

• Toggleable interaction hints for usability

• Fully responsive canvas rendering

• Optimized for smooth performance

• Seamless integration with Framer

Best For

• Hero sections with dynamic backgrounds

• Modern landing pages

• SaaS and startup websites

• Creative portfolios

• Product showcase pages

• Interactive UI designs

• Framer components and templates