Reaction timeline

Use it for

• Video, audio and recording products with timed feedback
• Feature sections about async review and comments
• Any timeline where moments matter more than the whole

Avoid

• Dense comment threads, where pins overlap: group them first
• Autoplaying it with sound or real video in a hero

How it works

One requestAnimationFrame loop advances the playhead and writes the fill scale, the knob position and the time readout through refs; the readout only changes when the shown second does. Each frame checks which markers the playhead crossed since the last one: a reaction spawns a floating icon that removes itself when its CSS animation ends, and a comment opens its bubble through a single state change that a timeout closes. Clicking the track seeks without firing the markers you jumped over.

Accessibility

Play and pause is a real button, the track is a labelled slider with arrow key seeking, and each comment pin is a button whose name is the comment, so the bubble also opens on focus and hover. The loop stops off screen. Reduced motion does not autoplay, shows a comment already open and skips the floating reactions.