# ng-glass

`ng-glass` is a modern Angular library for creating **beautiful glassmorphism and liquid glass UI effects** using a simple directive or ready-to-use components.

It is built with **latest Angular (signals + standalone APIs)** and supports global configuration, presets, and advanced visual controls.

👉 **[Live Demo →](https://ng-glass.netlify.app/)**

---

## ✨ Features

* 🧊 Glassmorphism effects (`glass`, `frosted`, `acrylic`)
* 💧 iOS-style **liquid glass effect**
* 🌍 Global configuration (set once, use everywhere)
* 🎨 Presets (`ios`, `fluent`, `material`)
* ⚡ Built with Angular signals
* 🧩 Standalone & lightweight
* 🎛 Highly customizable
* 📦 Zero dependencies

---

## 📦 Installation

```bash
npm install ng-glass
```

Import the base stylesheet once in your global `styles.css` (or `angular.json`):

```css
@import 'ng-glass/ng-glass.css';
```

---

## 🚀 Quick Start

```html
<div ngGlass></div>
```

---

## 🧊 `ngGlass` Directive

Apply glass effects to any element.

### Inputs

| Input          | Description                                     | Default        |
| -------------- | ----------------------------------------------- | -------------- |
| `effectType`   | `'glass' \| 'frosted' \| 'acrylic' \| 'liquid'` | `'glass'`      |
| `blur`         | Blur intensity                                  | `10`           |
| `opacity`      | Glass opacity                                   | `0.15`         |
| `borderRadius` | Border radius (px)                              | `10`           |
| `borderWidth`  | Border width (px)                               | `1`            |
| `borderStyle`  | Border style (`solid`, `dashed`, `none`, …)     | `'solid'`      |
| `borderColor`  | Border color                                    | `'rgba(255,255,255,0.2)'` |
| `shadow`       | Box shadow                                      | default shadow |
| `gradient`     | Background gradient                             | default        |
| `intensity`    | Scale entire effect                             | `1`            |
| `overflow`     | CSS overflow (`hidden`, `visible`, …)           | `'hidden'`     |
| `lightX`       | Light position X (%) (liquid)                   | `30`           |
| `lightY`       | Light position Y (%) (liquid)                   | `30`           |

---

## 💡 Examples

### Basic

```html
<div ngGlass></div>
```

### Acrylic

```html
<div ngGlass effectType="acrylic" [blur]="20"></div>
```

### Liquid Glass (iOS-style)

```html
<div ngGlass effectType="liquid"></div>
```

### Interactive Liquid Effect

```html
<div ngGlass effectType="liquid" [lightX]="80" [lightY]="20"></div>
```

---

## 🌍 Global Configuration

Set default styles once for your entire app.

```ts
import { provideNgGlassConfig } from 'ng-glass';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgGlassConfig({
      effectType: 'liquid',
      blur: 25,
      borderRadius: 16
    })
  ]
});
```

Now you can simply use:

```html
<div ngGlass></div>
```

---

## 🎨 Presets

Quickly apply pre-designed styles:

```ts
provideNgGlassConfig({
  preset: 'ios'
});
```

### Available presets:

* `ios` → Liquid glass (Apple-style)
* `fluent` → Acrylic (Windows style)
* `material` → Soft glass (Material-inspired)

---

## 🧩 `ng-glass-card` Component

A ready-to-use glass card component with content projection.

```html
<ng-glass-card>
  <div card-header>Header</div>
  <div card-body>Content</div>
  <div card-footer>Footer</div>
</ng-glass-card>
```

---

## 🎯 Advanced Example

```html
<div
  ngGlass
  effectType="liquid"
  [blur]="30"
  [intensity]="1.5"
  [lightX]="70"
  [lightY]="30">
</div>
```

---

## 🎨 CSS Customisation

Every visual property is a **CSS custom property** — no inline styles, no `!important` fights. Override anything in your stylesheet:

```css
.my-panel {
  --ng-glass-backdrop:      blur(24px) saturate(200%);
  --ng-glass-background:    linear-gradient(135deg, rgba(0,0,200,0.15), rgba(0,0,200,0.05));
  --ng-glass-border-radius: 20px;
  --ng-glass-border-width:  2px;
  --ng-glass-border-style:  dashed;
  --ng-glass-border-color:  rgba(100, 149, 237, 0.4);
  --ng-glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.3);
  --ng-glass-overflow:      visible;  /* opt-out of overflow:hidden */
  --ng-glass-transition:    none;     /* opt-out of transitions */
}

/* Card-specific overrides */
ng-glass-card.my-card {
  --ng-glass-card-padding:        2rem;
  --ng-glass-card-divider-color:  rgba(100, 149, 237, 0.25);
  --ng-glass-card-divider-width:  2px;
  --ng-glass-card-divider-style:  dashed;
}
```

| CSS Variable                     | Controls                              | Default                  |
| -------------------------------- | ------------------------------------- | ------------------------ |
| `--ng-glass-backdrop`            | `backdrop-filter`                     | blur(10px) saturate(150%)|
| `--ng-glass-background`          | Background gradient                   | linear-gradient(...)     |
| `--ng-glass-border-radius`       | Border radius                         | 10px                     |
| `--ng-glass-border-width`        | Border width                          | 1px                      |
| `--ng-glass-border-style`        | Border style                          | solid                    |
| `--ng-glass-border-color`        | Border color                          | rgba(255,255,255,0.2)    |
| `--ng-glass-shadow`              | Box shadow                            | 0 4px 30px rgba(0,0,0,.1)|
| `--ng-glass-overflow`            | overflow (set `visible` to opt-out)   | hidden                   |
| `--ng-glass-transition`          | CSS transition (set `none` to opt-out)| background 0.3s ease...  |
| `--ng-glass-card-padding`        | Card inner padding                    | 1.5rem                   |
| `--ng-glass-card-divider-color`  | Header/footer divider color           | inherits border-color    |
| `--ng-glass-card-divider-width`  | Header/footer divider width           | inherits border-width    |
| `--ng-glass-card-divider-style`  | Header/footer divider style           | inherits border-style    |

---

## 🧠 Notes

* Works best on elements with **background content behind them**
* Requires browser support for `backdrop-filter`
* For best results, use on modern browsers

---

## 📄 License

MIT