Technical guide

Every piece, live.

Each component below is the real element running on this page. Under each one: the markup, and every attribute, property and event it has. The same reference lives in docs/API.md. For how the material is built, see the exploded view.

Install

From a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tomacco/amazing-glass@main/dist/amazing-glass.css">
<script type="module" src="https://cdn.jsdelivr.net/gh/tomacco/amazing-glass@main/dist/amazing-glass.min.js"></script>

From GitHub with npm

npm i github:tomacco/amazing-glass

import 'amazing-glass/styles.css';
import 'amazing-glass';            // defines every <ag-*> element
import { Switch } from 'amazing-glass/react';
import { Switch } from 'amazing-glass/vue';

The material

Drag the glass. Switch the preset and the scene. Regular frosts for legibility, clear keeps content visible, lens magnifies and is what knobs turn into.

Drag me

Parameters

Pass any of these as params (JSON attribute, React or Vue prop) or through glass.setParams().

Components

Measured against Apple

The regular and clear presets were fitted against SwiftUI's .glassEffect on macOS 27, rendered over the same images at the same geometry. Mean error per colour channel on a 0 to 255 scale: regular 7.13 before fitting, 2.02 after; clear 19.48 before, 1.64 after. Left Apple, right amazing-glass.

Apple's glass over the test cardamazing-glass over the test card
Apple's glass over the dusk sceneamazing-glass over the dusk scene

The rig is in lab/: a SwiftUI reference renderer and a fitter. Limits: macOS glass, not iOS; lens knobs and dark mode are not measured yet.

Tokens

Override any of these on :root or on one element. Colours are the iOS 26 system palette and switch with the colour scheme.

Text styles

Support levels

Every feature carries one. Your code can ask at runtime with featureStatus(id). The last column is this browser, right now.

Respects prefers-reduced-motion, prefers-reduced-transparency and prefers-contrast. Force the Safari and Firefox fallback anywhere with ?ag-fallback in the URL.