Story Ring Progress
A segmented ring traces around the avatar, one arc per clip, then goes quiet.
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 { useCallback, useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Story Ring Progress
*
* One arc per clip, tracing around the avatar. The rate is linear on
* purpose: an eased timer lies about how much time is left. CompletedAbout this pattern
The ring does two jobs at once: it says how much of this clip is left, and how many clips are in the set. Each arc traces at a constant rate — linear, never eased, because an eased timer lies about how much time remains — and the arcs behind it stay filled so the position in the set is always readable. When the last one lands the whole ring drops to a neutral tone, which is the difference between an avatar you have watched and one you have not.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
Segmented ring around an avatar, one arc per clip in the set.
Related patterns
- Goal Ring CloseAn activity ring runs out the last of its gap, the caps meet, and the total settles once.
- Group JoinA joining member's avatar drops into the stack, the others make room, and the count rolls by one.
- Profile Header ParallaxThe cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.