Glass Surface

Refractive liquid glass for the web and React.

Live demo · Install · Usage · Playground · Renderers · Contributing

Put real refraction behind any element. The surface bends what lies behind it at the edge, splits the colors like a lens, and keeps the center calm, in React or in plain JavaScript.

WebGL Refracts an image, video, or canvas with smooth sampling, at any device pixel ratio.	SVG filter Refracts whatever DOM is behind the element through backdrop-filter in Chromium.	Frosted fallback Blur, richer color, and a tint wherever refraction isn't available.
Any shape The alpha channel of an image becomes the outline, with a bevel that follows it.	Chromatic aberration Each color channel bends by its own amount.	Any framework One core for JavaScript and TypeScript, and a React component on top.

Install

With any package manager:

npm install @svidskiy/glass-surface-react
pnpm add @svidskiy/glass-surface-react
yarn add @svidskiy/glass-surface-react
bun add @svidskiy/glass-surface-react

Without React, install @svidskiy/glass-surface the same way.

Usage

import "@svidskiy/glass-surface-react/style.css";
import { GlassSurface } from "@svidskiy/glass-surface-react";
import { useRef } from "react";

export function TabBar() {
  const photo = useRef<HTMLImageElement>(null);

  return (
    <>
      <img alt="" ref={photo} src="/photo.jpg" />

      <GlassSurface backdrop={photo} borderRadius={38} height={76} width={320}>
        …
      </GlassSurface>
    </>
  );
}

Core shows the same surface without React.

Playground

The playground drags the surface over three patterned backdrops, tunes every option, and copies the component.

Renderers

Renderer	Refracts	Where
WebGL	The backdrop: an <img>, <video>, or <canvas>	Every browser with WebGL 2
SVG	Any content behind the element	Chromium
Fallback	Nothing; frosted glass	Everywhere else

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

Packages

Package	What it is
@svidskiy/glass-surface	The framework-free core for JavaScript and TypeScript
@svidskiy/glass-surface-react	The React component

Contributing

Pull requests are welcome. CONTRIBUTING.md covers the setup, the checks CI runs, and the conventions, and Releasing covers releases. Report vulnerabilities privately as described in SECURITY.md.

License

Glass Surface is licensed under the MIT license, whose text is in LICENSE.