Timeline Cards

Features

• Strengthened readable roles follow --cards-radius, --buttons-radius, and theme-derived elevation; opening details synchronizes aria-hidden and inert.
• Continuous seismic trace drawn as SVG down a ruled recorder drum, rebuilt from live layout measurements
• Per-milestone event bursts whose zigzag amplitude scales with a Richter-style magnitude value
• Status-aware trace segments: recorded ink, a signal-colored writing segment ending in a blinking pen dot, and dashed queued segments
• Station header with an animated percent readout, a recorded-events caption, and a per-event tick meter
• Expandable channel checklists per event with a live n/m count on each toggle
• Fully respects prefers-reduced-motion

Accessibility

Landmark structure

Single <main> panel with an <h1> heading and an ordered list of events

Progress meter

role="img" with a live aria-label announcing recorded counts

Channel toggles

Native <button> with aria-expanded, aria-controls, and a status-aware aria-label

Operator tags

role="img" with each operator's full name as aria-label and title

Decorative trace

The SVG trace, drum, and magnitude chips are aria-hidden

Keyboard activation

All actions use native buttons that respond to Enter and Space

Focus indicators

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

Reduced motion

prefers-reduced-motion: reduce disables all animations and transitions

Customise it with AI

Open Timeline Cards 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.