---
id: "2115540373762150529"
source: https://x.com/RaminNasibov/status/2115540373762150529
author: "Ramin Nasibov (@RaminNasibov)"
media: "video, 1440x1440, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Glass Restore Progress Widget

## Summary
A frosted glass card floating over a foggy amber photo that shows a photo-restore progress: a dotted ring that lights up as dot-matrix percentage digits count up, three live stats below, and a dotted checkmark when the job is done. It is a lovely example of turning a plain progress indicator into a calm, tactile object with dots, glass and warm light.

## Style
- Theme: mixed (translucent glass over a warm sepia photo)
- Mood: calm, warm, atmospheric, refined
- Tags: glassmorphism, progress-ring, dot-matrix, widget, counter, sepia-photo, status-card
- Category: Components

## Palette
| Role | Hex |
|---|---|
| Deep umber | #453111 |
| Bronze | #8E6C2C |
| Ochre | #B38C3D |
| Gold | #CBA653 |
| Sand | #E6C87D |
| Pale haze | #EFD594 |
| Glass text white | #FFFFFF |

## Typography
- Title: sans medium, about 15px in the 1440px frame, white; status line under it 8px white at 60%. Closest: Outfit 500.
- Centre counter: dot-matrix numerals (each digit a 5x7 grid of round dots), about 60px tall, white, with a small dotted percent sign. Closest: Doto 700 or a custom dot grid.
- Stats: values 13px medium white; labels 8px at 60% with tiny line icons. Outfit 400.

## Layout
- Square 1:1 (1440x1440). Full-bleed photo of a figure standing on a misty shore, toned amber.
- Card centred, about 51% of the width and height, radius about 32px, padding about 24px.
- Glass: white at about 12% alpha, backdrop blur about 24px, 1px inner border white at 25%, very soft shadow.
- Header row: title block left, a small diagonal arrow icon right.
- Ring centred, about 45% of the card width; stats in three equal columns along the bottom.

## Elements
- Progress ring: about 60 small dots around a circle; inactive dots at 30% white, active dots full white, with a larger glowing dot at the leading edge.
- Dot-matrix counter: two digits plus percent sign, inactive cells faintly visible.
- Done state: a checkmark drawn in dots replaces the digits and the full ring is lit.
- Stats: downloaded size (0.0 to 3.8 GB), speed (53, 48, 57 MB/s, then Idle) and remaining time (0:53 down to 0:08, then Done), each with a small icon.
- Collapse arrow in the top-right corner.

## Motion
- 0.3s: 00%, ring empty, stats dashes.
- 1.8s: 25%, the lit arc grows clockwise from 12 o'clock with a bright head dot.
- 3.2s: 55%; 4.6s: 89%; values tick as the arc advances.
- 6.1s: the title changes to the finished state, digits morph to a dotted checkmark (about 300ms), the ring completes.
- 7.5s: reset to 00% for the loop (8s total).
- Progress fill runs about 5.5s with a mild ease-in-out; each dot fades in over about 120ms; counter digits switch in steps; reset is a 300ms fade.

## Rebuild it
1. Background: a full-bleed image with a warm overlay (`bg-[#B38C3D]/30 mix-blend-multiply`).
2. Card: `w-[52%] aspect-square rounded-[32px] bg-white/10 backdrop-blur-xl border border-white/25 p-6 text-white`.
3. Ring: an SVG with 60 circles placed by angle; derive each dot's opacity from `progress >= i / 60`.
4. Drive `progress` with Motion `animate(0, 1, { duration: 5.5, ease: "easeInOut" })` and render the head dot at the current angle with a `drop-shadow` glow.
5. Counter: map each digit to a 5x7 bitmap and render a CSS grid of 6px dots with opacity 1 or 0.15.
6. On completion, swap the digits for a dotted checkmark bitmap with `AnimatePresence`, then reset after 1.4s and loop.

## Generation prompt
A frosted glass status card centred over a misty amber-toned photo of a lone figure on a foggy lakeshore: a dotted circular progress ring with a glowing head dot, large dot-matrix percentage digits in the middle, a small title and three stats for size, speed and time remaining along the bottom; soft warm light, translucent glass, calm and refined UI.