Overview
Thirty animated, interactive widgets in the style of phone home-screen widgets, each on a deep gradient card with a soft glow and dot-matrix numbers. Pieces (30): Health (8): heart rate with a live ECG line, activity rings, steps, sleep stages, lung capacity test, hydration, average glucose and a guided breathing timer. Weather (6): current weather with a city switch, scrubbable hourly forecast, air quality, UV index, wind compass and sun path. Analytics (6): revenue by week, month or year, live users, conversion funnel, traffic sources, monthly goal gauge and cohort retention. Home (5): a thermostat you turn by dragging or with the arrow keys, dimmable lights, energy use, a timer and a press-and-hold smart lock. Everyday (5): analog and digital clock, week calendar, reminders, a music player and a stock ticker. Every control is a real button, switch or range input with a label, reachable from the keyboard with a visible focus ring. Live data can be paused, and Reduce motion is respected. Built with React 19 and TypeScript, Tailwind CSS 4 and Motion, on Vite 6. Sizes follow widget units (small 1x1, medium 2x1, large 2x2). The interface text is in English, and every label sits next to its widget, so it is easy to rename or translate. Included: the full Vite project with all 30 widgets, the shared card shell and 14 colour tones, the showcase page with category filter, and a buyer guide plus instructions for AI coding agents.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
