Gear Train

Meshed spur gears on a blueprint, with correct ratios — crank the drive gear and the train follows.

Animated · Full motion: idle animation, physics and effects. animated (default)

Small gears spin faster, neighbours counter-rotate and teeth interlock. Each gear shows its tooth count and live RPM; a slider sets the drive speed.

Installation

$ npx shadcn@latest add https://guetix.com/r/gear-train.json

Uses the shadcn CLI. It creates components/guetix/gear-train.tsx and installs nothing else.

example.tsx

import { GearTrain } from "@/components/guetix/gear-train";

export default function Example() {
  return <GearTrain />;
}

Engineering portfoliosHow-it-works sectionsEducation

The details that make it feel right, and that a one-line prompt usually misses:

01Speed ratio = driver teeth / gear teeth; direction alternates along the train.
02Gears are laid out by pitch radius, so they mesh at any tooth count.

Prop	Type	Default	Description
teeth	number[]	[24, 12, 36, 16]	Tooth counts, driver first.
rpm	number	8	Idle drive RPM.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).