Dash is the browser tab I keep open on my second screen, a small dashboard of widgets I built from scratch. Component libraries are full of tables, forms and charts. The widgets I wanted are the ones you reach for in a normal day: a clock worth looking at, a timer that survives a closed tab. Those usually get written off as platform components, which ignores how often they get used and reframed, so the project became an excuse to design them properly, one widget at a time.
The demos below are slices of the real thing. The widgets are all open source, and the repo is on GitHub.
The clock
Designing a simple clockface was bit of a challenge, I tried different clockfaces before settling on a simple, geometric design. The hands are dynamic vector paths drawn from the widget size, so the clock can be scaled to any size and it adapts. The hour hand creeps half a degree per minute rather than snapping between hours, and each hand eases into its new position. The face flips between a light and dark dial based on whether it is daytime in that clock's timezone.
World clocks
This was an extension of the already built clock and the utility to track multiple cities at once. Each city works out its own daylight, so Chennai can wear the light dial while Berlin is still on the dark one. Offsets are computed against your local timezone, and each row notes when a city is already on tomorrow. Polishing the animations and transitions was a big part of this widget, since the same clock component repeating could be jarring visually. So the clocks ease into their new positions, and the hands ease into their new times, so the whole widget feels like a single unit rather than a list of clocks.
The date
Mostly typography: the weekday in red, the day number set huge, and the ISO week number underneath, computed with the Thursday rule from ISO 8601. The widget schedules its own refresh at midnight rather than polling. Taping on the date gives a bit more detail, and an option to configure the action, which in this demo opens Google Calendar in a new tab. The date widget is built to be composable, so it can be used in a larger card with other widgets, or on its own.
The timer
A pomodoro timer that runs in background and chimes in when a phase ends. There is an options to turn on notifications and sound, and to configure the phase lengths. Its more functional than other widgets and there are numerous ways to add more function to it, but for now it is a simple timer that does its job. The timer is built to be composable, so it can be used in a larger card with other widgets, or on its own.
The home group
The anchor widget, and the reason the others exist: local time, date and weather composed into one card. The clock and date here are live and so does the weather and sunlight data. The idea of this widget is to form a single widget that could be composed from other smaller widgets and its size and functionality can be localised to the context it is used in.
I am hoping to add more useful widgets to the repo over time, and to make the existing ones more configurable. The repo is open source, so if you have a widget idea or a feature request, please feel free to contribute or fork from Github.