Perspective Grid 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. 'signal', near-black with one electric blue, is what this floor is built around. Dark brands suit it best because the horizon is a light source; on a light brand it turns into a blue ink drawing.

  now: signal

• Colors

  colors · array

  Your own colours as hex strings; empty uses the brand's accent colours. The first colours the glow, the sky and the grid lines, the second tints the light on the floor, the third is the thin horizon line itself. Give one and the rest follow from it, including the violet band in the sky. Mid to bright colours work; very dark ones make no glow.

  now: 0 items

• Speed

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

  How fast the floor travels toward you: 3, 6 or 9 grid rows per 10 second loop, with the horizon breathing once, twice or three times. The haze and the camera sway stay slow at every speed. Whole numbers on purpose, so the loop stays seamless. 'slow' sits best behind talking or a long read, 'fast' suits a short title card.

  now: normal

• Grain

  grain · number

  Film grain over the frame, 0 to 1. It keeps the blue sky from banding after YouTube or Instagram re-compress the video. 0.35 is barely visible, 0 turns it off, 1 is a coarse film look.

  now: 0.35

• Safe area

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

  Where your text will sit. 'center' thins the stars and haze in the middle of the sky and sets the horizon just below a centred title. 'left' quietens and darkens the left side and moves the vanishing point to the right, for a headline beside it. 'none' raises the horizon toward the middle and fills the whole sky, for use without text.

  now: center

• Vignette

  vignette · number

  Darkening toward the corners, 0 to 1. It pulls the eye to the horizon. 0 is an even frame; even 1 leaves the corners visible rather than black.

  now: 0.45

• Cells

  cells · number

  Grid density: roughly how many cells span the bottom edge of a 16:9 frame. 6 is bold and graphic, 10 is the balanced default, 16 or more reads as a fine technical mesh.

  now: 10