@arthur_leywin/glass-ui

A premium, interactive React component library implementing physics-based 3D WebGL glass materials, real-time refraction/distortion, spring micro-interactions, layout indicators, and kinetic SVG animations.

Designed to deliver rich, state-of-the-art aesthetics while maintaining high-performance safety rails (touchscreen fallbacks, prefers-reduced-motion integration, and viewport lazy-mounting).

Key Features

• Split Entry Points (Zero WebGL Bloat): Exposes two separate package subpaths. Lightweight components import instantly without loading Three.js.
• Real-Time WebGL Glass Refraction (Opt-In): Dynamic 3D refraction maps, chromatic aberration, point-light cursor tracking, and surface roughness rendering powered by React Three Fiber and Three.js.
• Adaptive Performance Engine:
  • Coarse Pointer & Viewport Detection: Automatically detects mobile/touchscreens and viewports under 768px, falling back to static CSS glass configurations to save power.
  • Reduced Motion Support: Disables spring magnetic follow, 3D hover tilt, and heavy shader materials when system prefers-reduced-motion is active.
  • Viewport Lazy Mounting: Automatically skips WebGL Canvas rendering for off-screen cards using IntersectionObserver, activating canvas contexts only as they enter the viewport.
  • Animation Count Threshold: Emits console warnings in development mode when more than 10 anime.js micro-animations are active simultaneously to prevent frames dropping.
• Spring-Physics Core Widgets: Magnetic hover buttons, elastic tooltips with automatic screen flipping, and layouts using GSAP/Framer Motion.
• Kinetic Micro-Animations: Sequential typewriter writing, decode scrambling, SVG path morphing, logo-reveal path separators, and responsive loading animations.

Installation

Install the library along with its peer dependencies:

npm install @arthur_leywin/glass-ui three @react-three/fiber @react-three/drei framer-motion gsap animejs

Import Subpaths

To support maximum tree-shaking efficacy, @arthur_leywin/glass-ui exports assets on two different paths:

1. Lightweight Components (@arthur_leywin/glass-ui)

Contains core widgets with zero WebGL or Three.js dependencies. Perfect for maintaining small bundle sizes.

• Components: Badge, Tooltip, Input, Select, Checkbox, Radio, Switch, Tabs, Navbar, AnimatedText, AnimatedIcon, PathDivider, Loader, Card, Button.
• Note: Card, Button, and Loader rendered from this path use high-performance static CSS glass styling.

import { Badge, Tooltip, Input, Button, Card } from "@arthur_leywin/glass-ui";

2. WebGL Components (@arthur_leywin/glass-ui/webgl)

Exposes premium 3D shader-based components that pull in Three.js and React Three Fiber.

• Components: GlassCanvas, GlassButton, GlassCard, GlassLoader, and material shader definitions.

import { GlassCard, GlassButton, GlassLoader, GlassCanvas } from "@arthur_leywin/glass-ui/webgl";

Quick Start

1. Basic Setup

Import the global styles into your project root (e.g. main.tsx or _app.tsx):

import "@arthur_leywin/glass-ui/dist/index.css";

2. Render an Interactive WebGL Glass Card

import { GlassCard } from "@arthur_leywin/glass-ui/webgl";

export default function App() {
  return (
    <GlassCard 
      tilt={true} 
      tiltMaxAngle={12}
      glassProps={{
        ior: 1.5,
        chromaticAberration: 0.05,
        roughness: 0.15,
        thickness: 1.2
      }}
    >
      <div className="p-8">
        <h3 className="text-xl font-bold text-white">Glass Interface</h3>
        <p className="text-sm text-neutral-300">
          This card bends background colors dynamically based on pointer positions.
        </p>
      </div>
    </GlassCard>
  );
}

Component Reference

1. Card & GlassCard

A customizable glass backplate with mouse-tilt reflection, glare, and background shader properties.

| Prop (GlassCard) | Type | Default | Description | |---|---|---|---| | tilt | boolean | true | Enables 3D cursor-follow perspective tilt. | | tiltMaxAngle| number | 12 | Maximum tilt inclination in degrees. | | showOrbs | boolean | true | Renders moving gradient orbs behind the glass plate inside the shader scene. | | glassProps | GlassMaterialProps | {} | Customize IOR, chromatic aberration, roughness, and thickness. |

2. Button & GlassButton

Magnetic spring buttons featuring cursor light tracking.

import { GlassButton } from "@arthur_leywin/glass-ui/webgl";

<GlassButton magnetic={true} magneticStrength={0.4}>
  Confirm Transaction
</GlassButton>

3. Tooltip

Spring-physics tooltip indicators that automatically flip coordinates if pushed off-screen.

import { Tooltip, Button } from "@arthur_leywin/glass-ui";

<Tooltip content="Saves changes immediately" position="top">
  <Button variant="ghost">Save Draft</Button>
</Tooltip>

4. Form Elements

CSS glass form fields mapped to project design tokens:

import { Input, Select, Switch, Checkbox, Radio } from "@arthur_leywin/glass-ui";

// Inside a form container:
<Input label="Email" type="email" placeholder="enter email..." />
<Select 
  label="Region" 
  options={[{ value: "us", label: "US" }, { value: "eu", label: "EU" }]} 
/>
<Switch label="Developer Mode" checked={dev} onChange={setDev} />

5. Dialogs (Modal & Drawer)

A11y-compliant modal popups and drawers incorporating GSAP entry tweens, backdrop clicks, and keyboard focus trap boundaries.

import { Modal, Drawer } from "@arthur_leywin/glass-ui";

// Modal Popup
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Confirmation">
  <p className="text-sm">Proceed with changes?</p>
</Modal>

License

MIT · Made by @arthur_leywin