Shader Pass

Add shaders as a material and interaction layer, not decoration covering the entire product. Make the result feel polished and intentional. Prefer effects inside edges, corners, borders, fills, hover states, selected states, and small focal surfaces.

Core principle

A good UI shader is often noticed indirectly. It should make a component feel more responsive, premium, dimensional, branded, or easier to notice. It should not become the main thing the user sees unless the page is intentionally a visual landing page.

When uncertain, reduce the area, opacity, saturation, movement, and number of effects.

Timebox

Respect the active /1–/5 timebox. When none is active, target completion in under 10 minutes. Shortlist no more than three effects and implement only the strongest one or two.

Approved sources

Use official code and documentation from the source that best fits the project: