Effects

Effects are brand-level visual gates on your theme. --effect-* custom properties decide whether whole treatments can run. Preflight and components already watch those tokens; when a gate is off, the matching look stays quiet even if markup still asks for it. Flip a gate on the theme and the UI follows without per-surface retuning.

Polarity is the same for every gate: leave the variable empty or unset to turn the effect on, set it to initial to turn it off. Built-in brands pick a default per gate; check the theme sheet.

How toggles workCopy Anchor Link

Clearing a value restores the "on" state; initial is the off signal that @container root not style(--effect-*: initial) looks for.

:root {
  /* on (same as omitting the property) */
  --effect-vibrancy: ;
  --effect-corner-shape: ;
  --effect-shadows: ;

  /* off until you want the foil */
  --effect-holofoil: initial;
}

Intensity for a treatment that has parameters (glass blur, for example) lives on its own variables (--vibrancy-blur), not on the --effect-* gate itself.

In practiceCopy Anchor Link

Mark a surface for glass with data-vibrant (prefer that over hand-rolled backdrop-filter). The filter only applies while the vibrancy gate is on; Surface may also translucify its fill so blur reads through. Toggle the demo to feel the gate: off keeps the markup, but the frost goes quiet.

A foil wash paints a fixed, non-interactive overlay on body::after for the whole viewport when its gate is on — global, not a per-surface prop. Built-in brands often leave holofoil off (initial); flip the Switch to paint the foil over the card.

Other gates follow the same pattern:

• Corner treatment follows the theme's --corner-shape when its gate is on; off is ordinary border-radius
• Elevation shadows behind Elevator / data-elevation* respect the shadows gate the same way; off kills those stacks even if attrs remain

Stacking (z-index) is separate. Depth layers: Elevation.

TuneCopy Anchor Link

App Studio in ViraUI Pro is the easiest path when you want to reshape brand treatments: flip effect gates and intensity on a live ViraUI canvas, share the theme with the team, and export CSS that already matches the contract. Drop the export into the app as a custom theme. Surfaces that already ask for glass or shadows follow the new posture without per-panel CSS.

Without Studio, paste a prompt into your agent or set --effect-* (and related intensity vars) on a custom theme sheet, preferably on :root or another ancestor that owns the theme, or switch a built-in preset.

Turn off drop shadows for the brand on the theme. Leave glass, foil, and other brand effects as they are.