Wavy progress bar
The seek bar draws as a thin sine wave. The played part is the accent color, the buffered part is light, and the rest of the track is dark, so the accent line looks like it swallows the dark one as the video plays. On chaptered videos the wave stays continuous across the gaps between chapters.
Settings
Section titled “Settings”The switch is Watch page → Wavy progress bar, off by default.
| Option | Default |
|---|---|
| Animate wave | On |
With Animate wave off, the wave stays still. Reduced motion in your system settings also turns the drift off.
How it works
Section titled “How it works”- YouTube moves the played fill with an inline
transform: scaleX(p), which would stretch a masked wave. Kempt draws the track, buffered part and played part as three unscaled wave layers per chapter segment, and clips the last two to the buffered and played fractions it copies from YouTube’s own fills. - The fractions update on media events (
timeupdate,progress,seeked,durationchange,loadedmetadata) and while you drag on the bar. There are no timers and no per-frame observer. A smallMutationObserveron the bar alone catches YouTube rebuilding its chapter segments. - The drift is a
transformanimation, so it runs on the compositor and repaints nothing. It runs only while the video plays and the controls are showing. Pausing freezes the wave where it is, and hiding the controls pauses it. - On a chaptered video with 30 segments, one update took about 0.2 ms on
timeupdateand 0.3 ms onpointermovein a headless Firefox run. GPU and power use are unmeasured.