Tide: Glass OTP Verification with Sound

Tide makes entering a code feel tactile. Each digit drops water into its frosted glass slot with a rising tone generated live by the Web Audio API. Complete the code and the four slots slide together into a single glass card that fills with a violet tide, bubbles and a verified tick, with splash and success sounds to match. No audio files, no extra animation assets: just React, Framer Motion and CSS.

Sound design built in

Four synthesised effects (drop, splash, fill and success) are generated with the Web Audio API in src/utils/sounds.js, so there is nothing to download and every sound is easy to retune or mute.

A phased glass-and-water sequence

A small state machine drives the animation: digits fill their slots, the gaps close, the glass morphs into one card and the master water rises before the verified state appears.

Features

• ✓4-digit OTP input with water fill per digit
• ✓Glass slots that merge into a single verified card
• ✓Rising master-water wave with bubbles
• ✓Synthesised Web Audio sound effects (drop, splash, fill, success)
• ✓Phase state machine with tunable durations
• ✓Resend OTP button with 30-second countdown
• ✓Masked phone number and security badges (Encrypted, Secure, Private)
• ✓Auto-advance, backspace navigation and paste support
• ✓Accessible labels for every digit
• ✓Framer Motion variants and 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

• Mobile-number verification in fintech and wallet apps
• Gaming and entertainment account sign-ups
• 2FA for dashboards and SaaS tools
• Showcase micro-interactions for portfolios

From download to production

1. Download Tide: Glass OTP Verification with Sound 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.