@fluxglass/dom

The browser runtime and vanilla JavaScript API for Fluxglass.

import { createFluxglass } from '@fluxglass/dom';

const element = document.querySelector<HTMLElement>('[data-surface]');
if (!element) throw new Error('Missing surface');

const glass = createFluxglass(element, {
  draggable: true,
  renderer: 'auto',
  width: 180,
  height: 112,
});

glass.setPosition(0.5, 0.5);
// glass.destroy() when the owning view is removed.

Lens width / height may be CSS pixels, CSS lengths ("100%", "12rem"), or "auto" for stylesheet-driven sizing of [data-fluxglass-overlay]. Renderers measure the laid-out lens for geometry and displacement maps.

auto selects an SVG backdrop renderer where reference backdrop filters render, an SVG content-filter renderer on other SVG-capable browsers, and a readable CSS fallback otherwise. Reduced transparency selects the conservative CSS surface. Decorative nodes are marked aria-hidden, forced-colors keeps a visible boundary, and repeated destroy() calls are safe.

When no direct child has data-fluxglass-content, the runtime creates a content wrapper and restores the original children on destroy. Framework adapters should render that host themselves to keep hydration deterministic.