Liquid React UI

A beautiful, high-performance React component library featuring fluid glass morphism effects with animated liquid distortions. Perfect for creating modern.

✨ Features

• 🎨 Fluid Glass Morphism - Beautiful glass-like appearance with backdrop blur
• 🌊 Animated Liquid Distortion - Smooth, organic wave animations using SVG filters
• 🎭 Chromatic Aberration - Realistic light refraction effects
• 🖱️ Interactive Animations - Hover and click animations with smooth transitions
• ⚡ High Performance - Hardware-accelerated for smooth 60fps animations
• 🎯 Fully Customizable - Extensive props for styling and behavior control
• 📱 Event Support - Full support for mouse, touch, pointer, keyboard, and drag events
• 🎪 TypeScript - Built with TypeScript for type safety

📦 Installation

npm install liquid-react-ui

or

yarn add liquid-react-ui

or

pnpm add liquid-react-ui

🚀 Quick Start

import { LiquidGlass } from 'liquid-react-ui';

function App() {
  return (
    <LiquidGlass onClick={() => console.log('Clicked!')}>
      <span>Hover Me</span>
    </LiquidGlass>
  );
}

📖 Basic Usage

Simple Button

import { LiquidGlass } from 'liquid-react-ui';

function MyButton() {
  return (
    <LiquidGlass 
      onClick={() => alert('Button clicked!')}
      containerStyle={{ padding: '20px 40px' }}
    >
      <span style={{ fontSize: '18px', fontWeight: 'bold' }}>
        Click Me
      </span>
    </LiquidGlass>
  );
}

Custom Styling

import { LiquidGlass } from 'liquid-react-ui';

function CustomGlass() {
  return (
    <LiquidGlass
      containerStyle={{
        width: '300px',
        height: '100px',
        borderRadius: '50px',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      }}
      glassStyle={{
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
      }}
      intensity={20}
      chromaticStrength={5}
    >
      <div style={{ textAlign: 'center', color: 'white' }}>
        <h2>Custom Glass</h2>
        <p>Beautiful liquid effect</p>
      </div>
    </LiquidGlass>
  );
}

Disable Animations

import { LiquidGlass } from 'liquid-react-ui';

function StaticGlass() {
  return (
    <LiquidGlass
      MouseEnterAnimation={false}
      MouseClickAnimation={false}
      containerStyle={{ padding: '16px 32px' }}
    >
      <span>Static Glass Effect</span>
    </LiquidGlass>
  );
}

🎛️ Props

Core Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | required | Content to display inside the glass component | | containerStyle | React.CSSProperties | {} | Custom styles for the container div | | glassStyle | React.CSSProperties | {} | Custom styles for the glass layer | | intensity | number | 15 | Distortion intensity (higher = more distortion) | | chromaticStrength | number | 3 | Chromatic aberration strength | | className | string | '' | Additional CSS class name | | ref | React.RefObject<HTMLDivElement> | - | Ref to the container element |

Animation Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | MouseEnterAnimation | boolean | true | Enable/disable hover scale animation | | MouseClickAnimation | boolean | true | Enable/disable click press animation |

Event Handlers

The component supports all standard React event handlers:

• Mouse Events: onClick, onDoubleClick, onMouseEnter, onMouseLeave, onMouseMove, onMouseDown, onMouseUp, onWheel
• Pointer Events: onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onPointerMove, onPointerCancel, onPointerOver, onPointerOut
• Touch Events: onTouchStart, onTouchMove, onTouchEnd, onTouchCancel
• Keyboard Events: onKeyDown, onKeyPress, onKeyUp
• Focus Events: onFocus, onBlur
• Drag Events: onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, onDrop
• Clipboard Events: onCopy, onCut, onPaste
• Composition Events: onCompositionStart, onCompositionUpdate, onCompositionEnd
• Form Events: onChange, onInput, onInvalid, onSubmit
• Animation Events: onAnimationStart, onAnimationEnd, onAnimationIteration
• Transition Events: onTransitionEnd

🎨 Examples

Card Component

import { LiquidGlass } from 'liquid-react-ui';

function GlassCard() {
  return (
    <LiquidGlass
      containerStyle={{
        width: '400px',
        padding: '30px',
        borderRadius: '20px',
      }}
      intensity={10}
    >
      <div>
        <h2 style={{ margin: '0 0 10px 0' }}>Glass Card</h2>
        <p style={{ margin: 0, opacity: 0.8 }}>
          This is a beautiful glass morphism card with liquid effects.
        </p>
      </div>
    </LiquidGlass>
  );
}

Navigation Button

import { LiquidGlass } from 'liquid-react-ui';

function NavButton({ label, onClick }) {
  return (
    <LiquidGlass
      onClick={onClick}
      containerStyle={{
        padding: '12px 24px',
        borderRadius: '12px',
        margin: '0 8px',
      }}
      intensity={12}
    >
      <span style={{ fontSize: '16px', fontWeight: 500 }}>{label}</span>
    </LiquidGlass>
  );
}

Icon Button

import { LiquidGlass } from 'liquid-react-ui';

function IconButton({ icon, onClick }) {
  return (
    <LiquidGlass
      onClick={onClick}
      containerStyle={{
        width: '50px',
        height: '50px',
        padding: 0,
        borderRadius: '50%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      intensity={8}
    >
      {icon}
    </LiquidGlass>
  );
}

With Background Image

import { LiquidGlass } from 'liquid-react-ui';

function GlassOverImage() {
  return (
    <div
      style={{
        width: '100%',
        height: '100vh',
        backgroundImage: 'url(https://example.com/image.jpg)',
        backgroundSize: 'cover',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <LiquidGlass
        containerStyle={{
          padding: '40px 60px',
          borderRadius: '30px',
        }}
        intensity={20}
        chromaticStrength={5}
      >
        <h1 style={{ color: 'white', margin: 0 }}>
          Glass Over Image
        </h1>
      </LiquidGlass>
    </div>
  );
}

🎯 Advanced Usage

Custom Ref Access

import { useRef } from 'react';
import { LiquidGlass } from 'liquid-react-ui';

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

  const handleClick = () => {
    if (glassRef.current) {
      console.log('Glass element:', glassRef.current);
    }
  };

  return (
    <LiquidGlass ref={glassRef} onClick={handleClick}>
      <span>Click to log ref</span>
    </LiquidGlass>
  );
}

Event Handling

import { LiquidGlass } from 'liquid-react-ui';

function EventExample() {
  return (
    <LiquidGlass
      onMouseEnter={() => console.log('Mouse entered')}
      onMouseLeave={() => console.log('Mouse left')}
      onMouseDown={() => console.log('Mouse down')}
      onMouseUp={() => console.log('Mouse up')}
      onClick={() => console.log('Clicked')}
      onTouchStart={() => console.log('Touch started')}
    >
      <span>Interact with me</span>
    </LiquidGlass>
  );
}

🎨 Styling Tips

Default Styles

The component has these default styles:

• borderRadius: '24px' - Rounded corners
• padding: '16px 32px' - Default padding
• cursor: 'pointer' - Pointer cursor
• display: 'inline-flex' - Inline flex display

Override Defaults

<LiquidGlass
  containerStyle={{
    borderRadius: '50px', // Pill shape
    padding: '20px 50px',
    width: '200px',
    height: '60px',
  }}
  glassStyle={{
    backgroundColor: 'rgba(255, 255, 255, 0.05)', // More transparent
    border: '2px solid rgba(255, 255, 255, 0.2)', // Thicker border
  }}
>
  Custom Styled
</LiquidGlass>

🔧 Performance

The component uses:

• SVG Filters - Hardware-accelerated for smooth performance
• requestAnimationFrame - Optimized animation loop
• CSS Transitions - Smooth state changes
• Unique Filter IDs - Prevents conflicts with multiple instances

🌐 Browser Support

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

Note: Requires support for:

• CSS backdrop-filter
• SVG filters
• requestAnimationFrame

📝 License

MIT © Faris Ahammed Ali

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📧 Support

For support, please open an issue on the GitHub repository.

Made with ❤️ by Faris Ahammed Ali