Mercury: Liquid OTP Verification Duo

Turn a four-digit code into a tiny piece of fluid motion. Mercury packs two light, friendly verification screens for React. In Liquid Circuit, every digit pours liquid into its box, connecting tubes carry the flow to the next one and, once the code is complete, the boxes swirl, slide together and fuse into one glowing green box with your code confirmed underneath. In Liquid Lock, glass boxes fill with bubbling water, a connector line tracks progress and an animated lock icon unlocks as the code drops into a bouncing success droplet.

Liquid Circuit: a multi-stage fusion sequence

Each digit fills, pauses and then emerges from the liquid with a small bounce. When all four are in, a timed sequence connects, swirls and merges the boxes into a single verified "super box" and shows the confirmed code.

Liquid Lock: water, bubbles and Lottie

Water-filled glass inputs with a moving surface and floating bubbles, a progress connector, and two Lottie animations that swap a locked padlock for a lock with a green tick on success.

Variants included

• Liquid Circuit: Boxes fill with liquid, tubes carry the flow to the next digit, then the boxes swirl and fuse into a green verified box.
• Liquid Lock: Water-filled glass boxes with bubbles, a progress connector, an animated Lottie lock and a bouncing success droplet.

Features

• ✓Two complete OTP verification variants
• ✓Liquid fill animation for every digit
• ✓Connecting tubes that carry the flow between boxes (Liquid Circuit)
• ✓Swirl, merge and fuse success sequence with confirmed code read-out (Liquid Circuit)
• ✓Type anywhere: global keyboard capture (Liquid Circuit)
• ✓Water surface, bubbles and glass shine (Liquid Lock)
• ✓Animated Lottie lock and verified lock icons (Liquid Lock)
• ✓Progress connector line (Liquid Lock)
• ✓Auto-advance, backspace navigation and paste support
• ✓Resend-code link
• ✓Light, clean card layout

What's included
Full JavaScript source code for 2 variants, 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

• Fintech and banking sign-in verification
• Health and wellness app onboarding
• Phone and email confirmation in sign-up flows
• Playful 2FA screens for consumer apps

From download to production

1. Download Mercury: Liquid OTP Verification Duo 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.