Feature/animated otp verification input

[ishita526]

Pull Request Description

Adds an Animated OTP Verification Input Component featuring smooth focus animations, interactive input states, and modern authentication-focused UI design. This component provides a reusable OTP verification pattern commonly used in two-factor authentication, account verification, and password recovery workflows.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/examples/animated-otp-verification-input/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A modern OTP Verification Input Component with animated focus states, smooth transitions, and authentication-oriented UI interactions.

How does a developer use it?

<div class="otp-container">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
  <input type="text" maxlength="1" class="otp-input">
</div>

Why does it fit EaseMotion CSS?

This component embodies EaseMotion CSS principles through smooth micro-interactions, human-readable structure, and motion-first UI design. It demonstrates how subtle animations can improve usability and create a more engaging authentication experience.

---

Demo

• Demo added (demo.html works by opening directly in a browser)

---

Browser Testing

• Chrome
• Firefox
• Edge
• Safari (optional but appreciated)

---

Notes for Maintainer

This component is built entirely with HTML and CSS and requires no external dependencies. It focuses on accessibility, responsiveness, and reusable animation patterns suitable for modern authentication flows.

Inspired by OTP verification experiences found in GitHub, Stripe, Clerk, Auth0, and other modern SaaS platforms.

Closes #1489

---

Reminder: Only the repository maintainer may merge pull requests.
Do not self-merge, even if you have write access.
Maximum 2 active assigned issues per contributor — unassign extras before opening a PR.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/animated-otp-verification-input

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉