LiquidGlass
Interactive Demo

Try Liquid Glass Effects

Experience next-generation liquid glass effects powered by React 19. Real-time parameter adjustment with optimized performance.

Effect Parameters

Real-time liquid glass property adjustment

Controls movement intensity and visual distortion effects

Controls the base blur/frosting level

Controls color saturation of the glass effect

Controls chromatic aberration and color separation effects

Controls movement responsiveness and deformation intensity

Border radius in pixels

Refraction mode multiplies all effect intensities

Background Image

Enter a direct image URL to use as background

Live Preview
All Parameters Active

Move your mouse over the preview area to see all parameters affect the liquid glass effect in real-time

Liquid Glass Card

Interactive glass morphism effect powered by React 19 with all parameters active.

Move mouse to see all effects

All Parameters Active
Displacement: 64 | Elasticity: 0.35
Mode: standard | Aberration: 2
Pure liquid glass card - no background layers, seamless transparency

Generated React 19 Code

Copy this optimized React 19 code to implement the current configuration in your project

import { useRef } from 'react';
import { LiquidGlass } from '@/components/liquid-glass/liquid-glass-component';

function MyComponent() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div 
      ref={containerRef} 
      className="w-full h-screen bg-cover bg-center" 
      style={{ backgroundImage: 'url(https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&w=1200)' }}
    >
      <LiquidGlass
        mouseContainer={containerRef}
        displacementScale={64}
        blurAmount={0.1}
        saturation={130}
        aberrationIntensity={2}
        elasticity={0.35}
        cornerRadius={100}
        overLight={false}
        mode="standard"
        style={{ 
          position: 'absolute', 
          top: '50%', 
          left: '50%', 
          transform: 'translate(-50%, -50%)' 
        }}
      >
        <div className="p-6 bg-white/10 backdrop-blur-sm rounded-lg">
          <h3 className="text-white font-semibold mb-2">Liquid Glass Effect</h3>
          <p className="text-white/80">Interactive glass morphism with React 19</p>
        </div>
      </LiquidGlass>
    </div>
  );
}

Interactive Demo Features

Advanced physics-based interactions with realistic glass effects

Real-time Controls

Adjust parameters and see instant visual feedback

Interactive Effects

Mouse interactions create dynamic visual responses

Code Generation

Export your settings as production-ready React code

Custom Backgrounds

Test effects with your own images and backgrounds