Building a business hours widget
An embeddable widget that auto-detects open/closed status, shows a live analog clock, and expands to reveal the full weekly schedule. Built with React, Framer Motion, and Tailwind.
The problem
Most business hours widgets are either a static table or a basic "Open/Closed" badge. They tell you the state but don't help you plan. You still have to do the mental math: "It's 4:47 PM, they close at 6, so I have about an hour."
I wanted to build something that does that thinking for you, feels alive, and is embeddable on any site with one line of code.
State logic
Key decisions
SVG over canvas for the clock
I started with a canvas-rendered clock. It worked but screenshots were blurry. Canvas renders at a fixed pixel resolution. When you zoom or scale the page, you're stretching bitmap pixels. SVG is vector, so every line, circle, and hand stays razor sharp at any size. The second hand color changes based on status: green when open, red when closed, amber when closing soon.
Three font weights, not five
Early versions used weights from 400 to 800. The heading at 800 looked like it was shouting. I settled on three: 600 for the heading, 500 for labels and active items, 400 for everything else. Size and color create the hierarchy. Weight just separates the heading from the rest.
Human-friendly time language
Instead of "Closed. Opens Tuesday 9:00 AM", the widget says "Back in 10 hours" or "Back in 1 day 3h". It calculates the actual time delta so you don't have to. When open, it shows remaining time: "43 min remaining" when you're under an hour, so you know if you still have time.
Progress bar as a time map
The gradient bar fills through the business day. At a glance you can see roughly where you are in the day's hours without reading any numbers. The color shifts from green to amber in the last hour as a subtle warning.
Frosted glass card
The card uses backdrop-blur with 72% white opacity. This lets it sit on any background. A status-colored glow radiates behind the top edge, so the card subtly tints green when open or red when closed. The effect is ambient, not in your face.
Typography scale
Layout structure
Built with
Takeaway
The details that make a widget feel "designed" are mostly invisible: the right font weight, human-friendly copy, a clock that actually ticks. None of these are hard to build. They just require caring enough to do it.