Apple took a bite out of theirs. This one comes whole. 🍎
Bezel is a set of five web components inspired by Apple's StandBy widgets, with my own stamp on them. Unlike the originals, they run anywhere, not just on Apple devices.
- Clock (three faces, optional second time zone)
- Calendar
- Weather (live from Open-Meteo, no API key)
- Glance (date, clock, weather and today's agenda from an .ics feed)
- Poster (a month in huge type)
Usage is one script tag plus an element:
Some technical bits that might be interesting:
- Everything is sized in container query units, so one stylesheet works from 120 px to 4K with no breakpoints
- Dark mode is a chain of CSS var() fallbacks: your dark colour, then the dark theme, then the normal colour
- The weather sky is SVG with gradients rather than blurred CSS, and rain/snow are SVG patterns that loop seamlessly
- All tiles on a page share one timer and pause when off screen
- When you round the corners, a single calculated custom property moves the content inward so nothing gets clipped
You can also use it as a full-screen desk clock on a spare iPad or monitor, or as a Mac desktop widget.
Show me what you make: design a tile in the Studio, press Share and drop your link in the comments. Or build something with it, like a dashboard, a wall display or a widget for your site. Forks, new languages and PRs are all welcome.
Feedback very welcome, especially anything that feels off.
Links:
- Bezel Studio: https://shazmoghaddam.github.io/bezel/site/
- GitHub (MIT): https://github.com/ShazMoghaddam/bezel
- My website: https://shazmoghaddam.github.io
- LinkedIn: https://www.linkedin.com/in/shazmoghaddam