Orbit dial carousel

Use it for

• Wallets, plans or accounts where one item is in focus at a time
• Feature sections that cycle through a small set of products
• Hero areas that need motion the visitor can also steer

Avoid

• More than about ten items, where the steps get too small to read
• Content that must be compared side by side

How it works

Each card is placed by its offset from the current position, wrapped the short way round, with rotate(offset times step) translateY(minus radius) and a scale that grows as it nears the top, so the set reads as one dial arc. A small requestAnimationFrame tween eases the drawn position toward the chosen step and writes the transforms through refs; dragging writes them directly and snaps to the nearest step on release. An interval advances one step after a few idle seconds.

Accessibility

Previous and next are real buttons, the arrow keys turn the dial, and every card is a button named with its balance, with the top card marked current. A polite live region announces the card after user input, not during autoplay. Reduced motion turns off autoplay and the tween, so each step simply jumps.