Branch Timeline

When to use it

Release timelines, changelogs, CI or VCS surfaces, onboarding docs explaining a branching model — anywhere branch-and-merge structure needs to read at a glance.

When not to

Real repository data with many concurrent branches — lanes are authored, and more than three or four crowd the gutter. Also wide-screen layouts wanting a horizontal graph.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the log array (l lane, h hash, m message, from = branches off that lane, merge = lands from it, tag = release marker) and the LANE map (x percent in the gutter, c colour) — lanes, elbows, dots and rows are all derived, and row spacing follows the commit count. Change the reveal beat with setInterval(advance,820). Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

• theme tokens (:root --pro-* dark defaults + the :root[data-theme="light"] overrides)
• the commit list (log array: lane, hash, message, from/merge, tag)
• lane positions and colours (LANE map: x percent of the gutter, c)
• lane thickness (--btl-w) and elbow radius (.btl-elb border-radius clamp)
• reveal beat (setInterval(advance,820)) and the hold before replay (N+3)
• gutter width (.btl-gut clamp(32px,15%,78px))

Keep intact

• :root --pro-* token block (renaming breaks the shared pro theming API)
• role=img + aria-label on .btl-stage
• IIFE wrapper
• the .snap class + void offsetWidth reflow, which resets without animating backwards
• clip-path inset reveal on .btl-seg/.btl-elb — a top-down wipe matching time flowing downward
• prefers-reduced-motion early return to the fully drawn graph
• visibilitychange pause (halt/play on the interval)
• theme hook (?theme= pre-paint bootstrap + forever:theme message listener + the two-palette token block)

Known limitations

• Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
• Lanes and the commit list are authored, not derived from a repository
• One commit per row at a fixed rhythm — no dates, authors or per-commit spacing
• The hash column is hidden below 300px (media query)

More Hierarchy & Trees components

• Org Tree RevealA three-level engineering org chart of eight people drawn with elbow connectors; the selection walks the org, lighting the whole reporting line from the…
• Collapsible TreeAn indented three-level company tree — divisions, teams, then people — with rotating chevrons, guide rails and headcount pills; on a loop one division…
• Radial HierarchySix divisions sit on an inner ring with their teams fanned out on an outer ring, spokes running back to a central hub; the whole diagram turns slowly…
• Decision TreeAn order-approval decision tree: a risk check branches to a country check and an amount check, fanning out to four outcome pills; each pass lights one…
• Mind Map BranchesSix curved limbs grow outward from a central topic pill one at a time, each sprouting two node dots before landing on a labelled chip with its open-item…