Quidlass - Liquid Glassmorphism React Component

Quidlass is a beautiful, lightweight React component library for creating stunning liquid glassmorphism effects. Perfect for modern React applications, it provides customizable glass-like surfaces with liquid distortion effects, interactive animations, and zero dependencies.

🚀 Quick Links

• 📖 Documentation: https://programmerlapar.github.io/quidlass/
• 🎨 Live Demo: https://programmerlapar.github.io/quidlass/demo/
• 📦 npm Package: quidlass on npm
• 💻 GitHub Repository: https://github.com/programmerlapar/quidlass

What is Liquid Glassmorphism?

Liquid glassmorphism combines the popular glassmorphism design trend with dynamic liquid distortion effects. It creates a frosted glass appearance with animated, morphing edges that respond to user interactions - perfect for cards, modals, buttons, tooltips, and modern UI components.

Features

• 🎨 Liquid Glassmorphism Effect - Beautiful glass-like surfaces with liquid distortion
• 🎛️ Highly Customizable - 30+ props to fine-tune the appearance and behavior
• 🚀 Performance Optimized - Uses canvas and SVG filters for efficient rendering
• 📦 Zero Dependencies - No external dependencies besides React
• 🎯 TypeScript Support - Full TypeScript definitions included
• 📱 Responsive - Automatically adapts to container size changes
• 🎭 Interactive Effects - Elasticity, press states, scroll adaptation, and morphic transitions
• ✨ Advanced Features - Inner glow, shining borders, tint colors, and custom swirl effects

Installation

Install Quidlass via npm, yarn, or pnpm:

npm install quidlass
# or
yarn add quidlass
# or
pnpm add quidlass

Search terms: If you're looking for "liquid glass react", "glassmorphism react component", "react glass effect", "liquid glassmorphism npm", or "react glassmorphism library" - you've found it! Quidlass is the perfect solution for adding beautiful glass effects to your React applications.

Requirements

• React >= 18.0.0
• React DOM >= 18.0.0

Usage

import { LiquidGlass } from 'quidlass';

function App() {
  return (
    <LiquidGlass borderRadius={20} blur={10}>
      <div>Your content here</div>
    </LiquidGlass>
  );
}

TypeScript

TypeScript definitions are included. You can import the props type:

import { LiquidGlass, type LiquidGlassProps } from 'quidlass';

const props: LiquidGlassProps = {
  borderRadius: 20,
  blur: 10,
};

Props

Prop	Type	Default	Description
borderRadius	number	20	Border radius in pixels
blur	number	0.25	Blur amount in pixels
contrast	number	1.2	Contrast multiplier
brightness	number	1.05	Brightness multiplier
saturation	number	1.1	Saturation multiplier
shadowIntensity	number	0.25	Shadow opacity
swirlIntensity	number	8	Swirl intensity for vortex effect
swirlScale	number	1.0	Swirl scale controls size/zoom
swirlRadius	number	1.0	Swirl radius controls extent
edgeThicknessPx	number	12	Edge thickness in pixels
swirlOffset	number	0.0	Swirl offset: 0.0 = no gap (edges), 1.0 = max gap (center). Controls gap between component edges and swirl effect band
swirlEdges	`'all' �	'top-left' �	'top-right' �
zIndex	number	9999	Z-index for layering
textShadow	boolean | string	false	Text shadow for content
textColor	string	undefined	Text color for content (inherits from parent if not specified)
tintColor	string	undefined	Tint overlay color (any CSS color)
shiningBorder	boolean	false	Enable shining border effect
shiningIntensity	number	0.8	Intensity of shining effect (0-1)
elasticity	number	0.15	Elasticity factor for mouse interaction (stretching/translation)
globalMousePos	{ x: number; y: number }	undefined	External global mouse position for elasticity
mouseOffset	{ x: number; y: number }	undefined	Mouse offset relative to component center (percentage)
mouseContainer	RefObject<HTMLElement>	undefined	Container ref for mouse tracking
elasticityActivationZone	number	200	Activation zone in pixels from edges for elasticity
enablePressState	boolean	false	Enable press state tracking for tactile feedback
enableScrollAdaptation	boolean	false	Enable scroll-based adaptive properties (blur, saturation, opacity)
scrollContainer	string | RefObject<HTMLElement>	undefined	Scroll container selector or ref for scroll adaptation
enableInnerGlow	boolean	false	Enable interactive inner glow effect at touch/mouse point
enableMorphicTransitions	boolean	false	Enable morphic transitions (expand/collapse)
isExpanded	boolean	false	Expanded state for morphic transitions
expandedWidth	number | string	400	Expanded width in pixels (used when isExpanded is true)
expandedHeight	number | string	320	Expanded height in pixels (used when isExpanded is true)
collapsedWidth	number | string	undefined	Collapsed width in pixels (uses container width if undefined)
collapsedHeight	number | string	undefined	Collapsed height in pixels (uses container height if undefined)
onPressStateChange	(isPressed: boolean) => void	undefined	Callback fired when press state changes
onClick	(event: MouseEvent) => void	undefined	Callback fired when component is clicked
className	string	''	Additional CSS classes
style	CSSProperties	{}	Additional inline styles
children	ReactNode	-	Content to render inside

Demo

Check out the interactive demo with 6 different use cases (Button, Floating Button, Card, Tooltip, Popup, Modal) and real-time prop controls.

• Live demo: https://programmerlapar.github.io/quidlass/demo
• Source: see the demo folder in this repo

Examples

Card Component

<LiquidGlass borderRadius={16} blur={8} className="p-6">
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</LiquidGlass>

Button

<LiquidGlass borderRadius={12} blur={4} className="px-6 py-3">
  <button>Click Me</button>
</LiquidGlass>

Modal

<LiquidGlass 
  borderRadius={24} 
  blur={12} 
  shiningBorder={true}
  className="p-8"
>
  <div>Modal content</div>
</LiquidGlass>

Floating Button

<LiquidGlass borderRadius={50} blur={8} className="w-16 h-16">
  <button style={{ width: '100%', height: '100%', border: 'none', background: 'transparent' }}>
    +
  </button>
</LiquidGlass>

Tooltip

<div style={{ position: 'relative' }}>
  <button>Hover me</button>
  <LiquidGlass 
    borderRadius={8} 
    blur={6}
    className="absolute top-full mt-2 p-2"
    style={{ width: '200px' }}
  >
    <p>This is a tooltip</p>
  </LiquidGlass>
</div>

Popup with Tint Color

<LiquidGlass 
  borderRadius={16} 
  blur={10}
  tintColor="rgba(34, 197, 94, 0.15)"
  className="p-6"
>
  <div>Popup content with green tint</div>
</LiquidGlass>

Custom Swirl Edges

<LiquidGlass 
  borderRadius={20} 
  blur={8}
  swirlEdges={['top-left', 'bottom-right']}
>
  <div>Swirl effect only on top-left and bottom-right corners</div>
</LiquidGlass>

Swirl Offset (Gap Control)

<LiquidGlass 
  borderRadius={20} 
  blur={8}
  swirlOffset={0.3}
>
  <div>Swirl effect with gap from edges (30% of distance to center)</div>
</LiquidGlass>

Interactive Elasticity Effect

<LiquidGlass 
  borderRadius={20} 
  blur={10}
  elasticity={0.2}
  elasticityActivationZone={150}
>
  <div>Component responds to mouse position with elastic stretching</div>
</LiquidGlass>

Scroll-Based Adaptation

<LiquidGlass 
  borderRadius={20} 
  blur={10}
  enableScrollAdaptation={true}
  scrollContainer="#scrollable-container"
>
  <div>Blur, saturation, and opacity adapt based on scroll position</div>
</LiquidGlass>

Press State Interaction

<LiquidGlass 
  borderRadius={20} 
  blur={10}
  enablePressState={true}
  onPressStateChange={(isPressed) => console.log('Pressed:', isPressed)}
>
  <button>Press me for tactile feedback</button>
</LiquidGlass>

Morphic Transitions (Expand/Collapse)

const [isExpanded, setIsExpanded] = useState(false);

<LiquidGlass 
  borderRadius={20} 
  blur={10}
  enableMorphicTransitions={true}
  isExpanded={isExpanded}
  expandedWidth={400}
  expandedHeight={320}
  collapsedWidth={280}
  collapsedHeight={80}
  onClick={() => setIsExpanded(!isExpanded)}
>
  <div>{isExpanded ? 'Expanded content' : 'Collapsed content'}</div>
</LiquidGlass>

Inner Glow Effect

<LiquidGlass 
  borderRadius={20} 
  blur={10}
  enableInnerGlow={true}
>
  <div>Interactive glow follows mouse/touch position</div>
</LiquidGlass>

Technical Details

The component uses several modern web technologies to achieve the liquid glassmorphism effect:

• Canvas API: Generates dynamic displacement maps for the liquid distortion effect
• SVG Filters: Uses feDisplacementMap to apply the distortion to the backdrop
• CSS Backdrop Filter: Provides blur, contrast, brightness, and saturation effects
• ResizeObserver: Automatically adjusts to container size changes for responsive behavior
• React.memo: Optimized with memoization to prevent unnecessary re-renders
• RequestAnimationFrame: Used for smooth animations in interactive effects (elasticity, inner glow)
• Scroll Event Listeners: Enables scroll-based adaptive properties

Browser Support

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

Requires support for:

• backdrop-filter CSS property
• SVG filters
• Canvas API
• ResizeObserver API

Changelog

See CHANGELOG.md for a detailed list of changes and version history.

License

MIT

Contributing

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

Support

If you find this project helpful, consider buying me a coffee! ☕

Support via PayPal