Secure Checkout Badge
A lock strokes itself shut and the payment fields firm up behind it.
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 · Secure Checkout Badge
*
* The shackle strokes itself shut, the body lands under it, and only
* then do the payment fields firm up and accept input. The order is theAbout this pattern
The payment step coming up ready. The shackle strokes along its own path, the body lands under it, and the fields firm up only after — the order is the claim, because a form that becomes usable at the moment the lock finishes is reporting a state rather than decorating one. The fields were always laid out and simply gain opacity, so nothing reflows as they become usable, and the status line swaps wording inside a fixed-height slot. A security affordance that bounces undercuts the thing it is asserting, so every settle here happens once.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Card fields mount inactive and firm up once the secure frame has loaded.
Related patterns
- Checkout Step ProgressThe finished stage folds into a one-line recap while the following one opens and the rail fills.
- Payment Card FlipA saved card turns on its vertical axis to put the security code where it actually lives.
- Bundle Savings HighlightItems select in turn, a bracket draws down their edge, and the combined saving arrives after it.