Team Goal
Each person's contribution grows into one shared track in turn until the stack passes the target mark.
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, useMemo, useRef, useState } from "react";
import {
animate,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,
useTransform,About this pattern
A goal nobody hit alone. Contributions fill the same track one after another, each person's monogram coming up to full as their share lands, so the total can be read as people rather than as one anonymous quantity. The running figure counts along with the fill on the same window and curve, which means the number and the track are never telling different stories. Three choices carry the restraint. Nothing here springs — a collective total that overshoots is claiming work the team did not do, so every share is a decelerating tween that stops where the data stops. Shares separate by weight of a single hue rather than by four colours, because a shared goal painted four ways reads as four goals. And the acknowledgement is bound to the running value rather than to a timer, so the words can never appear while the track is still short of the mark.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Leaderboard
A club's combined distance filling toward a shared target with members named alongside.