Opal: Liquid Morph Pay Checkout

Opal turns the moment of payment into a single continuous animation. Tap Pay Now and the button shrinks into a glossy token, flies to the centre and sends ripples across the card as it switches to a dark verification mode. A gradient ring fills to 75 %, a padlock pops open, the ring completes in green and a tick lands before the card settles into an "Order Confirmed" receipt.

Eight-stage motion choreography

Press, shrink, ripple, verify, unlock, check, reveal and confirm are modelled as explicit steps with shared-layout transitions (Framer Motion layoutId), so the button genuinely becomes the token instead of being swapped out.

A real payment-method picker

Tap the "Pay with" row to open a payment-methods panel with card, Google Pay and Apple Pay options and an inline card form that expands when card is selected.

Features

• ✓Pay button that morphs into a liquid token (shared layout animation)
• ✓Expanding ripple rings across the card
• ✓Light-to-dark mode switch during verification
• ✓Animated gradient progress ring with live percentage
• ✓Lock, unlock and check icon transitions
• ✓Order-confirmed receipt screen with staggered entrance
• ✓Payment-method panel: card, Google Pay, Apple Pay
• ✓Inline card form with expand/collapse
• ✓Order summary and amount sections
• ✓Replay/reset support built into the state machine

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• Mobile and web checkouts
• Wallet top-ups and peer-to-peer payments
• Subscription confirmation screens
• Dribbble-style motion showcases

From download to production

1. Download Opal: Liquid Morph Pay Checkout from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.