Rotary Dial
A 1960s telephone dial: drag a hole to the finger stop, let go, and it whirs back with clicks.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Holes are laid out like the real thing: 1 travels least, 0 almost a full turn. The spin-back speed and the click count match the digit, like a governor-controlled dial.
Installation
$ npx shadcn@latest add https://guetix.com/r/rotary-dial.json
Uses the shadcn CLI. It creates components/guetix/rotary-dial.tsx and installs nothing else.
Usage
example.tsx
import { RotaryDial } from "@/components/guetix/rotary-dial";
export default function Example() {
return <RotaryDial />;
}
Phone-number input with personalityRetro brandsEaster eggs
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Holes are cut with a stack of radial-gradient masks.
- 02Drag angle is accumulated, so long pulls past 180° stay correct.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onDial | (number: string) => void | — | Called with the dialed number. |
| sound | boolean | true | Click sounds. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Focus the dial and type digits; output is a live region.