Liquid Glass Card Component

A stunning React component that brings Apple's WWDC 2025-inspired liquid glass transparency effects to your applications. This component combines dynamic SVG-based liquid animations with sophisticated glassmorphism aesthetics for a truly modern user interface.

✨ DEMO

See the preview here

Quick Start

Install the package via npm:

npm install @developer-hub/liquid-glass

Import and use the component in your React application:

import {GlassCard} from '@developer-hub/liquid-glass'

function App() {
  return (
    <GlassCard>
      <div className="p-6">
        <h2>Welcome to Liquid Glass</h2>
        <p>Experience the future of UI design with smooth, organic animations.</p>
      </div>
    </GlassCard>
  )
}

Examples

Interactive Button with Custom Styling

<GlassCard
  displacementScale={100}
  blurAmount={0.01}
  cornerRadius={10}
  padding="8px 16px"
  onClick={() => console.log('Glass button clicked!')}
>
  <span className="text-white font-medium">Get Started</span>
</GlassCard>

Card with Shadow Mode for Light Backgrounds

<GlassCard
  shadowMode={true}
  cornerRadius={16}
  className="max-w-md mx-auto"
>
  <div className="p-8">
    <h3 className="text-xl font-bold mb-4">Premium Features</h3>
    <p className="text-gray-600">Enhanced visual effects optimized for light themes.</p>
  </div>
</GlassCard>

API Reference

Props

Property	Type	Default	Description
`children`	`React.ReactNode`	-	Content rendered within the glass container
`displacementScale`	`number`	`100`	Intensity of the liquid displacement effect (0-200)
`blurAmount`	`number`	`0.01`	Blur intensity for the glass effect (0-1)
`cornerRadius`	`number`	`999`	Border radius in pixels
`className`	`string`	`""`	Additional CSS classes for custom styling
`padding`	`string`	-	CSS padding value (e.g., "16px", "1rem")
`style`	`React.CSSProperties`	-	Inline styles object
`shadowMode`	`boolean`	`false`	Optimizes appearance for light backgrounds
`onClick`	`() => void`	-	Click event handler

Key Features

🎨 Premium Design Language - Faithfully recreates Apple's WWDC 2025 glassmorphism aesthetic with pixel-perfect attention to detail

🌊 Organic Liquid Animations - SVG-powered blob animations that create mesmerizing, fluid visual effects

🖱️ Mouse-Responsive Interactions - Dynamic animations that respond naturally to user cursor movement

📱 Cross-Device Compatibility - Seamlessly adapts to desktop, tablet, and mobile screen sizes

🌙 Intelligent Theme Support - Automatically adjusts to dark and light themes with sophisticated color management

♿ Accessibility First - Respects prefers-reduced-motion and includes proper ARIA support

🎯 Developer Experience - TypeScript definitions and comprehensive documentation (TypeScript support coming soon)

⚡ Performance Optimized - Minimal bundle impact with efficient rendering and GPU acceleration

Customization

The component provides multiple layers of customization:

Built-in Styling

The component automatically handles:

Advanced backdrop blur filters with fallbacks
Smooth CSS transitions and GPU-accelerated animations
Responsive breakpoint adaptations
System theme detection and adaptation
High contrast mode compatibility
Reduced motion accessibility compliance

Custom Styling Options

Props-based customization - Use the provided props for common adjustments
CSS class extension - Add custom classes via the className prop
CSS custom properties - Override internal CSS variables for deep customization

Example CSS Override

.my-custom-glass {
  --glass-opacity: 0.15;
  --glass-blur: 20px;
  --animation-duration: 3s;
}

Technical Requirements

Browser Compatibility

Chrome/Edge: Version 76 and above
Firefox: Version 72 and above
Safari: Version 13 and above

Note: The component requires backdrop-filter support for optimal glass effects. Older browsers receive a graceful fallback with standard transparency effects.

Performance Considerations

Uses hardware acceleration when available
Optimized SVG rendering for smooth 60fps animations
Minimal reflow impact through transform-based animations
Efficient event handling with debounced mouse tracking

Contributing

We welcome contributions from the community! Whether it's bug reports, feature requests, or code contributions, please feel free to:

Fork the repository
Create a feature branch
Submit a pull request with detailed description

Please ensure your code follows our style guidelines and includes appropriate tests.

License

For detailed license information, see the LICENSE file in the repository.

Questions or Issues? Check out our GitHub Issues or start a Discussion.

Package detail

@developer-hub/liquid-glass

readme