How I Built Clocks

01One clock, in IST

I started with a white clock on a quiet gray background. The first result worked, but it came with a header and extra labels. I removed them so the experiment could stand on its own.

02Finding the face

I tried a circular dial inside a gray case, then a more physical treatment with gradients, offset shadows and a shaded flag. After that, I made the dial square and let the ticks follow it. These were useful directions to try before simplifying.

03Simplify the silhouette

The block hands were too fussy. I moved toward thick rounded batons, applied the same treatment to the seconds hand, and returned to one white base on #F2F2F2. The continuous-corner shape became a custom SVG curve inspired by iOS, rather than a native iOS surface.

04From one place to a world canvas

I expanded the idea into five clocks: New Delhi, Cupertino, Tokyo, Sydney and Paris. Night locations got dark faces. I added cardinal numerals, a yellow seconds hand and rounded Google Sans Flex labels. The first picker had selected-clock cards, miniature clocks and time differences above the city list, with New Delhi initially pinned as the default. Getting taps to work on transformed rows took another pass: the hit area stayed flat while the visual content moved.

05Remove what I did not need

The next pass removed the flags and much of the picker copy. I made the clocks 1.5× larger, put circular dials inside the squircle bases, and kept the trigger as a plain plus. Every clock became removable. A nonempty selection persists; an empty saved selection restores the five defaults on refresh.

06Make the depth feel right

The first roll turned the clocks the wrong way. I reversed it into a stronger Cover Flow shape, then flattened the outer clocks again. Spacing needed to be judged between the visible faces, not just between their untransformed boxes. Full-page screenshots were also moving the scroll position, so I switched to viewport-only captures before trusting the motion checks.

07Hands and labels that hold focus

I returned to the hands with a paddle shape: narrower near the pivot, with a consistent-width blade and fully rounded corners. I increased the gaps by 10%, enlarged the center clock slightly, and softened the edge scale from 0.6 to 0.8. Larger city labels and quieter captions made the focused clock easier to read.

The seconds stayed synchronized. These time zones change the hour and minute, not the current second. Relative-day labels and fractional-hour differences are calculated against the device’s timezone, including daylight-saving changes.

08A quieter picker

I removed the selected-clock strip, close button and row-level plus icons. Each city became its own toggle: selected cities stay in the list, turn green and can be tapped again to remove. A moving shared hover capsule felt confusing, and row scaling was another distraction. I removed them in favor of a local fade. The blur also needed care: padding belongs inside the moving content, while the edge effect reaches the panel boundary.

09Scrolling needed more than a snap

The first snap felt like a magnetic pull. A quick flick could still move only one clock, and continued input at the edge could delay the return. I wanted the motion to carry the gesture’s energy, settle into a clock, and give a small bounded stretch when there was nowhere left to go.

Pointer flicks gained a deceleration phase before alignment. Wheel input kept its own handling, because it can already contain momentum from the operating system. New input can interrupt the motion immediately. I also faded the labels toward the edges so they compete less with the clock in focus.

10Make removal feel attached

On the canvas, only the centered clock should be removable. I tried a shrinking barrel turn, reversed it, reduced the angle, then removed rotation altogether. Short pulls needed to come back; an intentional upward flick needed to complete without suddenly disappearing. The minus control also had to stay attached above the clock, with a clear gap.

11The last clock is a state too

I extended the final departure and reduced its scale to 0.4. Removing the last clock now opens focused search automatically. A search with no result gets a handless white clock and a small yellow pivot ring. An empty canvas and an empty search are different states, so both needed an intentional response. Keyboard flows and phone-sized layouts were checked alongside the pointer interactions.

12First, a film of the scroll

The first recording was a square scroll loop. I changed it to 4:3, mixed white and black faces, removed the cursor and plus, and pushed the pace. For these films I fixed the showcase time and choreographed scrolling so the composition could loop. The earlier interaction clips were captures of the running app; the app itself still follows device time.

13Back to the real edges

I renamed the experiment Clocks. After making the first films, I went back to the actual canvas: small wheel packets could still swallow the visible edge stretch. The fix lets a short burst move the whole track, keeps the end clock flat, and returns promptly without building up hidden scroll input.

14Choreograph the interactions

I wanted a short film that revealed the whole experience: one clock, a sweep, the plus morph, picking a city, and both removal gestures. I added a grabbing cursor to make dragging clear. In the film, constant camera moves competed with the interface. Slowing the filmed morph also exposed a gap where the white surface disappeared before the contents appeared.

15Remove the last distractions

I kept the panel centered at 80% of the frame height and picked a city by scrolling, without typing. Fewer recording clocks limited the added-clock glide to two positions. After trying a slower filmed transition, I returned to the app’s own spring and fade timing. The last change was simply keeping the cursor over the selected city and letting it fade out.

The interaction film