Performance

Keep glass rendering deliberate by scoping backdrop volatility and limiting active surfaces.

Liquidify's material engine uses CSS and SVG rather than capturing page pixels. Performance still depends on how many glass surfaces are visible, their size, and how often the backdrop changes.

Declare backdrop volatility

Wrap only the region whose backdrop behavior differs from the default:

import { Backdrop, GlassPrimitive } from "@liquidify/glass"

export function VideoControls() {
  return (
    <Backdrop type="high">
      <GlassPrimitive as="nav" aria-label="Playback controls">
        {controls}
      </GlassPrimitive>
    </Backdrop>
  )
}

Use static when the backdrop will not change, low for ordinary application content, and high only for continuously changing content. The declaration lets the renderer choose its strategy without inspecting or capturing the page.

Bound the work

Prefer one containing glass surface to many overlapping decorative panes.
Keep continuously animated backdrops and high-volatility scopes small.
Do not apply glass to offscreen placeholders or invisible duplicates.
Virtualize long application lists before adding expensive surface treatments to every row.
Stabilize style objects passed to lower-level useGlass integrations so memoized output can be reused.

Measure in target browsers

Profile the real composition in every supported engine. Chrome can render the full refraction path; Safari and Firefox use the progressive frost and specular path. Measure scrolling, opening overlays, and sustained backdrop animation, and verify reduced-motion behavior independently.

Use the component's documented perf surface only where it exists. Backdrop is the preferred scope-level declaration.