Vanilla JavaScript — Fluxglass

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();

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.