Future UI

Liquid Chrome

◆ Backgrounds

WebGL2 metallic fluid surface with Fresnel reflections and mouse-driven ripples.

backgroundwebglshaderchromemetallicliquidreflectioninteractivemouse

No preview available

WebGL2 Shader ~ Move cursor to create ripples

Controls

View Demo
Demo Hero Content
#a8a8a8
#4fc3f7
0.4
1
1

Backgrounds / React Component

About Liquid Chrome

WebGL2 metallic fluid surface with Fresnel reflections and mouse-driven ripples.

Category Backgrounds
Framework React + TypeScript
Tags background, webgl, shader, chrome, metallic, liquid, reflection, interactive, mouse

Install Liquid Chrome in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/liquid-chrome.json?key=YOUR_LICENSE_KEY"

Usage example

import { LiquidChrome } from './LiquidChrome';

export default function Example() {
  return (
    <div style={{ width: '100%', height: 400, position: 'relative' }}>
      <LiquidChrome accentColor="#a8a8a8" secondaryColor="#4fc3f7" />
    </div>
  );
}