Grain Gradient 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 token id, one of the keys of BRANDS. The default, sky, gives lavender, peach and cyan melting on a pale sky ground. Any light brand keeps the frame light and airy; a dark brand turns the same mesh into a dusk glow.

  now: sky

• Colors

  colors · array

  Your own colours as hex strings; empty uses the brand's accent colours. Up to four, used in order: the main colour (left), the warm one (top right), the second colour (low right) and a pale one that keeps the frame light and is what the text area softens toward. Give fewer than four and the rest come from the brand.

  now: 0 items

• Speed

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

  How fast the colours orbit. Each step is a whole number of orbits per 10 second loop (slow 1, normal 2, fast 3), which is what keeps the loop seamless. Slow behind a talking head or a long read, fast for a title card you only hold for a moment.

  now: normal

• Grain

  grain · number

  Film grain strength, 0 to 1. Around 0.5 is the grainy gradient look: visible up close, smooth from across the room, and it stops the gradient banding after YouTube compression. 0 is a clean gradient; above 0.8 the grain becomes a texture in its own right.

  now: 0.5

• Safe area

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

  Where your text will sit. center softens the middle of the frame, left softens the left half for a left-aligned headline, none keeps the colour even everywhere. The softened area stays tinted, never blank.

  now: center

• Vignette

  vignette · number

  How much the frame edges fade back into the brand's ground colour, 0 to 1. The default blooms the colour out of the page, the way a website hero gradient does. 0 lets the colour run all the way to the edges.

  now: 0.7

• Swirl

  swirl · number

  How much the seams between the colours bend, 0 to 1. 0 is a clean four-colour blend, around 0.5 folds the colours into soft curves like silk, 1 marbles them.

  now: 0.5

• Intensity

  intensity · number

  How deep the colours go, 0 to 1. 1 uses them at full strength; lower values wash them toward the pale colour for a softer, airier frame. Below about 0.5 on a light brand the colours fade to pastel and the frame reads almost white.

  now: 0.82