Tracing beam timeline

Use it for

• Order, booking or project histories
• Changelogs and step by step guides that read top to bottom

Avoid

• Short timelines of two or three items, which fit on screen anyway
• Places where entries must be compared, not read in order

How it works

A scroll listener on the container schedules a requestAnimationFrame update. The beam tip is placed 60 percent down the visible area; its distance from the top of the list becomes a scaleY on the fill element, so only transform changes. Every entry whose top is above the tip gets an active class that colours its dot and raises its opacity.

Accessibility

The timeline is an ordered list with real time elements, so it reads correctly without the beam. The line and dots are aria-hidden. Reduced motion shows the line full and every entry active.