Light Beams 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.

• Beams

  beams · number

  How many stage lights hang above the frame, 3 to 7. 3 is sparse and moody, 5 is the balanced default, 7 is a full concert rig. Beams alternate front and back, so every count has depth.

  now: 5

• Dust

  dust · number

  How much dust floats through the light, 0 to 1. Motes only show where they cross a beam, so even 1 stays tidy. Set 0 for a cleaner, more graphic look.

  now: 0.6

• Colors

  colors · array

  Your own colours as hex strings; empty uses the brand's accent colours. Beams take your colours in turn from left to right, and each beam's centre is lightened toward white so it still reads as light.

  now: 0 items

• Speed

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

  How fast the beams sway and the dust falls. The speeds are whole-number multipliers (1, 2 or 3 sways per beam per loop), which keeps the 10 second loop seamless at every speed. Slow suits podcasts and talking heads; fast suits a music or hype edit.

  now: normal

• Grain

  grain · number

  Film grain over the frame, 0 to 1. It stops the soft light from banding after YouTube or Instagram compression. 0.35 is barely visible; 0 turns it off.

  now: 0.35

• Safe area

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

  Where your text will sit. 'center' dims the middle beam and softens the centre so a headline reads on it; 'left' does the same for the left half, for a title beside a presenter or product; 'none' keeps every beam at full strength.

  now: center

• Vignette

  vignette · number

  Darkening toward the edges and corners, 0 to 1. It keeps the eye on the light and lets the loop sit cleanly on a dark page or next to black bars. 0 for an even frame.

  now: 0.5

• Brand

  brand · string

  Brand palette id, for example slate, ember or dusk. Sets the ground, and the beam colours when no colours are given.

  now: slate