Wave Gradient

Add dynamic liquid motion, flowing silk folds, and interactive shader depth to hero sections, modern landing pages, and web apps with real-time WebGL rendering.

Features

• Real-time WebGL liquid wave physics

• Shader-powered multi-point color gradient blending

• Directional wave folding and customizable spiral twirl

• Curated color palettes plus complete custom color support

• Automatic frame-budgeted GPU resolution scaling

• Built-in film grain filter to eliminate color banding

• Battery-saving viewport and visibility throttling

• Native accessibility support with reduced-motion detection

• Non-blocking fallback rendering for unsupported browsers

• Zero external asset or image texture dependencies

Customization Options

• Animation speed

• Wave direction angle

• Wave bend height

• Twirl spiral intensity

• Motion phase offset

• Curated color presets (Ocean, Orchid, Ice, Aurora, Showreel)

• Custom color array or hex palette inputs

• Overall shader scale

• Edge softness blur

• Film grain overlay intensity

• Corner radius

• GPU quality mode (Auto, High, Economy)

• Live preview toggle

How to Use

• Drop the Wave Gradient component onto your Framer canvas

• Set width and height to 100% or pin across your section

• Select a curated color preset or input custom brand hex codes

• Tune wave scale, twist strength, and direction angle

• Set performance quality to Auto for instant mobile optimization

• Publish your site for high-frame-rate fluid liquid visuals

Use Cases

• Premium SaaS hero sections

• AI startup landing pages

• Fintech background panels

• Modern design portfolio headers

• Interactive card and banner backgrounds

• Mobile app product launch sites

• Conference and event teasers

• Waitlist landing pages

• Ambient dark-mode section backdrops

• Product feature highlight blocks