---
title: "Liquid Chrome"
canonical_url: "https://framerhub.io/components/liquid-chrome"
last_updated: "2026-06-15T14:46:30.108Z"
---

## Making Your Site Fluid

Add a touch of mesmerizing interactivity to your Framer projects with Liquid Chrome. This component brings a high-end, shader-based fluid simulation that reacts to user mouse movement, creating a deeply engaging visual experience.

## Features

**Interactive Fluid Simulation**
The surface reacts to mouse movements, creating ripples, swirls, and distortions that feel natural and responsive.

**3 Unique Render Modes**
Choose between Classic Chrome, Fire Colormap, or a Hybrid mode to perfectly match your brand's aesthetic.

**Custom Color Palettes**
Fully customizable base and highlight colors allow you to integrate the effect seamlessly into any design system.

## Use Cases

**Hero Backgrounds** — Create an unforgettable first impression with a full-screen liquid background.

**Interactive Cards** — Use as a background for cards or sections to draw attention to key content.

**Brand Visuals** — precise control over colors and complexity makes it perfect for abstract brand motion graphics.

![Liquid Chrome Preview](/framerhub/img/components/control/liquid-chrome.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Liquid Chrome in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

Customize the look and feel through the property controls right in Framer.

**Appearance**

- **Render Mode**: Switch between Chrome, Fire, and Hybrid.
- **Base & Highlight Colors**: Define the core look of your fluid.
- **Color Shift**: Adjust the iridescent oil-slick intensity.

**Fluid Settings**

- **Flow Speed**: Control how fast the detailed noise moves.
- **Distortion Scale**: Zoom in or out of the fluid pattern.
- **Complexity**: Adjust the detail level of the simulation.

**Mouse Interaction**

- **Effect Intensity**: How strongly the mouse affects the fluid.
- **Effect Radius**: The size of the interaction area.

### Quick Tips

**Best Performance** — Keep the complexity moderate on mobile devices to ensure 60fps performance.

**Layering** — Place text or other content on top of the liquid layer with good contrast for a striking effect.

**Subtle Motion** — Use lower speed settings for a calm, premium feel, or crank it up for high-energy visuals.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Liquid Chrome offers that "awwwards" look with zero coding required. It's performant, beautiful, and endlessly customizable, giving you the power of WebGL shaders in a simple drag-and-drop package.

---