Payment Card Flip
A saved card turns on its vertical axis to put the security code where it actually lives.
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 { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Payment Card Flip
*
* A saved card turns on its vertical axis to put the security code
* where it lives in the real world — on the back — and turns straightAbout this pattern
Asking for a security code in a plain field makes the shopper picture the card and translate. Turning the card instead removes the translation: the sheet rotates about its vertical axis under a real perspective, the back arrives with its stripe and the code field beside it, and turning back returns the summary. Both faces are painted on one sheet with backface visibility off, so nothing ever shows through. Reduced motion keeps both faces and the control and swaps them with a crossfade — the code still gets asked for, just without the rotation.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Billing page
A stored card turns over to reveal the number and details on its reverse.
Related patterns
- Plan Card SpotlightThe light rides the border instead of washing the fill, so the card can say it is the one you are on without getting between you and the price.
- Product Image ZoomThe product magnifies inside its own frame with the transform origin chasing the pointer.
- Paywall RevealArticle text dissolves into the page under a gradient while the upgrade offer rises beneath it.