This project is a recreation and enhancement of the popular OTP Animation V10 mobile motion concept. It faithfully translates complex UI choreographies into clean, production-ready, dependency-free web code using HTML5, Vanilla CSS, and JavaScript (Web Animations API).

Unlike typical video-only concept mockups, this repository provides a fully interactive, accessible, and responsive implementation ready to be dropped into web apps, authentication modals, or design systems.

• 🔑 Keyhole & Shackle Physics: Dynamic key approach, rotation, and shackle unlock with spring-like easing driven by the native Web Animations API.
• 🗂️ Morphing Verification Sequence: When verified, the four digit input cards smoothly stack, collapse into a single square, and transition into an animated green checkmark tile.
• 📋 Smart Clipboard Paste Support: Paste a 4-digit code directly (Ctrl+V / Cmd+V) from SMS or an authenticator app; the digits automatically distribute across fields and trigger verification.
• ⌨️ Fluid Keyboard Navigation: Full support for ArrowLeft / ArrowRight, backspace traversal, and automatic focus progression.
• ⚡ Real-time Amber Glowing Tracer: Ambient verification pulse around input boxes while the code is being checked.
• 🛑 Non-intrusive Interactive Showcase: Includes a built-in control bar to test valid codes (4545), trigger error shakes (9999), toggle the lock, or replay the showcase animation without interrupting user typing.
• 📱 100% Responsive & Cross-Device: Adapts seamlessly across desktop monitors, tablets, and smartphones.
• ♿ Accessible & Semantic: Comprehensive ARIA labels, inputmode="numeric", autocomplete="one-time-code", and prefers-reduced-motion compliance.
• 🪶 Zero External Dependencies: No React, no Framer Motion, no heavy bundle. Open and run instantly.

The component includes a developer toolbar for quick testing:

Note: Typing in any input box or clicking any control immediately stops any running autoplay loop so you have full manual control.

No build tools, npm install, or bundlers needed.

git clone https://github.com/MilMit/otp-animation-v10.git
cd otp-animation-v10

Simply double-click index.html in your file explorer, or launch a local static server:

# Using Python
python3 -m http.server 8000

# Or using Node / npx
npx serve .

Visit http://localhost:8000 in your browser.

• Digit Typing: Automatically advances to the next box upon typing a number.
• Backspace: Deletes the current digit; pressing backspace on an empty field moves focus to the previous box.
• Arrow Keys (← / →): Move quickly between digit boxes.
• Paste (Ctrl+V / Cmd+V): Pastes up to 4 numeric digits into the boxes.
• Lock Key / Shackle: Click or press Space/Enter when focused on the lock to toggle its state.
• Close Button (×): Resets the component with a subtle spring dismiss animation.

Open script.js and modify the valid code condition:

// script.js (around line 140)
function verifyNow() {
  // ...
  const code = inputs.map(x => x.value).join('');
  wait(() => {
    if (code === '4545') { // <-- Replace with your validation logic or API call
      triggerSuccessMorph();
    } else {
      triggerError();
    }
  }, 950);
}

All primary colors, radii, and glow parameters are customizable in style.css:

:root {
  --cream: #f6efcc;           /* Canvas background top tint */
  --tan: #dfd2aa;             /* Canvas background bottom tint */
  --green: #8bd13d;           /* Verify button background */
  --success: #2bcf70;         /* Success state & checkmark */
  --amber: #f5bd28;           /* Keyhole & glow accents */
  --error: #ef4f58;           /* Error shake state */
  --card-bg: rgba(252, 251, 255, 0.98);
  --radius-card: 32px;
  --radius-input: 12px;
}

otp-animation-v10/
├── index.html       # Clean semantic HTML5 markup with SVG assets & metadata
├── style.css        # Modular CSS with variables, keyframes & responsive layout
├── script.js        # State machine, input logic, Web Animations API physics
├── LICENSE          # MIT License
├── .gitignore       # Standard git ignore rules
└── README.md        # Documentation & showcase guide

Contributions, issues, and feature requests are welcome!
Feel free to check the issues page if you want to contribute.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.