Rank Promotion
The old tier ring fades while the new tier's ring strokes itself around the badge.
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, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Rank Badge Promote
*
* Moving up a tier. The old ring fades out while the new tier's ring
* draws itself around the badge from twelve o'clock, the rank glyphAbout this pattern
Crossing into the next tier. The outgoing ring only fades — animating two rings around the circle at the same time would read as a spinner — while the incoming one draws from twelve o'clock in the new tier's colour, and the badge gives a single three-percent settle as the stroke closes. Drawing rather than crossfading is what makes this a promotion instead of a swap: the stroke has a start, a direction and a finish, so the new standing is something built around the wearer. The rank glyph is stacked chevrons rather than a numeral, so the mark that changes is drawn artwork and no text is ever caught scaling; the tier name below crossfades in a fixed-height slot.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Medallion tier card changing colour and insignia on qualification.
Related patterns
- Certificate IssueThe border strokes itself around the sheet, the seal settles on, and the name is written last.
- Trophy Shelf AddA new award settles into the first slot while the awards already there slide over to make room.
- Year in Review StatA headline figure counts up over two deliberate seconds, then the line that explains it arrives.