Time Scrubber

Live Interactive Stage

The Time Scrubber is a tactile physical time dial designed for precision time exploration. Dragging the ruler moves time under a fixed center mark; flinging it coasts with realistic finger momentum and settles onto the nearest step via a calibrated spring simulation.

Engineering Highlights

• Live Second-Advancing Ruler: When seconds mode is enabled, the entire dial moves in real-time with sub-second continuous 60fps sweeping or synchronized physical 1-second ticks.
• Rolling Digits with Motion Blur: Digit cells fade through top and bottom vertical gradient masks, smearing dynamically with directional CSS blur keyframes on every step change.
• Unified Throw and Snap Spring: On pointer release, the final landing target is calculated immediately based on velocity and momentum carry. A single critically damped spring brings the ruler to rest with zero seam between gliding and snapping.
• Full-Width Responsive Instrument: Scales from a compact 340px control card to an expansive edge-to-edge timeline console.
• Micro-haptic Audio Feedback: Synthesizes tactile clicks using Web Audio API as step intervals and hours pass under the needle without external audio assets.
• Horizontal Wheel & Trackpad Swiping: Native horizontal scroll gestures interact directly with the ruler dial.

Installation

Usage

1. Full-Width Live Clock with Seconds

Expands edge-to-edge with continuous 60fps moving ruler ticks and rolling seconds.

import { TimeScrubber } from "@/components/time-scrubber"
export function LiveFullDial() {  return (    <TimeScrubber      timeZone="Asia/Ho_Chi_Minh"      format="12h"      showSeconds={true}      fullWidth={true}      live={true}      tickMode="smooth"      showReset={true}      sound={false}      step={5}    />  )}

2. Basic Interactive Minute Scrubber

Default 15-minute snapping step with fling momentum.

import { TimeScrubber } from "@/components/time-scrubber"
export function MinuteScrubber() {  return (    <TimeScrubber      step={15}      momentum={50}      format="12h"      onChange={(mins, info) => console.log(info.time, info.mer)}    />  )}

3. High-Precision 24-Hour Scrubber

Fine-grained 1-second steps with 24-hour format.

import { TimeScrubber } from "@/components/time-scrubber"
export function PrecisionScrubber() {  return (    <TimeScrubber      format="24h"      showSeconds={true}      step={1}      momentum={40}      start={14 * 3600} // 14:00:00    />  )}

Props