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:

<script type="module" src="https://cdn.jsdelivr.net/gh/ShazMoghaddam/[email protected]/dist/bezel.min.js"></script> <bezel-clock variant="relief" theme="ember"></bezel-clock>

Enter fullscreen mode

Exit fullscreen mode

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…