Focus blocks timeline

A day as one path stepping between three levels — break, normal, deep — each block coloured by level and placed by time. Move along it and a cursor follows, the header shows the exact time and phase, and the block under the cursor stays lit while the rest dim.

What it is

A day as one path stepping between three levels — break, normal, deep — each block coloured by level and placed by time. Move along it and a cursor follows, the header shows the exact time and phase, and the block under the cursor stays lit while the rest dim. For focus and time-tracking apps, sleep stages, energy levels, machine states — anything that changes level over a day.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 6 集「10 个图表交互控件」· 05 专注分段图 · 0:36