Options

import { startGameGlass, GLASS_DEFAULTS } from 'mri-fivem-liquid-glass'

const glass = startGameGlass({ blur: 18, saturation: 1.2 })
// glass.refresh() re-reads radius, clipping and attributes after inline style changes
// glass.stop() removes the canvas and stops everything

This table is generated from the library source, so it is always current.

Option	Type	Default	Meaning
selector	string	"[data-glass]"	CSS selector of the elements that get glass.
scale	number	0.25	Size of the blur buffer relative to the screen. Lower is cheaper and softer.
blur	number	14	Gaussian sigma of the blur, in screen pixels.
saturation	number	1.15	Saturation of the backdrop (1 keeps the game colors).
darken	number	1	Brightness multiplier of the backdrop (below 1 darkens it).
temporal	number	0.45	Weight of each new frame at 60 fps, scaled by the real frame time. 1 disables smoothing.
zIndex	number	0	z-index of the glass canvas. Your UI root must sit above it.
toneInterval	number	200	Milliseconds between data-glass-backdrop updates.
light	[number, number]	[-0.6,-0.8]	Direction of the rim highlight in screen space (x right, y down). Default comes from the top left.
fallbackImage	string | TexImageSource | null	null	Image used instead of the game outside FiveM (browser dev, screenshots). A canvas or video is read live every frame, so a 3D scene or a gameplay clip works as a moving backdrop. Without it the library stays off outside the game.

The same data is available as JSON at /api/v1/options.json.

Changing options at runtime

Options are read when the glass starts. To change blur or saturation live, stop and start again; it is cheap:

let glass = startGameGlass({ blur: 14 })

function setBlur(value: number) {
  glass.stop()
  glass = startGameGlass({ blur: value })
}

Per element looks (bezel, refraction, dispersion, lenses) are attributes, so they change live without a restart. See Markup.