Playground · Backgrounds

Aurora Background

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

An animated mesh-gradient backdrop: soft colour fields drifting over a dark base, with optional grain and vignette.

Version 1.0.2 · What changed
  • 1.0.2 2026-10-06 It now holds still on its own when the platform asks for reduced motion (MediaQuery.disableAnimationsOf), so passing paused: for that reason is no longer needed.
  • 1.0.1 2026-10-03 In debug builds, a badge now names the shader when it fails to load and how to fix it.
  • 1.0.0 2026-09-30 First release.

Parameters

How fast the colour fields move. 0 holds them still.

How strongly the colour fields show over the background.

Film-grain noise that hides gradient banding.

Darkens the edges to pull focus to the centre.

Drift wanders the fields freely; swirl circles them around the centre.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Aurora Background Component to this Flutter app. Call get_export with componentId "aurora-background" and parameters {"colorA":"7C5CFF","colorB":"22D3EE","colorC":"F472B6","background":"070A1A","speed":0.35,"intensity":0.85,"grain":0.04,"vignette":true,"flow":"drift"}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/aurora-background?colorA=7C5CFF&colorB=22D3EE&colorC=F472B6&background=070A1A&speed=0.35&intensity=0.85&grain=0.04&vignette=true&flow=drift)