Activity rings
Three concentric rings, one goal each. They draw from zero on load while the numbers count up in step, and the ring that beats its goal keeps going round in a darker tint instead of stopping at 100%.
Design Library
Interaction details · Chart widgets
The small chart controls inside an app, rebuilt one interaction at a time: rings that draw from zero, bars that morph instead of redrawing, a goal line you drag, slices that push out under the pointer. Each one runs live, with the numbers it was built from and a prompt that reproduces it.
Streak heatmap
A year laid out as a wall of squares, five shades from nothing to a lot. The wall appears column by column, a missed day is ticked underneath so the break is visible without counting, and clicking any square pops that day's detail out beside it.
Score gauge
One number, shown as a half-circle in three coloured bands. The needle sweeps in from the left, goes a little past the target and settles back; the number counts with it and the verdict under it takes the colour of whichever band the needle is in.
Bar chart with period switch
Week ↔ month without a redraw: bars that exist in both periods slide to their new height, the extra ones rise from the baseline, the missing ones sink away. Tap a bar and it lights up with its value while the rest dim.
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.
Range line morph
1W / 1M / 1Y on one line. Switching range does not redraw: every point slides to where it is in the new data, the area fill under it follows, and the headline number counts across. The line never blinks.
Draggable goal line
A dashed goal across a bar chart with a handle you can drag. As it moves, every bar that clears it lights up and every bar that falls under it goes dark, and the 'days on goal' count in the header follows in real time.
Stacked share bar
A whole day as one bar split by share, with a hairline gap between parts so the pieces stay countable. The parts grow in one after another, and tapping one pulls it up out of the bar with its name and percentage over it.
Share ring
A donut for a handful of categories, drawn slice by slice clockwise on load with the total in the hole. Hover a slice or its legend row and the slice pushes outward while the centre swaps to that category's name and share.
Bubble chart with nudge
One circle per category, area by amount, packed together. Tap one and it grows to show its number while the neighbours it now overlaps get pushed straight away from it — only as far as they need to, and the rest stay put.
Full library — live sample, numbers, prompt and source — is for clients. I have the password