---
id: "2115750793106395526"
source: https://x.com/nitishkmrk/status/2115750793106395526
author: "Nitish Khagwal (@nitishkmrk)"
media: "video, 1080x1080, 6.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Countdown Timer with Wipe and Wheels

## Summary
A playful timer component that switches between a bright blue running state and a white idle state with a hard vertical wipe, while the digits flip colour exactly at the wipe edge. Setting the time uses rolling drum wheels of chunky rounded numerals and a soft pill Start button. Worth studying for its bold two-state colour system and the tactile number wheels.

## Style
- Theme: mixed (saturated blue running state, white idle state)
- Mood: playful, bold, friendly, snappy
- Tags: timer, wipe-transition, number-wheel, picker, rounded-type, micro-interaction, state-change
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Running blue | #2DA2FA |
| Idle white | #FFFFFF |
| Digits black | #101010 |
| Button blue | #10A5E9 |
| Pill grey | #E6E6E6 |
| Dim overlay grey | #9D9D9D |
| Label grey | #C9C9C9 |

## Typography
- Time digits ("00:04"): heavy rounded sans, black weight, tabular figures, about 18 to 25 percent of the frame width per pair. Nunito (900).
- "TIMER" label: rounded sans, extra bold, uppercase, light grey, about 30 percent of the digit height, right aligned above the seconds. Nunito (800).
- Wheel neighbour digits: same face, faded to grey with a vertical gradient and squashed as they rotate away.
- Start button: rounded sans, bold, sentence case with a solid play triangle. Nunito (700).

## Layout
- 1:1 frame (1080x1080), the component fills it edge to edge.
- Running state: digits right-of-centre, two circular buttons (pause, close) about 26 percent of the frame wide with 8 percent gap, centred horizontally.
- Idle state: "TIMER" label, digits and a pill button stacked; the pill is about 40 percent of the width and 16 percent tall, fully rounded, soft drop shadow.
- Wheels: each two-digit field is a vertical column showing the selected value plus one or two neighbours above and below with fading opacity.
- Flat colour fields only; the circular buttons have a subtle inner tone and a faint shadow.

## Elements
- Pause button: circle in #10A5E9 on the blue field with two white rounded bars.
- Close button: matching circle with a thick white rounded "x".
- Digits: white on blue, black on white; a colon made of two round dots.
- Play pill (paused state): small light grey capsule with a black triangle, appearing to the left of the digits.
- Number wheels: minutes and seconds columns of rounded numerals that scroll vertically with perspective squash and a grey fade.
- Start pill: light grey capsule with play icon and the word "Start".

## Motion
- 0.3s: a vertical wipe sweeps from left to right, blue on one side and white on the other; digits are clipped so the part over blue is white and the part over white is black (about 600ms, ease-in-out).
- 1.5s: a close view of the running state; pause and close buttons scale in (about 250ms spring).
- 2.8s: paused, white state with a play pill sliding in from the left (about 300ms).
- 4.0s: the wheels are dragged; numbers roll with momentum and snap to the nearest value (spring, about 350ms settle).
- 5.2s: pressing Start dims the whole view to grey for about 150ms as a press state.
- 6.5s: the blue field floods back in and the countdown resumes; the clip loops.

## Rebuild it
1. Create a square container (`aspect-square relative overflow-hidden`) with two stacked layers: a white idle layer and a blue running layer (`bg-[#2DA2FA]`).
2. Animate the running layer's `clipPath` from `inset(0 100% 0 0)` to `inset(0 0 0 0)` with Motion (600ms, `ease: [0.65, 0, 0.35, 1]`); render the digits identically in both layers (black in idle, white in running) so the colour split happens at the wipe edge for free.
3. Use `font-family: Nunito; font-weight: 900; font-variant-numeric: tabular-nums` and a large `clamp()` size.
4. Build each wheel as a `motion.div` with `drag="y"` and `dragConstraints`; on drag end, snap to `Math.round(y / rowHeight) * rowHeight` with a spring (`stiffness: 400, damping: 30`); map distance from centre to `opacity` and `scaleY`.
5. Buttons: `rounded-full size-[26%] bg-[#10A5E9] grid place-items-center` with `whileTap={{ scale: 0.92 }}`.
6. Start pill: `rounded-full bg-[#E6E6E6] px-10 py-5 shadow-lg font-bold`, with a brief grey overlay on press.

## Generation prompt
A playful square UI animation of a countdown timer: a bright sky-blue screen with huge chunky rounded white digits and two circular pause and close buttons, then a crisp vertical wipe reveals a white screen where the same digits turn black, followed by rolling number wheels being dragged and a soft grey pill Start button with a play icon, bold friendly rounded typography, flat colours, smooth springy motion, no logos.