Timer or Clock

Design a timer or clock component for a mobile app. Pick one primary mode — countdown, elapsed timer, or world clock — and make that mode the focus of the screen. The main value should be visible immediately, with supporting labels only where they help explain what the number means.

Treat the control set as the product. Show the core actions for the chosen mode: start, pause, reset, and any mode switch or preset selection that belongs with it. Keep the hierarchy simple so the user can tell what is active, what is available, and what will happen next.

Include at least one alternate state beyond the default: running, paused, finished, or a saved preset view. If you add options like tones, time zones, or visual themes, keep them secondary and make sure they do not compete with the timer/clock itself.

Incorporate engaging animations for transitions like the start and end of a countdown, adding dynamism to the user's interaction.