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

npm install gilect three @react-three/fiber

Getting Started

1. Setup the Root Provider

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

import { GilectRoot } from 'gilect';

function App() {
  return (
    <GilectRoot>
      <YourContent />
    </GilectRoot>
  );
}

2. Use Glass Components

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

import { GlassPane } from 'gilect';

function Card() {
  return (
    <GlassPane 
      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)
    >
      <h1>Hello Glass</h1>
      <p>This content floats above a refractive glass plane.</p>
    </GlassPane>
  );
}

Props

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.