Timeline

Features

• Semantic ordered-list markup (<ol>/<li>) so the release sequence is meaningful to assistive technology
• Each release leads with a soft rounded icon chip — a pale pastel tint of its per-stage action color (jade green, teal cyan, iris violet, copper amber, orchid pink) holding a 24px Tabler stroke icon in the saturated hue
• A thin neutral connector line runs down the chip axis, linking consecutive releases with no extra DOM
• Mixed-weight activity line per release — bold version tag, mid-gray connective verb, bold release name — above a muted relative timestamp
• Per-release diffstat row — mono +adds −dels counts, a five-cell GitHub-style diff meter, and a short commit hash, all kept small and muted
• The in-progress release renders as a pale-violet full-row pill with a solid violet left accent bar flush to the panel edge and a violet check on the right
• Canary rollout meter on the in-progress release — violet-tinted track, scaleX fill at the rollout fraction, and a looping sheen sweep
• A dashed planned-release stub after the last release — dashed connector continuation, hollow dashed chip, and a v1.2 tag with ETA
• Header carries a left-aligned title and top-right square outlined icon buttons (branch, compact-density toggle)
• Compact-view toggle in the header — the density icon button flips aria-pressed and collapses every release to its activity line and timestamp, hiding descriptions, diffstats, and the canary meter
• Rows stagger-fade in on load using transform and opacity via :nth-child (max 6)
• Full-width Show-More-style follow button — outlined, no lift, pale-violet pressed state with bell fill
• Neutral light-gray page ground with a clean white panel and hairline border
• Responsive panel that adapts padding down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Semantic order

Releases are an <ol> of <li> so sequence is conveyed without visuals

Icon buttons

Header branch/density buttons and the follow button are native <button>s with aria-label

Follow state

Follow button exposes aria-pressed, updated with its label on toggle

Compact state

Header density button exposes aria-pressed, reflecting the compact view

Decorative icons

Chips, checkmark, diff meter, and canary bar are aria-hidden

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Timeline in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the card is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.