React Liquid Glass

A beautiful, customizable React component that creates a stunning liquid glass morphism effect with interactive border animations, click wave effects, and advanced SVG filter controls.

🚀 Live Demo

Check out the interactive demo: https://react-liquid-glass-d8bnwi6y1-khvichas-projects-e9559ed3.vercel.app/

Features

✨ Interactive Effects

• 🖱️ Border light animation that follows your cursor
• 🔄 Mirror effect with dual lights on opposite sides
• 💫 Click wave ripple effect
• 🎯 Smooth parallax movement

🎨 Highly Customizable

• Adjustable blur, tint, and border styles
• Customizable shadows with full control
• Advanced SVG filter properties for liquid distortion
• Enable/disable animations independently

⚡ Performance

• Lightweight and optimized
• Smooth 60fps animations
• CSS-based effects for better performance

Installation

npm install @khvicha/react-liquid-glass

or

yarn add @khvicha/react-liquid-glass

or

pnpm add @khvicha/react-liquid-glass

Quick Start

import { LiquidGlass } from '@khvicha/react-liquid-glass';

function App() {
  return (
    <LiquidGlass
      blur={20}
      tint="rgba(255, 255, 255, 0.2)"
      onClick={() => console.log('Clicked!')}
    >
      <h1>Hello, Liquid Glass!</h1>
    </LiquidGlass>
  );
}

Basic Usage

Simple Glass Effect

import { LiquidGlass } from '@khvicha/react-liquid-glass';

function MyComponent() {
  return (
    <LiquidGlass>
      <p>Your content here</p>
    </LiquidGlass>
  );
}

With Click Handler

<LiquidGlass
  onClick={() => alert('Button clicked!')}
  enableClickAnimation={true}
>
  <button>Click Me</button>
</LiquidGlass>

Custom Styling

<LiquidGlass
  blur={25}
  tint="rgba(100, 150, 255, 0.15)"
  borderColor="rgba(100, 150, 255, 0.5)"
  borderWidth={2}
  borderRadius="20px"
  shadowColor="rgba(0, 0, 0, 0.2)"
  shadowBlur={10}
  shadowOffsetY={8}
>
  <div>Custom styled glass</div>
</LiquidGlass>

Props Reference

Visual Properties

| Prop | Type | Default | Description | |------|------|---------|-------------| | blur | number | 18 | Backdrop blur intensity in pixels | | tint | string | "rgba(255, 255, 255, 0.18)" | Overlay tint color (RGBA, HSLA, or hex) | | borderColor | string | "rgba(255, 255, 255, 0.35)" | Border color | | borderWidth | number | 1 | Border width in pixels | | borderRadius | number \| string | "12px" | Border radius (pixels or CSS value) | | shadowColor | string | "rgba(0, 0, 0, 0.12)" | Shadow color | | shadowBlur | number | 6 | Shadow blur radius in pixels | | shadowSpread | number | -1 | Shadow spread radius in pixels | | shadowOffsetX | number | 0 | Horizontal shadow offset in pixels | | shadowOffsetY | number | 4 | Vertical shadow offset in pixels |

Animation Properties

| Prop | Type | Default | Description | |------|------|---------|-------------| | enableBorderAnimation | boolean | true | Enable/disable border light animation | | enableClickAnimation | boolean | true | Enable/disable click wave effect | | parallaxMovement | number | 1 | Parallax movement intensity (0 = disabled) |

SVG Filter Properties (Liquid Effect)

| Prop | Type | Default | Description | |------|------|---------|-------------| | turbulenceFrequency | number | 0.01 | Distortion pattern frequency (lower = larger patterns) | | turbulenceOctaves | number | 1 | Number of noise octaves (complexity) | | blurStdDeviation | number | 3 | Blur standard deviation for distortion smoothing | | displacementScale | number | 150 | Distortion intensity (higher = more distortion) | | surfaceScale | number | 5 | 3D surface height for lighting effect |

Event Handlers

| Prop | Type | Description | |------|------|-------------| | onClick | (e: React.MouseEvent<HTMLDivElement>) => void | Click handler (also enables button behavior) |

Standard HTML Attributes

All standard HTMLDivElement attributes are supported (e.g., className, style, id, etc.).

Examples

Disable Border Animation

<LiquidGlass enableBorderAnimation={false}>
  Static glass effect
</LiquidGlass>

Custom Liquid Distortion

<LiquidGlass
  turbulenceFrequency={0.02}
  displacementScale={200}
  surfaceScale={8}
>
  More intense liquid effect
</LiquidGlass>

Button with Wave Effect

<LiquidGlass
  onClick={() => handleAction()}
  enableClickAnimation={true}
  borderRadius="8px"
>
  <span>Submit</span>
</LiquidGlass>

Full Customization

<LiquidGlass
  blur={25}
  tint="rgba(138, 43, 226, 0.2)"
  borderColor="rgba(138, 43, 226, 0.6)"
  borderWidth={2}
  borderRadius="16px"
  shadowColor="rgba(138, 43, 226, 0.3)"
  shadowBlur={15}
  shadowSpread={0}
  shadowOffsetX={0}
  shadowOffsetY={8}
  enableBorderAnimation={true}
  enableClickAnimation={true}
  parallaxMovement={2}
  turbulenceFrequency={0.015}
  displacementScale={180}
  surfaceScale={6}
  onClick={() => console.log('Custom glass clicked')}
  className="my-custom-glass"
>
  <div>
    <h2>Fully Customized</h2>
    <p>Liquid glass with all options</p>
  </div>
</LiquidGlass>

Advanced Usage

Using with Ref

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

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

  return (
    <LiquidGlass ref={glassRef}>
      Content
    </LiquidGlass>
  );
}

Combining with Custom Styles

<LiquidGlass
  style={{
    width: '400px',
    height: '300px',
    padding: '2rem',
  }}
  blur={20}
>
  <div style={{ color: 'white' }}>
    Custom styled content
  </div>
</LiquidGlass>

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

Note: Requires CSS backdrop-filter support for the blur effect. Older browsers will show the effect without blur.

TypeScript

Full TypeScript support is included. The component exports the LiquidGlassProps type:

import { LiquidGlass, LiquidGlassProps } from '@khvicha/react-liquid-glass';

const props: LiquidGlassProps = {
  blur: 20,
  tint: 'rgba(255, 255, 255, 0.2)',
};

Performance Tips

1. Disable animations when not needed: Set enableBorderAnimation={false} if you don't need the border effect
2. Adjust SVG filter properties: Lower values for turbulenceFrequency and displacementScale can improve performance
3. Use CSS containment: Add contain: layout style paint to parent containers for better performance

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC

Author

Parsa-29

Made with ❤️ using React and TypeScript