npm package: @nyc-design/glass-effects
Description: Modern glass effect library with Tailwind CSS presets and React liquid glass components
Author: Neil Tapiavala
Latest version: 2.0.0

# Glass Effects

Modern glass effect library with Tailwind CSS presets and React liquid glass components.

## Features

- 🎨 **CSS Glass Effects** - Clean Tailwind CSS utilities for basic glassmorphism
- 🌊 **Liquid Glass Components** - Advanced SVG distortion effects via React components  
- 🎯 **Preset System** - Pre-configured intensity levels (subtle, medium, strong)
- 🎨 **Theme Integration** - Automatic color integration with your Tailwind theme
- ⚡ **Performance Optimized** - Dynamic SVG filters that adapt to component dimensions
- 📱 **Responsive** - Works across all screen sizes and device pixel ratios

## Installation

```bash
npm install @nyc-design/glass-effects
# or
pnpm add @nyc-design/glass-effects
```

## Usage

### Tailwind CSS Plugin Setup

```js
// tailwind.config.js
import glassEffects from '@nyc-design/glass-effects'

export default {
  plugins: [
    glassEffects({
      colors: {
        primary: '#3b82f6',    // Optional: override theme colors
        secondary: '#6b7280',
        accent: '#10b981'
      }
    })
  ]
}
```

### Basic Glass Effects (CSS Only)

```html
<!-- Glass presets -->
<div class="glass-subtle">Subtle glass effect</div>
<div class="glass-medium">Medium glass effect</div>
<div class="glass-strong">Strong glass effect</div>

<!-- Theme colors -->
<div class="glass-medium glass-primary">Primary colored glass</div>
<div class="glass-medium glass-secondary">Secondary colored glass</div>
<div class="glass-medium glass-accent">Accent colored glass</div>

<!-- Interactions -->
<button class="glass-medium glass-primary glass-hover">
  Hover effect
</button>

<!-- Utilities -->
<div class="glass-medium glass-shadow glass-border glass-glow">
  Glass with shadow, border, and glow
</div>
```

### Liquid Glass Components (SVG Distortion)

```jsx
import { LiquidGlass } from '@nyc-design/glass-effects'

function App() {
  return (
    <LiquidGlass 
      preset="liquid-medium"
      className="glass-primary glass-hover glass-shadow"
    >
      <h1>Advanced liquid glass effect</h1>
      <p>With realistic glass distortion</p>
    </LiquidGlass>
  )
}
```

## Available Classes

### Glass Presets
- `glass-subtle` - Light blur, high transparency
- `glass-medium` - Standard glassmorphism look
- `glass-strong` - Heavy blur, more opaque

### Liquid Glass Presets (Component Only)
- `liquid-subtle` - Light distortion effect
- `liquid-medium` - Standard liquid glass
- `liquid-strong` - Heavy distortion

### Theme Colors
- `glass-primary` - Uses your theme's primary color
- `glass-secondary` - Uses your theme's secondary color  
- `glass-accent` - Uses your theme's accent color

### Interactions
- `glass-hover` - Hover state effect
- `glass-focus` - Focus state effect
- `glass-active` - Active/pressed state

### Utilities
- `glass-shadow` - Subtle shadow
- `glass-shadow-lg` - Larger shadow
- `glass-glow` - Inner glow effect
- `glass-glow-dynamic` - Animated glow spots
- `glass-border` - Glass border effect

## API

### LiquidGlass Component

```tsx
interface LiquidGlassProps {
  children: ReactNode
  className?: string
  style?: React.CSSProperties
  preset?: 'liquid-subtle' | 'liquid-medium' | 'liquid-strong'
}
```

### Plugin Options

```tsx
interface GlassPresetOptions {
  colors?: {
    primary?: string
    secondary?: string
    accent?: string
  }
}
```

## License

MIT