Gear Shifter
A 6-speed manual H-pattern: drag the knob through the gate, it snaps into gear.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The knob is constrained to the real gate (you must pass through neutral), snaps with an overshoot and the leather boot stretches. Doubles as a playful multi-step selector.
Installation
$ npx shadcn@latest add https://guetix.com/r/gear-shifter.json
Uses the shadcn CLI. It creates components/guetix/gear-shifter.tsx and installs nothing else.
Usage
example.tsx
import { GearShifter } from "@/components/guetix/gear-shifter";
export default function Example() {
return <GearShifter />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | "R" | "N" | "1"–"6" | "N" | Gear. |
| onChange | (g) => void | — | Shift handler. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Focusable knob; keys 1–6, R and N shift directly; gear is announced.