Vanilla JavaScript

import { createFluxglass } from 'fluxglass';

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

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

glass.setPosition(0.5, 0.5);
glass.update({ strength: 0.14 });

// When the owning view is removed:
glass.destroy();

Lens width / height may be CSS pixels, CSS lengths such as "100%", or "auto" so stylesheets can size [data-fluxglass-overlay] without inline overrides. Geometry and displacement maps use the measured pixel size after layout.

When the container has no direct child marked data-fluxglass-content, the runtime creates a wrapper and restores the original child order on destroy. Framework adapters should render that host themselves so hydration remains deterministic.

Renderer overrides are useful for testing, but auto is the recommended production setting.