Goal Ring Close
An activity ring runs out the last of its gap, the caps meet, and the total settles once.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import {
animate,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,
useTransform,About this pattern
The last stretch of a daily target. The arc travels to twelve o'clock where its round leading cap meets the trailing one, and the whole dial gives a single three-percent settle at the exact frame the gap disappears. Two things make this read as instrument rather than toy. The acknowledgement is bound to the arc's own value rather than to a timer, so it can never fire while the dial still shows a gap. And the fill is a decelerating tween instead of a spring — a goal dial that overshoots paints minutes the person did not earn, which is a reporting error dressed up as a flourish. The figure in the middle is driven by the same value as the arc and keeps a constant size throughout.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
Activity dial travelling its last stretch, with the caps meeting at the top.
Related patterns
- Team GoalEach person's contribution grows into one shared track in turn until the stack passes the target mark.
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Challenge CompleteA seal presses onto the finished challenge card and settles a couple of degrees off square.