@imsvidskiy/glass-surface

Refractive glass surface for any element, without a framework.

npm install @imsvidskiy/glass-surface

pnpm, yarn, and bun work the same way: pnpm add, yarn add, bun add.

import "@imsvidskiy/glass-surface/style.css";
import { createGlassSurface } from "@imsvidskiy/glass-surface";

const surface = createGlassSurface(document.querySelector("#panel"), {
  backdrop: document.querySelector("#photo"),
});

surface.update({ distortionScale: -90 });
surface.destroy();

Renderers

• WebGL refracts an <img>, <video> or <canvas> passed as backdrop, with smooth sampling.
• SVG refracts whatever is behind the element through backdrop-filter; Chromium only.
• Fallback is frosted glass for every other case.

renderer: "auto" picks the SVG filter in Chromium and WebGL elsewhere when a backdrop is given; renderer: "webgl" picks WebGL wherever a backdrop is given.

License

MIT