React-компонент OTP с анимацией
Кастомный OTP-инпут на React с анимацией заполнения, подсветкой и поддержкой состояний успеха/ошибки.
privacy
Эта заметка участвует в semantic memory.
AI Summary
- Короткий обзор сути: библиотечный React-компонент InputOTP, построенный поверх input-otp и motion/react, добавляет визуальные эффекты (свупы, кольцо, bounce) и состояния (invalid, success) к стандартному OTP-полю. 🔑 Ключевые факты: компонент отслеживает заполнение через ref, запускает sweep-анимацию при вставке нескольких цифр или при успехе; кольцо RingBox рассчитывается через ResizeObserver и getBoundingClientRect; анимации используют spring или отключены при reduceMotion; поддерживаются кастомные классы и aria-invalid. 📌 Важные детали: SWEEP_TIMING задаёт длительность и stagger для paste/success; RING_TRAVEL = 0.42; при success sweep идёт от 0 до maxLength; AnimatePresence + motion.span реализуют 3D-переход цифр; InputOTPSlot рендерит плейсхолдер «0» и анимирует вводимый символ; InputOTPRing рисует кольцо вокруг активных слотов. 💡 Вывод и значение: для использования нужно обернуть InputOTP в InputOTPGroup, добавить InputOTPSlot с index и при необходимости InputOTPSeparator; success-пропс и aria-invalid управляют цветом кольца и анимацией; при необходимости можно отключить анимации через useReducedMotion.