Idle Loops

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.

• Name

  name · string

  The name set under the mark. Leave it empty to show the icon alone, for example as a watermark loop.

  now: Harbor

• Glyph

  glyph · "wave" | "spark" | "ring" | "leaf"

  Which drawn mark sits on the icon. They are stand-ins: replace the Mark function with your own logo's SVG to use this as your logo's idle loop.

  now: wave

• Motion

  motion · "float" | "breathe" | "wobble" | "orbit" | "tilt"

  How the icon idles. 'float' rises and settles over its shadow (the classic app-icon idle); 'breathe' swells and relaxes in place; 'wobble' rocks like a balanced object; 'orbit' drifts on a small ellipse; 'tilt' turns in 3D so the light slides across its glass.

  now: float

• Cycles

  cycles · number

  Whole idle cycles in the 10-second loop. 1 is slow and calm, 2 is the default, 4 is lively. Whole numbers only, which is what keeps the loop seamless.

  now: 2

• Amplitude

  amplitude · number

  Multiplier on every movement. Above about 1.4 the motion starts to compete with the mark; below 0.6 it reads as a still on a small screen.

  now: 1

• Grain

  grain · number

  Film grain over the ground, 0 to 1. It keeps the gradient from banding after YouTube or Instagram re-compress the video. 0 for a perfectly clean frame.

  now: 0.35

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS. The icon takes the accent, the ground the brand's paper or canvas colour.

  now: linen