← Vibe Coding
Success Check Reveal
A success badge springs into place while the checkmark draws itself along its path.
feedbackminimalpremiumautomatic · finite · starter · ~0.9s
Variant
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.
135 lines · react + motion only
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Success Check Reveal
*
* A success badge that springs into place while the checkmark
* draws itself along its path.
*About this pattern
Success confirmation for form submits, payments and completed tasks. The circular badge scales in on a soft spring while the checkmark strokes itself in, ending with a quiet settle. It communicates completion clearly without confetti-level drama, which keeps it usable for frequent, low-stakes confirmations as well as one-off payment moments.
Payment confirmedForm submittedTask completedSettings saved
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Task completion check with a small, fast settle.
Related patterns
- Credit Deduct TickA usage balance ticks down to its new figure while the amount taken rises beside it and leaves.
- Clipboard Toasts StackRepeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.
- Offline Banner DropA connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.