Gild: Gold Glass OTP Verification

Gild is a verification card made to sit in a premium product. A frosted-glass panel with a chamfered, gold-and-silver gradient rim floats over molten black-and-gold artwork, flanked by floating glass arrow chips. Enter four digits and the boxes gather on a dashed orbit, burst into sparkles and ripple into a drawn tick, while the button moves from "Verify & Proceed" to "Verified & Secured". It ships with a resend countdown, validation errors and clean onVerify / onResend callbacks.

Luxury glass, engineered in SVG

The chamfered card and corner chips use SVG clip paths and gradient strokes for a precise gold rim, with backdrop blur and a specular light overlay for real depth.

A complete, reusable component

Pass email, onVerify and onResend props. It handles numeric input, arrow-key navigation, paste, a 45-second resend countdown, an error message for incomplete codes and a verifying spinner.

Features

• ✓Frosted-glass card with chamfered SVG clip path and gold gradient rim
• ✓Floating glass arrow chips
• ✓Orbit, sparkle-burst and ripple success animation with drawn tick
• ✓Verify & Proceed button with verifying spinner and verified state
• ✓45-second resend countdown and resend confirmation
• ✓Validation message for incomplete codes
• ✓Auto-advance, backspace, arrow keys and paste support
• ✓email, onVerify and onResend props
• ✓Framer Motion + Lucide icons
• ✓Plus Jakarta Sans and Space Grotesk typography

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

• Luxury e-commerce and membership log-ins
• Private banking and wealth apps
• Crypto wallets and exchanges
• Premium SaaS account security

From download to production

1. Download Gild: Gold Glass OTP Verification 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.