Browser Chrome

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.

• Url

  url · string

  The address typed into the omnibox, one character at a time. Everything before the first '/' is read as the host and set in full-strength ink; the path dims behind it, the way a real browser weights it. Leave the scheme off, browsers hide it. 20–45 characters reads best; the keystroke schedule fits itself to the length.

  now: motionregistry.dev/browser-chrome

• Tab title

  tabTitle · string

  Label in the active tab, beside a favicon square carrying its first letter. The tab is roughly a quarter of the window wide, so anything past ~22 characters ellipses.

  now: Motionstash

• Page title

  pageTitle · string

  Display heading of the page that resolves out of the skeleton. Four to seven words; it sets across three-quarters of the page and wraps to a second line.

  now: Draw the chrome, not the screenshot

• Button label

  buttonLabel · string

  Label of the single accent-filled button on the synthesised page. Two or three words, the pill sizes itself to the text.

  now: Copy component

• Secondary label

  secondaryLabel · string

  Label of the hairline ghost button beside it. Empty string for a single button.

  now: View source

• Eyebrow

  eyebrow · string

  Small mono label above the window, led by an accent dash and aligned to the window's left edge. Empty string for none.

  now: Product & UI

• Caption

  caption · string

  One muted line under the window, aligned to the same left edge. Empty string for none.

  now: Chrome drawn in divs and inline SVG — no screenshot, no a…

• Traffic lights

  trafficLights · "mono" | "brand"

  'mono' draws the three window dots in muted ink, which is what a product shot usually wants; 'brand' colours them accent / alt accent / muted for a warmer, more literal frame.

  now: mono

• Lock

  lock · boolean

  Draw the padlock at the head of the address bar. Turn it off for a localhost or intranet address, where a browser would not show one.

  now: true

• Seed

  seed · string

  Seeds the keystroke jitter and the ragged widths of the skeleton rows, which the text rules inherit so the cross-fade lands in register. Change it for a differently-set page of identical duration; the same seed always renders the same frames.

  now: chrome-01

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate