Pocket: Phone Mockup OTP Screen

Users verify faster when they understand what is happening. Pocket pairs a classic 4-digit code input with an illustrated phone: its screen shows a padlock and masked code, a glowing border spins while the code is checked, and the phone unlocks to green ticks with a drawn success checkmark below. Floating shield and mail badges complete a friendly, trustworthy dark card. Pure React and CSS, no animation library required.

A phone that reacts to the code

The CSS phone mockup (notch, status bar, side buttons) moves through locked, verifying and unlocked states: the padlock opens, the asterisks become ticks and the button changes from Verify to Verified.

Zero dependencies beyond React

All animation is CSS keyframes and transitions in a single stylesheet, so it is light, fast and easy to restyle in any React project.

Features

• ✓4-digit OTP input with auto-advance
• ✓Backspace and arrow-key navigation, paste support
• ✓Illustrated CSS phone mockup with locked, verifying and verified states
• ✓Rotating glow border while verifying
• ✓Floating shield and mail badges
• ✓Animated heading: verify, verifying, verified
• ✓SVG success tick drawn with CSS
• ✓Resend button with status message
• ✓No animation library: React + plain CSS

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

• Phone-number verification during sign-up
• Two-factor authentication screens
• Delivery, ride-hailing and marketplace apps
• Banking and wallet onboarding

From download to production

1. Download Pocket: Phone Mockup OTP Screen 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.