Using backgrounds

How to choose, place and tune a 3D background so it supports a page instead of fighting it.

What a background is

Each background is a live scene drawn on the GPU by code (WebGL2 or Canvas 2D). There are no photos or video files, so there is nothing to host and the scene takes your colours. Every scene has several looks, and every look can be recoloured.

Choosing one

• Start from the feeling, not the effect: calm (Ocean, Cloudscape), precise (Contour Lines, Grid Horizon), warm (Magma, Candle looks), playful (Spectrum Mesh, Drift).
• Filter by use: the screen's use filter suggests looks for a restaurant, a clinic, a studio or a store.
• Look at the calm part. Your headline sits over the quietest third of the frame. If the scene has no calm part, choose another.

Placing it

<Ocean preset="dusk" className="min-h-[70svh] rounded-xl">
  {/* the hero content, as children */}
</Ocean>

Put the headline and one action inside as children. Keep contrast at 4.5:1: white text over dark looks, near-black over light ones; add a soft gradient scrim where a scene is busy.

Tuning

• Colours: pass preset for a named look and colors={{ sun: "#ffd7a1" }} to override single colours.
• Speed and brightness: speed and intensity multiply the look's own values.
• Interaction: interactive lets the pointer or a finger move the scene. Set it to false where the scene sits under a form.

Rules of thumb

1. One animated background per page.
2. Keep it behind the first screen, not behind long reading.
3. On phones it runs only while it is on screen; do not mount it hidden.
4. Reduced motion shows one composed still frame: check that it still looks good.

Cost

Backgrounds share one WebGL context for the whole page and a frame budget, so a page of them still scrolls. Cards on the gallery screens play at most two at a time on a phone.