minflow

Display

Timeline

Each segment of the connecting line fills with ink as its event crosses the lower third of the viewport, and the marker wakes from faded to full in step with it. The motion is scrubbed by the reader's scroll rather than played on a timer, so it is noticeable but never something to wait for, and it reverses honestly when the reader scrolls back up.

npx shadcn@latest add @minflow/timeline

Where to use it

  • Activity feeds, audit trails, and release histories, where the order is the meaning.
  • Detail panels, where recent history explains the state the reader is looking at.
  • Never for steps a reader has to complete; that ordering is a stepper, not a record of what happened.

Variations

Icons, times, and detail

The full shape. Give each event a glyph for its kind so the column scans by type, and add a detail line only where the title leaves a real question.

  1. Deployed to production2h
    Build 118, no regressions.
  2. Build passed3h
  3. PR 42 merged1d
    Token layer and motion presets.
  4. Branch created2d
  5. Tokens defined2d
  6. Project created3d

Titles only

Narrow panels and long histories. Without icons every marker falls back to a structural ring, which keeps the spine readable at any width.

  1. Invited to the workspaceMar 4
  2. First component publishedMar 9
  3. Joined the design reviewMar 21
  4. Promoted to maintainerApr 2