One-time code

Build an interactive UI element: One-time code.

What it is: Six boxes that move on by themselves, pasting a whole code and a shake for a wrong code.

Behaviour:
- Six separate boxes for digits; focus jumps to the next box automatically.
- Backspace in an empty box goes back and clears the previous one; arrow keys navigate.
- Pasting a whole code fills all boxes at once.
- With a full code: briefly "Checking...", then green when right or red with a shake when wrong; then empty and ready for a new try.
- The first box has autocomplete="one-time-code", so text message codes fill in automatically on mobile.

Requirements:
- Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript.
- Fully operable with keyboard and touch, with the right aria attributes.
- Respect prefers-reduced-motion: less or no movement.
- Use the colours, fonts and border radii of my project.
- At the end, show me where the component lives and how to use it.