Kinetic: OTP Verification Animation Pack

The verification step is the moment users wait, so it should reward them. Kinetic gives you six polished 4-digit code screens built with React and Framer Motion. Each one auto-advances between boxes, accepts a pasted code and verifies the moment the last digit lands, then plays its own choreographed success animation. Pick the personality that fits your product and ship it in minutes.

Six distinct success choreographies

Merge, Sparkle, Orbit, Chomp, Burst and Water Drop share the same reliable input logic but end in completely different animations, from a calm merging tick to confetti, shockwaves and a playful chomping box.

Input behaviour users expect

Numeric-only boxes, automatic focus on the next box, backspace to the previous one, full-code paste and auto-verify on completion. The status heading and copy swap smoothly to a verified message.

Variants included

• Merge: The four digit boxes slide into the first one, which pops and draws a white tick.
• Sparkle: Boxes gather on a dashed orbit, then burst into sparkles and a success ripple.
• Orbit: Boxes lock into a 2x2 grid joined by a dotted line, then fire a shockwave and confetti.
• Chomp: The first box turns into a round chomper that eats the other digits, then glows green.
• Burst: A drawn outline, ring pulse and particle burst celebrate the verified code.
• Water Drop: Light card: boxes wiggle, tilt, fuse into a blue droplet and land as a green tick.

Features

• ✓Six complete 4-digit OTP verification variants
• ✓Framer Motion keyframe and spring choreography
• ✓Auto-advance, backspace navigation and paste support
• ✓Auto-verify when the last digit is entered
• ✓Animated SVG tick drawn with pathLength
• ✓Confetti, shockwave, sparkle and particle-burst effects (variant dependent)
• ✓Animated heading swap from "Let's verify your number" to "Verified successfully"
• ✓Resend-code footer
• ✓Dark bottom-sheet style card (five variants) and a light card (Water Drop)
• ✓Each variant is a standalone Vite + React project

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

• Phone and email verification in sign-up flows
• Two-factor authentication (2FA) screens
• Passwordless and magic-code log-ins
• Payment and account-change confirmations

From download to production

1. Download Kinetic: OTP Verification Animation Pack 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.