This is a Rive UI component designed to behave like a real app control: one click starts the stopwatch, while a second click within the interaction window resets it. The behavior is handled inside Rive through State Machine timing and animation layers, without relying on an external timer or click-counting script.

UI motion and interaction design

Stopwatch animation states

Click and reset behavior

State Machine timing logic

Reusable Rive component structure

The component needed to detect a second click at the right moment without adding unnecessary external code. The solution uses a short empty animation state as a listening window, then routes the next click to either reset or return to idle.

Why it matters This kind of component can be handed to a product team as a lightweight interactive asset rather than recreated as a separate animation and engineering task.

Click starts the stopwatch. First click moves the state machine out of idle and into running.

Click logs a lap. A second click plays the "Add Lap" animation.

Exit Time opens a listening window. Once the lap animation finishes (Exit Time 100%), the state machine drops into a separate, empty timeline, a couple of frames long, no keyframes, built purely to wait.

That empty timeline is the double-click detector. If a click comes in during that short window, the state machine transitions to Reset. If nothing comes in, it transitions back to idle and waits for the next lap.

Result: double-click detection built entirely out of state machine timing, no external timers, no click-counting code, just an empty animation doing one job.

Rive Animator

Interactive Designer

UI Designer

Tools: Rive.