Rolling counter

Plus and minus, and every digit rolls into place on its own.

PressFree

Works inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus working code in one go. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.

Build an interactive UI element: Rolling counter.

What it is: Plus and minus, and every digit rolls into place on its own.

Behaviour:
- Large number between a minus and a plus button, with tabular figures.
- Every digit is its own column of 0 to 9 that rolls vertically to the right value (translateY, about 500 ms, slightly overshooting easing).
- Digits keep their position from the right, so going from 99 to 100 only rolls the right columns.
- The buttons shrink briefly on click (active scale).
- Screen readers only hear the number (aria-live), not the columns.

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.