Credit Card Flip Form
A dark payment screen: "CHECKOUT · STEP 2 OF 2" over a bold "Card details" with the total, €248.00, on the right, a live card preview resting on a soft shadow tinted with its own light, four fields with their labels inside (Card number, Cardholder name, Expiry, CVV), a "Save card for next time" switch, a small lock line and a wide "Pay €248.00" pill that stays dark until the card is complete. The card is brushed metal: a fine horizontal grain and wavy guilloche over its colour, a soft light from above its top left, darker towards the bottom edge, a gold chip with a bright rim, a contactless mark, "HALCYON" and an empty dashed slot for the network, bullets for the sixteen digits, "YOUR NAME" and "MM/YY". Each digit typed rolls into place like a slot reel; the first digit names an invented network (Kestrel teal, Vela indigo, Orrery ember, Nimbus blue) whose mark pops into the corner while its colours spread across the card from it and the card swings to catch the light. A frame of light with a comet running round it hugs whichever part of the card is being edited and glides between the number, the name (growing with it) and the expiry, while one ring in the card's light colour glides between the fields below. Finished fields get a green check; an expiry in the past turns its field red as "Card expired". Focusing the CVV turns the card over to its back, with a magnetic stripe, the name signed in script and the frame of light round the CVV box. Dragging on the card tilts it in 3D and its light slides across the surface. Pay folds the button into a spinning ring and then a green circle with a check.
React Native · Expo SDK 52+, TypeScript
✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.