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

npm install @nyc-design/glass-effects
# or
pnpm add @nyc-design/glass-effects

Usage

Tailwind CSS Plugin Setup

// 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)

<!-- 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)

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

interface LiquidGlassProps {
  children: ReactNode
  className?: string
  style?: React.CSSProperties
  preset?: 'liquid-subtle' | 'liquid-medium' | 'liquid-strong'
}

Plugin Options

interface GlassPresetOptions {
  colors?: {
    primary?: string
    secondary?: string
    accent?: string
  }
}

License

MIT