Machines, not pictures of machines

Why it exists

shadcn/ui covers forms and layout. Nothing covered machines — the arm on a robotics landing page, the pick-and-place loader on a fabrication dashboard, the face on a support bot. Those normally arrive as a looping GIF, a Lottie file, or a hand-keyframed SVG: fixed at one size, one palette, one pose, and unable to answer a question the page asks it.

A machine that solves its own geometry answers instead. Give it a target and it reaches; give it a value and it shows that value. It is a component, not an asset.

What is actually solved

The distinction that matters here is between a pose that was computed and a pose somebody drew. Every claim below is arithmetic running in the browser at 60fps, in a solver with no dependencies at all.

• Inverse kinematics. Two links close with the law of cosines; longer chains run FABRIK, seeded with the previous frame so the arm never snaps between two valid solutions. A target out of reach stretches toward it rather than breaking the pose.
• One solve, two renderers. The SVG arm and the react-three-fiber arm run the same kinematics core, so the same target puts the tip in the same place in 2D and in 3D.
• The mechanisms underneath. A gearbox turns at its real ratio, a fan brake retards as k·ω², a crop unit's florets are placed by the golden angle over equal areas of its own surface. When a machine here looks like it is doing something, it is doing it.
• Even the logo. The mark in the header is a three-link chain solved by the same hook the components use. Click anywhere and it re-aims at where you clicked.

What is in it

How you control one

Four colour roles resolve prop first, then CSS variable, then a built-in default, so setting --robot-shell once repaints every machine on the page. variant changes how a machine is painted and never where its joints are — blueprint adds the grid, the dimensions and the joint angles, because a drawing is what you want when you are explaining a mechanism rather than selling one. Size is a prop, and interactive turns a machine into a control you can drag or arrow-key. Reduced-motion settings park all of it.

How it is built

One Next.js app is both the documentation site and the registry itself. Every file listed in registry.json lives at the path a consumer installs it to, so what this site renders is exactly what ships — there is no build step between the demo and the download, and a broken component breaks the page you are reading.

A large share of the people installing from here are coding agents, so the site is written for them too: every page has a Markdown mirror and the whole catalogue is one file at /llms.txt.

Install one