The Outsiders Sleep Stages Graph Slide Interaction

This interaction demonstrates a highly responsive horizontal scrubbing gesture on a stacked sleep stages bar graph. As the user drags their finger across the chart, a vertical indicator line snaps to each daily column. A white circular highlight at the bottom of the graph slides smoothly to frame the active day label. Simultaneously, multiple floating tooltips aligned with each sleep stage bar slide horizontally and update their numeric values in real-time. The movement is fluid, utilizing subtle spring physics to make the snapping feel tactile and organic.