Skip to content

Independent rendering system for the web

Glass with real depth.

A framework-neutral optical engine with a production DOM runtime and a thin, SSR-safe React adapter. Designed to feel alive—and degrade with grace.

Shape the glassRead the docs
Pure core
No browser globals
3 render paths
Ideal to fallback
SSR safe
Deterministic markup

01 / Live material lab

Don’t imagine it. Bend it.

Drag the lens, switch the scene, tune the optics, or force the conservative CSS path. The demo uses the same public React package consumers install.

material-preview.flux

Effect paused

FLUX / MATERIAL 01

Drag anywhere to refract

Adaptive optical surface

Light, bent with intent.

Strength 0.12Spectrum 0.28

Material controls

none renderer · quality tier
Scene
Renderer
pnpm add @fluxglass/react

02 / Deliberate architecture

Beauty on the surface. Discipline underneath.

@fluxglass/core

Optics without opinions.

Normalization, optical math, quality policy, and renderer contracts remain pure, deterministic, and framework-free.

@fluxglass/dom

One runtime. Every adapter.

Shared frame scheduling, bounded map caching, browser capability selection, and complete resource cleanup.

React→DOM→Core

Progressive by default

A good experience at every capability level.

IdealReference backdrop filter
DegradedSVG content filter
FallbackReadable CSS surface

@fluxglass/react

Thin where it matters.

Components and hooks own React lifecycle—not rendering algorithms. High-frequency movement stays outside the render loop.

Adapter responsibilityLifecycle onlyNo duplicated optics or renderer implementation

03 / Small surface area

From install to refraction in one component.

Semantic content stays semantic. Fluxglass adds decoration around it, then restores everything cleanly when the view unmounts.

Explore the React guide

glass-card.tsx

import { Fluxglass } from '@fluxglass/react';

export function GlassCard() {
  return (
    <Fluxglass
      renderer="auto"
      width={220}
      strength={0.12}
    >
      <button>Continue</button>
    </Fluxglass>
  );
}

Ready when the browser is.

Give the interface another dimension.

Start buildingView source