@creativoma/liquid-glass

A modern React component library featuring liquid frosted glass effect using TailwindCSS and SVG filters. Create elegant glassmorphism interfaces with advanced visual effects.

Features

• Liquid frosted glass effect with customizable displacement mapping
• Full TypeScript support with comprehensive type definitions
• TailwindCSS integration for seamless styling
• Polymorphic component API (render as any HTML element)
• Cross-browser compatible with Safari/iOS fallback support
• Customizable blur, tint, and turbulence parameters
• Zero dependencies (peer dependencies only)
• ESM and UMD formats for maximum compatibility

Installation

npm install @creativoma/liquid-glass

yarn add @creativoma/liquid-glass

pnpm add @creativoma/liquid-glass

Quick Start

import { LiquidGlass } from '@creativoma/liquid-glass'

function App() {
  return (
    <LiquidGlass backdropBlur={3} tintColor="rgba(255, 255, 255, 0.25)">
      <div className="p-8">
        <h1>Your content here</h1>
        <p>The frosted glass effect is applied to this container</p>
      </div>
    </LiquidGlass>
  )
}

API Reference

Props

| Prop | Type | Default | Description | | ------------------------- | ----------------- | --------------------------- | ----------------------------------------------------- | | children | React.ReactNode | - | Content to display inside the container | | className | string | '' | Additional TailwindCSS CSS classes | | backdropBlur | number | 2 | Blur level for the backdrop filter (in px) | | tintColor | string | 'rgba(255, 255, 255, .2)' | Tint overlay color (rgba) | | displacementScale | number | 150 | Displacement map scale (liquid effect intensity) | | turbulenceBaseFrequency | string | '0.008 0.008' | Turbulence base frequency (controls noise size) | | turbulenceSeed | number | 1.5 | Turbulence seed (for different noise patterns) | | as | ElementType | 'div' | HTML component to render (div, button, section, etc.) | | style | CSSProperties | - | Additional inline styles |

Usage Examples

Card with glass effect

<LiquidGlass
  backdropBlur={5}
  tintColor="rgba(255, 255, 255, 0.3)"
  className="max-w-md rounded-xl p-6"
>
  <h2 className="mb-4 text-2xl font-bold text-white">Card Title</h2>
  <p className="text-white/90">
    Card content with elegant frosted glass effect.
  </p>
</LiquidGlass>

Button with liquid glass effect

<LiquidGlass
  as="button"
  backdropBlur={3}
  tintColor="rgba(0, 0, 0, 0.2)"
  className="rounded-full px-8 py-4 font-semibold text-white transition-transform hover:scale-110"
>
  Click Me!
</LiquidGlass>

Modal with glassmorphism

<div className="fixed inset-0 flex items-center justify-center bg-black/50">
  <LiquidGlass
    backdropBlur={10}
    tintColor="rgba(255, 255, 255, 0.15)"
    className="max-w-lg rounded-2xl p-8 shadow-2xl"
  >
    <h3 className="mb-4 text-xl font-semibold text-white">
      Modal with Liquid Glass
    </h3>
    <p className="mb-6 text-white/90">
      This is an example of a modal with glassmorphism effect
    </p>
    <button className="rounded-lg bg-blue-500 px-4 py-2 text-white">
      Close
    </button>
  </LiquidGlass>
</div>

Navbar with glass effect

<LiquidGlass
  backdropBlur={4}
  tintColor="rgba(255, 255, 255, 0.1)"
  className="fixed top-0 right-0 left-0 z-50 border-b border-white/20"
>
  <nav className="container mx-auto flex items-center justify-between px-6 py-4">
    <div className="text-xl font-bold text-white">My App</div>
    <div className="flex gap-6 text-white">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </nav>
</LiquidGlass>

Advanced liquid effect customization

<LiquidGlass
  backdropBlur={3}
  tintColor="rgba(100, 200, 255, 0.2)"
  displacementScale={200}
  turbulenceBaseFrequency="0.01 0.01"
  turbulenceSeed={5}
  className="rounded-3xl p-12"
>
  <p className="text-white">Custom liquid effect</p>
</LiquidGlass>

Development

# Clone the repository
git clone https://github.com/creativoma/liquid-glass.git
cd liquid-glass

# Install dependencies
pnpm install

# Development mode
pnpm run dev

# Linting and formatting
pnpm run lint
pnpm run format

# Build library
pnpm run build:lib

# Build demo
pnpm run build:demo

# Preview
pnpm run preview

# Publish (requires permissions)
npm publish

Project Structure

liquid-glass/
├── src/
│   ├── components/
│   │   ├── LiquidGlass.tsx
│   │   └── types.ts
│   ├── App.tsx                 # Demo application
│   ├── main.tsx               # Demo entry point
│   ├── index.ts               # Library entry point
│   └── index.css
├── dist/                      # Compiled files
├── public/                    # Demo assets
├── README.md
├── package.json
├── tsconfig.json
├── vite.config.ts            # Demo build config
├── vite.config.lib.ts        # Library build config
└── tailwind.config.js

Requirements

• React >= 18.0.0
• React DOM >= 18.0.0
• TailwindCSS (component uses Tailwind classes)

Technologies

• React - Component library
• TypeScript - Static typing
• Vite - Build tool and bundler
• Tailwind CSS - CSS framework for glassmorphism effect
• SVG Filters - Advanced visual effects with feTurbulence and feDisplacementMap

Package Formats

This package includes multiple formats for maximum compatibility:

• ESM (dist/index.esm.js) - For modern applications
• UMD (dist/index.umd.js) - For universal compatibility
• TypeScript (dist/index.d.ts) - Type definitions

Contributing

Contributions are welcome! Please:

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © creativoma

Changelog

See CHANGELOG.md for a detailed list of changes.