React

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

export function Card() {
  const glass = useFluxglass();

  return (
    <Fluxglass
      ref={glass.ref}
      renderer="auto"
      width={180}
      height={112}
      radius="auto"
      strength={0.1}
    >
      <button type="button">Continue</button>
    </Fluxglass>
  );
}

Use glass.setPosition(x, y) for pointer-frequency movement without triggering React renders. Coordinates are normalized from 0 to 1 and clamped by the renderer.

The component emits deterministic content markup during SSR, creates the DOM controller in a layout effect, updates that controller after prop changes, and destroys it during unmount. React Strict Mode's repeated development lifecycle is supported.

LiquidGlass and useLiquidGlass remain as prototype-migration aliases.