Certificate Issue
The border strokes itself around the sheet, the seal settles on, and the name is written last.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Certificate Issue
*
* A certificate being made rather than being shown. The border strokes
* itself around the sheet, the seal settles onto it, and the recipient's
* name arrives last — the order in which the document would actually beAbout this pattern
A certificate being produced rather than displayed. The frame draws as one continuous stroke, an inner rule fades in behind it, the seal lands on the finished sheet, and only then does the recipient's name arrive — the order the document would genuinely be made in, which is what makes the result feel issued to a person instead of rendered from a template. The frame is an explicit rounded-rectangle path rather than a styled element, because stroke length is only dependable on real path geometry and the border has to close as one line instead of four edges appearing together. The seal is inline SVG with a scalloped inner ring, so nothing ships alongside the copied file.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
Completion credential assembled on screen before it can be downloaded.
Related patterns
- Rank PromotionThe old tier ring fades while the new tier's ring strokes itself around the badge.
- 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.