Everyone's doing the blurry blob mesh-gradient hero background now, and most look like a 2005 lava lamp because the color stops drift randomly and mush together. I wanted something that breathes slowly and stays on-brand.
The insight that changed the output: constrain the motion to slow Lissajous orbits for each color node and lock the palette to a provided brand set, so it feels intentional instead of soup. I also asked it to render at half resolution and upscale, since it's blurred anyway, to keep it cheap.
Sharing the prompt in case it saves someone the lava-lamp phase.
Build a single-file canvas mesh-gradient animated background. It must feel calm and designed, not like a lava lamp:
- Take a fixed palette of {N} brand colors (default 4) as an array; do NOT invent random hues.
- Place N radial-gradient 'blobs'; each blob center moves on a slow Lissajous curve (distinct low frequencies per blob, e.g. 0.03..0.09 rad/frame) so motion is periodic and gentle, never jittery.
- Composite blobs with 'lighter' or 'screen' and a heavy blur (draw small, `ctx.filter='blur(60px)'` or render at 0.25x and CSS-upscale for perf).
- Add a faint film grain overlay so gradients don't band on cheap displays.
- Expose `speed` and `contrast` constants at the top.
- Cap DPR at 1.5 (it's blurred, no one can tell) and target <2ms per frame.
Explain why Lissajous motion reads as intentional versus random-walk blob drift.