Glowing Light Wave 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, one of the keys of BRANDS. The ground is the brand's background and the light is built from its accent. Ember is the classic gold on near-black; a dark brand works best, since light needs a dark ground to glow on.

  now: ember

• Colors

  colors · array

  Your own colours as hex strings; empty uses the brand's accent colours. In order: the ribbon, the highlight where it folds, the glow around it, the frayed strands and sparks. Give just one and the other three are derived from it.

  now: 0 items

• Speed

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

  How quickly the wave flows and twists. Each step is a whole-number multiple of the base motion (1, 2 or 3 cycles per 10 seconds), so the loop stays seamless at every speed; the slow sway of the whole ribbon always takes the full 10 seconds. Slow sits best behind a long talking segment; fast suits a short title card.

  now: normal

• Grain

  grain · number

  Film grain strength, 0 to 1. Besides the texture it stops the glow from banding after upload compression. 0.35 is subtle; 0 turns it off.

  now: 0.35

• Safe area

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

  Where your text will sit. center dims the middle of the ribbon so a centred title reads on it; left drops the ribbon lower on the left and calms that side for a left-aligned title; none keeps the whole wave at full brightness.

  now: center

• Vignette

  vignette · number

  How much the corners darken, 0 to 1. It keeps the eye on the light and the frame edges close to black. 0 for an even frame.

  now: 0.55

• Filaments

  filaments · number

  How many fine strands make up the ribbon. Around 70 reads as a silky sheet of light; 30 reads as separate lines; past 100 it becomes one solid glowing band.

  now: 72

• Glow

  glow · number

  How much soft light the ribbon throws around itself, 0 to 1. Lower keeps it crisp and graphic; higher makes it bloom like a long exposure.

  now: 0.7