Timeline anticipation
Baucon developer handoff · SOFO operational motion reference
- 01 · In0–120 ms
- 02 · Hold120–440 ms
- 03 · Back440–560 ms
The triangle’s flat edge pulls in 18 px, exposing an amber strip. It holds there, then returns to the dashed line. The tip stays on the dot.
ms
Ready · at rest
0120440560
Move the scrubber to interrupt playback.
Implementation and acceptance
- Start on explicit input. Keep the right edge fixed and move the left edge 18 CSS px inward by 120 ms.
- Hold the offset through 440 ms, then return to the resting inset by 560 ms. Times are measured from the start of playback.
- Let users interrupt playback. Reset returns to 0 ms. Scrubbing pauses playback and renders the selected time.
- Respect reduced motion. Use the same states at 0, 120, 440, and 560 ms as still frames, without animated travel.
- For an integrated timeline, cancel the transition if the timeline is toggled again or resized. Keep the visual offset separate from the event timestamp.
Open this file directly in a browser or inspect its source. The tokens, diagram, and playback code are embedded.