Sparkle Field Loop

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Brand

  brand · string

  Brand palette id, one of the keys of BRANDS. 'circuit' (deep indigo with violet and teal) is the look this was designed in; any dark brand works, and light brands turn the sparkles into coloured glitter on paper.

  now: circuit

• Colors

  colors · array

  Your own colours as hex strings; empty uses the brand's accent colours. The first is the main nebula glow and the core, the second the smaller counter cloud, the third the small embers, the fourth the faint band and the lavender sparkles. Give one colour for a single-hue sky.

  now: 0 items

• Speed

  speed · "slow" | "normal" | "fast"

  How fast the sparkles rise and twinkle. Each step is a whole-number multiple (1x, 2x, 3x) of the base motion, so the loop stays seamless at every setting. 'slow' is nearly still, good behind a talking head; 'normal' is a calm drift; 'fast' is lively, for a short intro. The nebula breathes at the same slow pace at every speed.

  now: normal

• Grain

  grain · number

  Film grain strength, 0 to 1. A little grain stops the soft nebula from banding once YouTube or Instagram re-compress the video. 0.35 is subtle; 0 turns it off.

  now: 0.35

• Safe area

  safeArea · "center" | "left" | "none"

  Where your text will sit. 'center' calms a soft oval in the middle and puts the nebula in the corners; 'left' calms the left side for a headline and moves the nebula right; 'none' uses the whole frame with the brightest glow across the middle. Sparkles never vanish from the calm zone, they dim so a headline reads over them.

  now: center

• Vignette

  vignette · number

  How much the corners fade back to the background colour, 0 to 1. Around 0.5 frames the sky gently; 0 keeps the stars even right to the edges.

  now: 0.5

• Density

  density · number

  How many sparkles fill the sky, as a multiple of the designed count (about 380 at 1). 0.5 is sparse and airy behind busy text; 1.5 is a dense, glittering field and takes a little longer to render.

  now: 1