Ambient Backgrounds
Ambient backgrounds set atmosphere behind content and should be easy to ignore. They must not reduce text contrast, attract focus like controls or continuously consume resources while invisible.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Ambient Backgrounds · compare the system relationship
Purpose
Ambient backgrounds set atmosphere behind content and should be easy to ignore. They must not reduce text contrast, attract focus like controls or continuously consume resources while invisible.
Use one mesh, gradient, bubble field or spotlight grid per visual region. Keep color and movement low, pause offscreen where practical and cap decorative elements. Do not stack several ambient systems to manufacture richness.
Layers stay pointer-transparent and hidden from assistive technology. Touch and reduced-motion modes should be static. Validate foreground contrast at every animated position and prefer transforms/opacity over filter-heavy repainting.
Source: packages/skills/patterns/ambient-backgrounds.md