The Outsiders Sleep Consistency Graph Slide Interaction

This interaction demonstrates a highly tactile way to scrub through data on a bar graph. As the user drags horizontally across the sleep consistency chart, a floating tooltip slides and snaps to the nearest column, updating its time-range text. Simultaneously, the corresponding day label at the bottom of the graph scales up and is highlighted by a smooth-moving white circular background, while inactive labels dim. The spring-based snapping of the tooltip and the fluid movement of the active-state indicator make exploring dense health metrics feel responsive and satisfying.