Liquid Shader — WebGL liquid gradient background effect

Perfect for modern hero sections and immersive layouts.

Each instance generates a unique pattern on load, ensuring your designs always feel fresh and dynamic.

Demo

Features

• Real-time WebGL shader rendering for smooth animations

• Organic fluid motion powered by simplex noise

• Interactive mouse tracking for subtle gradient distortion

• Optional chromatic aberration for visual depth

• Randomised seed for a unique appearance on each load

• Fully responsive and container-aware

• Optimised animation loop using requestAnimationFrame

• Lightweight and performance-focused rendering

Customizations

• Four customizable gradient colours

• Animation speed control

• Noise scale for pattern density

• Distortion intensity adjustment

• Brightness control

• Mouse interaction toggle

• Mouse interaction intensity

• Chromatic aberration toggle

Setup

1. Add Liquid Shader to your Framer canvas.

2. Resize and position it to fit your layout.

3. Customise the four colour stops to match your brand.

4. Adjust the properties.

5. Use it as a background layer with content placed above.

What happens after your purchase?

1. After completing your purchase, you will receive a link to the component.

2. Copy the URL and paste it into your Framer project to import it.