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.

• 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.

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.