Challenge Complete
A seal presses onto the finished challenge card and settles a couple of degrees off square.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Challenge Complete Stamp
*
* A seal pressed onto a finished challenge card. It arrives slightly
* oversized and off-angle, then compresses onto the paper and settles aAbout this pattern
A completion mark that behaves like something physically applied. The seal approaches slightly oversized and further off-angle than it will end up, compresses onto the card on an over-damped spring, and rotates back a few degrees as it lands. The construction is three nested elements with one job each: the outer holds the angle, the middle holds the press, and the wordmark sits on a layer that only fades. That separation exists because lettering caught inside a scaling parent reads as a sticker being enlarged, which is the exact opposite of an impression. The seal is drawn entirely in inline SVG — rings, dashes and tick marks generated from a loop — so nothing has to ship alongside the copied file.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
A completion mark applied over a finished programme card.
Related patterns
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Goal Ring CloseAn activity ring runs out the last of its gap, the caps meet, and the total settles once.
- Leaderboard ClimbYour row travels up the board while the rows it passes slide down to make the space.