Gilect

Gilect is a React component library that brings high-performance, "Apple-style" glass UI effects to your web applications using WebGL.

It uses a "Mirror Pattern" to synchronize standard DOM elements with a WebGL overlay, allowing you to build layouts with regular HTML/CSS while getting the visual benefits of advanced shaders (refraction, blur, chromatic aberration).

Installation

``bash
npm install gilect three @react-three/fiber
`

Getting Started

$3

Wrap your application (or the section using glass effects) with . This initializes the shared WebGL canvas.

`tsx
import { GilectRoot } from 'gilect';

function App() {
return (



);
}
`

$3

Use to create containers with the glass effect. You can style them using standard CSS or className props.

`tsx
import { GlassPane } from 'gilect';

function Card() {
return (
className="card"
tintColor="#000000" // Hex color of the glass tint
tintStrength={0.15} // 0 to 1 (opacity of the tint)
distortion={-0.15} // Refraction amount (negative = convex)
>


Hello Glass

This content floats above a refractive glass plane.

);
}
`

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| tintColor | string | "#000000" | Hex color to tint the glass. |
| tintStrength | number | 0.15 | Opacity of the tint layer (0.0 - 1.0). |
| distortion | number | -0.15 | Refraction index/strength. |

Development

To develop locally:

1. Clone the repository.
2. Install dependencies: npm install.
3. Run the playground: cd playground && npm run dev.

The playground is aliased to the local source code, so changes in src/` are instantly reflected.