Backgrounds

The marketing site’s animated backgrounds, in the React starter under src/components/backgrounds. Each renders into its own canvas and fills its parent; most are WebGL and pause when the tab is hidden and skip frames on slow devices. Give one a positioned box, put content on top, and wrap it in ThemedBg to follow light and dark.

Aurora

tsx

import { Aurora, ThemedBg, GradualBlur } from '@/components/backgrounds'

<div className="relative h-64 overflow-hidden rounded-[12px]">
  <ThemedBg><Aurora /></ThemedBg>          {/* inverts for light themes */}
  <div className="relative z-10 p-6">…content on top…</div>
</div>

Rules

One live background per screen. Each owns a WebGL context and browsers cap a page at about sixteen.
Backgrounds are for a hero, an empty state or an onboarding moment — never behind a list or a form.
Prefer DiaGradient or GradualBlur where a still gradient will do; they are CSS.
Respect prefers-reduced-motion; the renderers already do.