@ephasme/glassy

A React component that recreates Apple's stunning Liquid Glass effect, bringing realistic glass refraction and chromatic aberration to your web applications.

✨ Features

• 🔮 Realistic refraction - Mimics actual glass optical properties
• 🌈 Chromatic aberration - Subtle color separation for authentic glass look
• ⚡ Performance optimized - Uses SVG filters with backdrop-filter for smooth rendering
• 🎛️ Highly customizable - Fine-tune depth, blur, scale, and aberration effects
• 📱 Responsive - Automatically adapts to element dimensions and fit in the DOM flow nicely
• 🎯 TypeScript ready - Full type definitions included

🚀 Installation

npm install @ephasme/glassy

yarn add @ephasme/glassy

pnpm add @ephasme/glassy

📖 Usage

import { LiquidGlass } from "@ephasme/glassy";

function App() {
  return (
    <div style={{ position: "relative", backgroundColor: "#f0f0f0" }}>
      {/* Background content */}
      <img src="/background-image.jpg" alt="Background" />

      {/* Liquid Glass overlay */}
      <LiquidGlass
        width={300}
        height={200}
        style={{
          position: "absolute",
          top: 50,
          left: 50,
          borderRadius: "20px",
          border: "1px solid rgba(255, 255, 255, 0.3)",
        }}
      >
        <div style={{ padding: "20px", color: "white" }}>
          <h2>Liquid Glass Effect</h2>
          <p>Content appears over the glass</p>
        </div>
      </LiquidGlass>
    </div>
  );
}

🎛️ API Reference

Props

| Prop | Type | Default | Description | | --------------------- | ------------------------- | ------------ | ------------------------------------- | | width | CSSProperties['width'] | Required | Width of the glass element | | height | CSSProperties['height'] | Required | Height of the glass element | | style | CSSProperties | Required | CSS styles (excluding width/height) | | depth | number | 3.5 | Depth of the refraction effect (0-10) | | depthBlur | number | 25 | Blur intensity for the depth mask | | chromaticAberration | number | 5 | Chromatic aberration intensity (0-20) | | scale | number | 90 | Scale of the displacement effect | | blur | number | 2 | General blur applied to backdrop | | children | ReactNode | - | Content to render inside the glass | | ref | Ref<HTMLDivElement> | - | Ref to the glass container element |

Example with Custom Settings

<LiquidGlass
  width={400}
  height={300}
  depth={5} // More pronounced refraction
  depthBlur={30} // Softer depth transition
  chromaticAberration={8} // Stronger color separation
  scale={120} // Larger displacement scale
  blur={3} // More background blur
  style={{
    borderRadius: "25px",
    background: "rgba(255, 255, 255, 0.1)",
    backdropFilter: "brightness(1.1)",
  }}
>
  <div>Your content here</div>
</LiquidGlass>

🌐 Browser Support

The Liquid Glass effect relies on modern web technologies:

• Full support: Chromium-based browsers (Chrome, Edge, Opera)
• Partial support: Firefox (basic functionality)
• No support: Safari (backdrop-filter with SVG filters not supported)

⚠️ Important Considerations

1. Performance: SVG filters can be computationally intensive. Use sparingly for best performance.
2. Responsive design: Consider how the effect scales on different screen sizes.

🙏 Credits

This library was inspired by and built upon the excellent work of:

• Adrien Gautier - His comprehensive Medium article provided the foundational understanding of SVG displacement filters and their application to liquid glass effects.

• rdev - The liquid-glass-react repository offered valuable insights into React implementation patterns and effect variations.

While neither approach perfectly aligned with my specific requirements, both resources were instrumental in understanding the underlying techniques. This library represents a custom implementation that combines and extends their concepts. Many thanks to both contributors for sharing their knowledge!

📄 License

MIT © Loup Peluso

🐛 Issues & Contributing

Found a bug or want to contribute? Please visit our GitHub repository to report issues or submit pull requests.