---
id: "2115848102322335811"
source: https://x.com/60fpsdesign/status/2115848102322335811
author: "60fps (@60fpsdesign)"
media: "video, 2160x2160, 7.8s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Expanded Island Timer Ruler Picker

## Summary
A phone concept where the camera cutout expands into a wide black pill holding a horizontal ruler of orange tick marks; you swipe the ruler to set a timer from 0 to 60 minutes and a large thin readout updates live beside a "Start Timer" button. The ticks left of the pointer glow brighter, so the filled amount reads instantly. A tidy example of a physical, tactile control squeezed into a tiny system surface.

## Style
- Theme: dark (black pill on a graphite phone, white backdrop)
- Mood: tactile, precise, warm, minimal, playful
- Tags: dynamic-island, timer, ruler-picker, scrubber, haptic-ui, ios-concept, orange-accent
- Category: Mobile, Components

## Palette
| Role | Hex |
|---|---|
| Phone graphite | #202121 |
| Backdrop white | #FFFFFF |
| Island black | #000000 |
| Frame silver | #BEBFC0 |
| Soft grey | #D9D9D9 |
| Warm shadow | #847370 |
| Timer orange | #FF9F0A |
| Button fill | #3A2412 |

## Typography
- Time readout ("15:00"): thin rounded sans with tabular numerals, orange, about 9% of frame height, right-aligned. SF Pro Rounded Light; closest free option Nunito Light or Inter Light with tabular-nums.
- Ruler labels (0, 5, 10...): small semibold sans numerals, orange, about 2.5% of frame height, centred above every fifth tick; labels near the edges fade out.
- Button label ("Start Timer"): medium sans, sentence case, orange, about 2.8% of frame height. Inter Medium.

## Layout
- 1:1 frame (2160x2160) showing the top half of a phone, centred, on white with a soft right-side drop shadow.
- Expanded island: about 82% of the phone width, 40px corner radius at 1x (proportional to the device curve), 18px inner padding.
- Two rows inside: the ruler row on top (labels above ticks, a small triangle pointer below the centre tick), then a row with the pill button on the left and the readout on the right.
- Ruler ticks: 2px wide, 24px tall, 6px gap, with a horizontal fade mask on both ends (about 15% of the width).
- Pill button: about 120x36px, fully rounded, dark brown fill.

## Elements
- Phone shell: graphite body with silver rim, side buttons visible, a darker gradient screen.
- Expanded island pill: pure black, holding the whole control.
- Tick ruler: one tick per minute; ticks at or below the selected value are bright orange, the rest are dim orange at about 35% opacity.
- Centre pointer: 8px orange triangle pointing up under the selected tick.
- Readout: large minute and seconds value, updating with every tick crossed.
- Start Timer button: brown pill with orange text.
- Small heart icon and a large faded number in the bottom-right corner of the frame (decor of the clip).

## Motion
- 0 to 7800ms: the ruler is dragged left and right repeatedly (15, 6, 45, 53, 32, 1 minutes), roughly one gesture every 1400ms.
- The ruler follows the finger 1:1, then settles with momentum and snaps to the nearest minute (spring, stiffness about 400, damping 35, about 250ms).
- Each tick crossing updates the readout instantly with no tween; a real build would pair it with a light haptic.
- When the value reaches 0 the ruler pins its left edge at the pointer, so the empty side shows blank space.
- Lit ticks change colour immediately as they cross the pointer (no fade).

## Rebuild it
1. React component: a `div` with `rounded-[40px] bg-black p-4` at about 360px wide, containing a ruler row and a controls row.
2. Ruler: a flex strip of 61 ticks (`w-[2px] h-6 rounded-full`), with every fifth tick carrying a numeral label above; wrap it in a container with `mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent)`.
3. Make the strip a Motion `motion.div` with `drag="x"`, `dragConstraints` from the tick count, and `dragTransition={{ power: 0.2, modifyTarget: v => Math.round(v / 8) * 8 }}` for snapping.
4. Derive the minute value with `useTransform(x, v => clamp(Math.round(-v / 8), 0, 60))` and colour ticks by comparing their index to it.
5. Readout: `text-5xl font-light tabular-nums text-[#FF9F0A]`; button: `rounded-full bg-[#3A2412] px-4 h-9 text-[#FF9F0A] font-medium`.
6. Fire `navigator.vibrate(5)` on each value change where supported.

## Generation prompt
Close-up of the top half of a graphite smartphone on a clean white background; the camera cutout has expanded into a wide black pill containing a horizontal ruler of thin glowing orange tick marks labelled 0 to 60, a small orange triangle pointer, a brown pill button reading "Start Timer" and a large thin orange countdown readout; the ruler scrubs left and right and the numbers update, warm, tactile, minimal UI animation.