React component for liquid glass effect
npm install @liquidglass/reactA beautiful React component that creates stunning liquid glass effects using advanced backdrop filters and SVG displacement mapping.
``bash`
npm install @liquidglass/reactor
yarn add @liquidglass/reactor
pnpm add @liquidglass/react
`tsx
import { LiquidGlass } from '@liquidglass/react';
function App() {
return (
Your content here...
Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| number | 20 | Border radius in pixels |
| blur | number | 0.25 | Blur intensity |
| contrast | number | 1.2 | Contrast level |
| brightness | number | 1.05 | Brightness level |
| saturation | number | 1.1 | Saturation level |
| shadowIntensity | number | 0.25 | Shadow intensity |
| displacementScale | number | 1 | Displacement effect scale |
| elasticity | number | 0.6 | Elasticity of the liquid effect |
| zIndex | number | 9999 | Z-index of the component |
| className | string | undefined | Additional CSS classes |
| children | ReactNode | undefined | Child components to render inside |Features
- 🌊 Dynamic liquid glass effect with real-time displacement mapping
- 📱 Responsive design that adapts to container size
- 🎨 Customizable appearance with extensive props
- âš¡ Performance optimized with efficient canvas rendering
- 🔧 TypeScript support with full type definitions
- 🎯 Framework agnostic core with React bindings
Examples
$3
`tsx
Hello World
`$3
tsx
blur={1.0}
contrast={1.5}
brightness={1.2}
saturation={1.3}
shadowIntensity={0.4}
elasticity={0.8}
className="my-glass-container"
>
Custom Glass
With enhanced effects
`Browser Support
- ✅ Chrome 76+
- ✅ Firefox 70+
- ✅ Safari 13+
- ✅ Edge 79+
Note: This component uses advanced CSS features like
MIT © Liquid Glass Team