Vertical Timeline

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.

• Title *

  title · string

  The chronology's title, top-left. Break it yourself with a newline — the lines are wiped on one after another, so break where you would break it by hand. Two lines is the design.

  now: Eight years to overnight success

• Events *

  events · array

  The dated nodes, earliest first. Four or five is the readable count in a vertical frame; six is the ceiling and it will start forcing the spacing even. Entries are sorted by `at` before they are laid out, so an out-of-order array still draws top-to-bottom in time.

  now: 5 items

• Spacing

  spacing · "measured" | "even"

  'measured' puts every node at its true position on a continuous axis, so the gaps carry meaning — this is the whole point of the component. 'even' distributes them at equal pitch, which is worth it only when the dates are ordinal rather than real ('Chapter 1..5'); it also hides the gradation ticks, because a regular ruler beside evenly-placed nodes would be a lie.

  now: measured

• Gradations

  gradations · boolean

  Rule the left of the spine with regular ticks at a round interval picked from the span. They are what makes the irregular node spacing legible AS irregular — without a regular mark to measure against, uneven gaps just look like uneven layout.

  now: true

• Interval

  interval · boolean

  Annotate the longest gap in the chronology with a dimension line and the time it covers. This is the payoff of a measured axis — the quiet stretch where nothing happened is usually the story — so turn it off only when the events are evenly paced anyway.

  now: true

• Interval unit

  intervalUnit · string

  The unit the dimension line is written in, matching whatever `at` counts. 'years', 'months', 'days', 'km'. A trailing 's' is dropped automatically when the figure comes out at exactly one.

  now: years

• Highlight

  highlight · number

  Zero-based index into `events` of the entry to emphasise — its node fills accent, its date turns accent and a ring opens off it once, as a second beat after the whole chronology is drawn. Defaults to the last entry, which for a 'how we got here' is almost always the right one.

  now: 4

• Caption zone

  captionZone · number

  Percent of the frame height reserved at the bottom for the platform's captions, title and sound credit. It is a real layout input here rather than a guide: the axis runs the full height of the frame, so this number is what decides how long the axis is and therefore how far apart the nodes can sit. 21 clears Shorts and Reels; raise it towards 28 for a long title or a pinned comment.

  now: 21

• Brand

  brand · string

  Brand token id — one of the keys of BRANDS. Written for `field`: a chronology is a record, and a record belongs on warm paper rather than on a screen. `press` and `paper` also read as print. The dark palettes work — the ground and the sheen invert — but the frame stops being a page.

  now: field