---
title: "Liquid Shader — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Aviral Lakhanpaul · Backgrounds. Liquid Shader to your Framer canvas."
canonical: "https://framer.elliotli.dev/component/liquid-shader"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Liquid Shader

# Liquid Shader

Unique pattern on every load

[View on Framer](https://framer.com/marketplace/components/liquid-shader/?via=elliot-li)

![Liquid Shader preview image 1](https://framer.elliotli.dev/og/component/liquid-shader/bb9b0176f3dd561c/1600x1200.jpg)

## Summary

Liquid Shader to your Framer canvas.

## Description

### 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

Liquid Shader Component Preview

## 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.
    

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fla27f0w-HyaCxyj9guCwPCoENfO62RFJvM570h)](https://polar.sh)[](https://polar.sh)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8883

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $5.00
- **Published**: 2026-02-12
- **Updated**: 2026-08-19
- **Added**: 2026-02-04
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background