---
id: "2115738096801042711"
source: https://x.com/godlydotdesign/status/2115738096801042711
author: "Godly Design (@godlydotdesign)"
media: "video, 1160x1032, 13.8s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Glass Focus Timer With Score Gauge

## Summary
A small desktop focus and break timer panel in warm translucent glass over an orange wallpaper, switching between a "Now" view with a large countdown and quick action pills and a "Stats" view with a two-ring semicircle score gauge and focus metrics. It is a tidy reference for compact glass widgets: clear hierarchy, tinted icon tiles and a soft blurred tab transition.

## Style
- Theme: dark (warm translucent glass)
- Mood: calm, focused, warm, polished, friendly
- Tags: glassmorphism, timer, gauge, segmented-control, desktop-widget, stats, menubar-app
- Category: Components

## Palette
| Role | Hex |
|---|---|
| Wallpaper orange | #E6923C |
| Wallpaper red | #CB502A |
| Panel brown | #5C3506 |
| Panel deep | #692A04 |
| Panel amber | #713C0A |
| Wallpaper navy | #141B2B |
| Gauge magenta | #D94BE0 |
| Gauge gold | #E2B43A |

## Typography
- Countdown ("24:29"): rounded sans, bold 700, tabular figures, about 9% of frame height, white. Nunito (800) or SF Pro Rounded stand-in.
- Score number ("100"): same rounded bold, slightly smaller, centred in the gauge.
- Labels ("Break starts in", "Today's Screen Score", row titles): sans medium 13px equivalent, white at 70 to 90% opacity. Inter (500).
- Values ("5 mins", "60/60", "6h 11m"): sans semibold, right aligned, white. Inter (600).
- Pills ("Start break now", "+1m", "+5m", "Now", "Stats"): sans medium 12px. Inter (500).

## Layout
- Roughly 9:8 canvas (1160x1032); the panel is about 72% of the width, centred, with 28px corner radius and a 1px light inner border.
- Header: centred segmented control (about 160x26px, pill) and a gear with chevron at the far right.
- Now view: centred column with an hourglass glyph, label, countdown, and a row of three pills with 8px gaps; below, two full-width list rows about 40px tall with 12px radius on a slightly lighter fill.
- Stats view: a date pill flanked by round prev and next arrow buttons, the gauge (about 140px wide), a two-line centred message, then a rounded card with a Focus Score row and a bullet list of three metrics.
- Spacing on an 8px rhythm, 16 to 20px panel padding.

## Elements
- Glass panel: backdrop blur over the wallpaper with a dark warm tint and a subtle top highlight.
- Segmented control: active segment is a lighter translucent pill.
- Hourglass outline icon.
- Pills: "Start break now" filled translucent white, "+1m" and "+5m" outlined with 1px white at 30%.
- Icon tiles (20px, 6px radius): yellow tile with a lightning bolt, pink tile with a moon or eye glyph.
- Gauge: outer gold arc with dotted ticks and an inner magenta arc, both 270 to 180deg semicircles with round caps.
- Metric list with small yellow bullet dots.

## Motion
- The countdown ticks every second (24:29, 24:22, 24:17) with digits swapping in place.
- About 2s and 9s: tapping "Stats" slides the active segment pill across in about 250ms (spring) and cross-fades the views with a 6px blur and slight scale (0.98 to 1), about 350ms.
- The gauge arcs sweep from 0 to full over about 800ms ease-out and the number counts up to 100.
- About 5s and 12s: switching back reverses the blur cross-fade; the panel never moves.

## Rebuild it
1. Panel: `w-[420px] rounded-[28px] bg-[#5C3506]/70 backdrop-blur-2xl border border-white/10 shadow-2xl p-5 text-white` over a warm gradient wallpaper.
2. Segmented control: two buttons in `rounded-full bg-black/20 p-0.5`; animate the active background with a shared Motion `layoutId`.
3. Views: `AnimatePresence mode="popLayout"` with `initial={{opacity:0,filter:'blur(6px)',scale:0.98}}` and 0.35s duration.
4. Countdown: a `useEffect` interval; render digits with `font-variant-numeric: tabular-nums` and animate changed digits with y 6px.
5. Gauge: two SVG arcs (`stroke-linecap: round`, widths 8 and 10px) animated with `pathLength`; count the number with `animate()` from 0 to 100.
6. Rows: `flex justify-between items-center rounded-xl bg-white/5 px-3 h-10` with 20px icon tiles `rounded-md`.

## Generation prompt
A close-up screen capture of a compact desktop focus timer widget made of warm smoky translucent glass over a vivid orange and navy abstract wallpaper: a Now and Stats segmented toggle, a large white rounded countdown, small pill buttons, list rows with yellow and pink icon tiles, and a stats view with a gold and magenta semicircle gauge reading 100; soft blur transitions, calm and polished, no logos.