Robot components for shadcn/ui
Arms, cells and machines that solve their own kinematics in the browser. Install the source into your project, theme it with CSS variables, and set its size with a prop.
bunx --bun shadcn@latest add https://robocn.dev/r/robot-arm.jsonWhat this is, and what to do with it
robocn is a shadcn registry of machines rather than a component library of pictures. Every item solves its own geometry in the browser, themes itself from your CSS variables, and installs into your project as source you can edit. The same repository is the documentation site, the registry, the workbench you build new machines in, and the skills an agent follows to build them for you.
Install one
228 registry items — machines, solvers and hooks — each installed as source the way a shadcn/ui component is. No package to depend on and nothing to import from: the files land in your project and you own them from then on. Register the @robocn namespace once and every item installs by short name.
bunx --bun shadcn@latest add @robocn/robot-armBrowse the catalogue →Drive it
Give a machine a target and it reaches; give it a value and it shows that value; give it nothing and it runs its own cycle. The pose is solved every frame in a core with no dependencies at all, so the same target puts the tip in the same place in SVG and in WebGL.
<RobotArm target={{ x, y }} interactive />Read the props →Build a new one
The workbench is a Storybook for robots that runs on this repository's own source. Controls are derived from each component's props by the TypeScript AST rather than written by hand, matrix mode draws a whole cross product at once, and New scaffolds a machine and writes the brief for whoever builds it.
pnpm dev → /workbench → NewOpen the workbench →Or let an agent build it
Four skills ship from this repository and install anywhere the skills CLI runs. They carry the contract a machine has to keep — solved pose, four camera angles, self-running motion, registry entry, tests — so an agent starts from the rules rather than from a catalogue of two hundred components.
bunx skills add TimMikeladze/robocn- build-robot
- A new machine, end to end — from a reference photo if you have one.
- refine-robot
- Change a machine that already ships: a new axis, a new view, a fix.
- fork-robot
- Set up a fork and get to the point of building in it.
- publish-robot
- Take a finished machine to a pull request back here.
Everything here is readable as text
A large share of the people installing from here are agents, so the site does not make them parse a hydration payload. Every documentation page has a Markdown mirror at the same URL with .md appended — or behind an Accept: text/markdown header — carrying the install line, the props table and the source list as plain text. The whole catalogue is one file.
curl robocn.dev/llms.txt
curl robocn.dev/docs/robot-arm.mdEach page also has a Copy page action that puts its Markdown on your clipboard or hands the URL straight to an assistant.
Every machine
Search and filterAll 228 registry items, including the solvers and hooks underneath them. Foundations are drawn as blueprints, because what you install there is the maths, not the machine.
Arms
6Droids
27Utility droid
Rotating dome, modular tools, three service series.
Orb droid
Rolling shell, stabilized head, tracking optic.
Bellows droid
A pleated shell that inflates, and nothing else moves.
Protocol droid
Formal humanoid with four expressive gestures.
Security droid
Tall guard frame with patrol and alert states.
Medical droid
Diagnostic display and modular instrument arms.
Infantry droid
Light and heavy frames with controlled poses.
Probe droid
Hovering sensor pod with articulated appendages.
Courier droid
Compact runner with steering and cargo modules.
Casing droid
Armoured casing, swinging eyestalk, swappable manipulator.
Astromech droid
Barrel repair unit with a panel, periscope and holo.
Attendant droid
Plated etiquette humanoid with a vocoder face.
Cyber trooper
Converted frame with handles and a power reserve.
Guide droid
Rotor overhead, hands and feet on springs.
Custodian droid
Armour on rails: the shell blooms off a lit chassis.
Sentinel console
A wall fixture that watches: one solved iris, one gimballed optic.
Pylon droid
A plate that folds its whole robot inside its outline.
Monolith droid
Four hinged slabs; that is the whole machine.
Duck
A biped that walks, pecks, and quacks.
Reachy mini
A head on six solved rods, eyes that follow.
Animatronic face
Every feature is a servo; an expression is a blend of them.
Scout walker
One foot down, so the whole cab rolls over onto it.
Siege walker
Four feet at the corners: it hardly leans at all.
Tripod droid
Three legs, so it leans onto two before it lifts the third.
Spring hopper
A real spring, with a solid height it can hit.
Ball hopper
Flattened on impact, it has to get wider.
Animatronic
The whole animatronic, running itself — and standing over its own foot.
Animals
28Hound
A wedge on a drive, and a head on a collar that runs out.
Quadruped
Four solved legs, standing, walking, and trotting.
Fish
A body wave with the beat piled at the tail.
Snake
Serpentine, sidewinding, or curled up.
Spider
Eight solved legs on a tripod gait.
Crab
The same gait, turned sideways, plus claws.
Bird
Three-link wings and a fanning tail.
Dragonfly
Two wing pairs, half a cycle apart.
Bat
One skin, drawn through four finger struts.
Jellyfish
A bell that squeezes fast and relaxes slow.
Manta
The wave runs across the span, not the body.
Octopus
Eight spines on a ring, each on its own phase.
Seahorse
The grip is the steering, taken to the stop.
Ant
Six legs, and three sections on a bending chain.
Scorpion
A tail that leaves the ground plane.
Mantis
Forelimbs solved to a real target.
Frog
One pair of numbers is the whole jump.
Cat
Four solved legs hung off a back that arches.
Dog
A floating shoulder, a solved neck, and a wag that runs out of the page.
Fox
The whole body tips, and the brush answers for it.
Bear
Plantigrade soles, so it has a base to stand up over.
Polar bear
One number hands its weight from the soles to the water.
Panda
Sits down, which is how both hands come free.
Horse
Real gaits, and a fetlock that sinks under the weight it carries.
Pegasus
One number hands its weight from its legs to its wings.
Camel
The only floor here with a depth, and feet that go into it.
Turtle
Four legs, and a shell it can vanish into.
Inchworm
No wave at all: two anchors and an arch.
Garden
5Avocado
One shell, cut in half, with the stone riding up the gap.
Strawberry
Studs placed by the golden angle over its own skin.
Tomato
The one machine here that hangs instead of standing.
Sunflower
A golden-angle head, aimed at the light by a solved tracker.
Cactus
A ribbed column and two arms, one continuum limb apiece.
Body
5Actuators
11Linear actuator
Controlled stroke and a piston cutaway.
Servo motor
Positional shaft with three horn styles.
Radial bloom
Twelve telescopes on one hub, each on its own number.
Transformer core
Coupled windings and reversible flux on one core.
Eddy-current brake
A magnet array braking a disc without touching it.
Voice-coil actuator
A moving coil crossing a fixed annular magnet gap.
Magnetic bearing
Four correction coils around a suspended rotor.
Induction motor
Three phases circling a squirrel-cage rotor.
Stepper motor
Four phase teeth and a rotor that stops on indices.
Solenoid valve
A winding, return spring, plunger, and switched flow path.
Electromagnetic relay
A visible armature switching two contact sets.
Drives
7Rotary table
Indexing platter, fixtures, and workpieces.
Conveyor belt
Wrapping travel, rollers, and workpieces.
Planetary gearbox
Sun, planets and a held ring, with teeth that mesh.
Belt drive
Unequal pulleys, a taut belt, an idler to wind down.
Cable carrier
A fold that travels at half the carriage.
Mecanum wheel
Barrel rollers at 45°, in a left hand and a right.
Motion platform
Six solved legs under a deck that really tips.
Tools
4Sensors
3Fabrication
5Fabricator
Builds a sampled solid, one vectorized voxel at a time.
Voxel form
The workpiece alone: a field sampled into vector cells.
Arm fabricator
Solved shoulder and elbow, reaching for the cell being laid.
Drone fabricator
A repulsor platform building with no envelope at all.
Construct ring
Draw a stroke and it forges what the stroke was asking for.
Devices
8Clamshell laptop
One solved hinge, and a lid that keeps its length.
Slate tablet
A kickstand whose foot has to reach the desk.
Wheel player
A click wheel geared to the list it scrolls.
Slab handset
One slab, turned: screen, edge, then the array.
Folding handset
A crease with a radius, and a sheet that keeps its length.
Wrist terminal
A crown geared to the dial, on a band that holds its length.
Rubik's cube
Grab a face, turn it with your hand, let go and it snaps.
Puzzle cube
The same cube, drawn in SVG — no canvas, no WebGL.
Controls
7Key switch
A contact that closes partway down, not at the bottom.
Keypad
A scanned matrix: the key down and the cell read are not the same.
Keyboard
Rows in units on one pitch, and caps sculpted per row.
Input terminal
The keys it strikes are what fills its own screen.
Face
Eyes that follow the pointer. Six moods.
Loader
Pick and place as a progress indicator.
Controls
A teach pendant: one slider per joint, posing the arm forward.
Vehicles
9Rover
Four or six wheels, heading, and steering.
Drone
Four or six rotors, guards, and blade angles.
Car
One steering number, two different wheel angles.
Transit bus
The bend is solved from the steer, and she kneels to open.
Cargo plane
It banks because it was asked to turn.
Hydrofoil craft
Lift goes as v², so the hull climbs out of the water.
Oil tanker
The cargo sets how deep she sits.
Tanker truck
Steer the tractor; the trailer’s angle is solved.
Airliner
A four-engine double-deck widebody you can walk right round and take completely to bits.
Rail
5Space
10Launch vehicle
Flies a pitch program, stages, and drops its own Δv.
Strike starfighter
Four wings, two hinges, one X.
Ion interceptor
Hexagons head-on, two lines from above.
Planet
A ring the body really stands in front of, and behind.
Moon
The crescent is the terminator, projected.
Star
Limb darkening as a law, not a gradient.
Asteroid
The one body whose outline changes as it turns.
Orrery
Arms whose length is the orbital radius.
Battle station
A hull that comes apart into the plates it was made of.
Debris field
A population, depth-sorted: near covers far.
Energy
10Pumpjack
A four-bar that turns a crank into a stroke.
Drilling derrick
Mechanical advantage, drawn as rope.
Mud pump
Three slider-cranks, a third of a turn apart.
Wellhead tree
Open valves decide which bore is live.
Storage tank
The roof floats, and the ladder answers.
Flare stack
A plume that is a length, not a rate.
Fractionating column
The tray count rebuilds the whole tower.
Jack-up rig
One number: the air gap and the stick-up.
Bore construct
A tunnelling head of solid light, boring a wall that cracks, spalls and heaps its own spoil.
Rod pump
The downhole end of a beam-pumped well, in section — and a fluid pound is the plunger really falling through a void before it finds the liquid.
Sport
12Football
The outline is the ellipsoid's own section, not an oval.
Lineman
A hand on the turf is what makes the back flat.
Quarterback
The elbow is an output; the ball leaves on the hand's velocity.
Receiver
The lean is the exterior angle at the break.
Kicker
Clears or short is read off the plot, not declared.
Blocking sled
Static equilibrium, and a frame with a friction threshold.
Ball launcher
Mean of the surface speeds out, difference as spin.
Baseball
A seam that is a closed curve on the sphere, and a break that comes out of the spin.
Batting rig
Where it stands decides where on the barrel the ball arrives, and the collision says what that costs.
Basketball
Eight panels, and a bounce where every apex is the last one times e².
Soccer ball
A truncated icosahedron that turns because it travelled.
Hockey puck
A cylinder on ice, with every board and the stop already solved.
Gym
5Cable station
The pin picks the weight; the reeving decides what you hold.
Resistance cam
The moment arm is the cam radius, so the cam is the resistance curve.
Leg press
The rail angle is the resistance: the frame decides the weight.
Cross trainer
The foot path is a coupler curve, so the stride is an output.
Rowing erg
Drag goes as the square of rim speed, so the vent sets the feel.
Home
7Power lantern
A ring in the port, taking charge the reservoir is losing.
Gabled house
The ridge is the pitch, and the garage door really runs its track.
Tower block
One rope, one sheave: the weight falls as far as the car rises.
Espresso machine
A lever, a rod, a piston — and a spring that is the pressure.
Refrigerator
Solved leaves, and an inside the swing reveals.
Washing machine
Thrown below a Froude number of one, pinned above it.
Jack-o'-lantern
The face is cut out of the shell, and the light is paid for by the holes.
Music
5Turntable deck
An arm geared to the platter by the groove it tracks.
Gramophone horn
A mainspring, its governor, and an exponential horn.
Music box drum
A pinned barrel bending a comb tuned by length.
Busker droid
A droid whose pose comes from a step pattern.
Grand piano
A roll, 88 actions, and a hammer that is let go before the blow.
Foundations
49Duck kinematics
Two planar legs and a footfall cycle that keeps one down.
Stewart kinematics
A head pose in, six leg lengths out.
Face actuation
Sixteen channels, nine expressions, one hinged jaw.
Quadruped kinematics
Four legs, three footfall patterns, every foot reachable.
Bear kinematics
The sole, the base of support, and the margin over it.
Voxel geometry
Occupancy fields turned into cells in deposition order.
Spine kinematics
A serpenoid travelling wave with taper and steady turn.
Gait kinematics
Six footfall sequences, and the beat counted off them.
Hexapod kinematics
Radial legs, knees solved in each leg's own plane.
Walker kinematics
The mass is above the hips, so moving it costs roll.
Tripod kinematics
The load says where the body has to stand to hold it.
Assembly geometry
Apart in the reverse of the order it was built.
Lantern geometry
Apart in the reverse of the order it went together.
Vehicle geometry
The constraints a vehicle works against: Ackermann steering, steady-state articulation, the coordinated bank, a rigid body on N axles, the rocket equation, and surface-piercing foil lift.
Hand kinematics
Five digits, and a thumb on a real saddle joint.
Skeleton kinematics
A stride, a rolling foot, and a spine that keeps its length.
Animatronic kinematics
One intent for the whole body, and the ground its feet actually hold.
Device geometry
Hinges, kickstands, detents and bands, solved.
Keyboard geometry
Travel, hysteresis, a unit-pitch deck and a raked face.
Produce geometry
Profiles revolved, a lattice by area, halves that reassemble.
Transmission geometry
Meshing teeth, taut belts, and a chain over its bend.
Kinematics
Two-link cosines and FABRIK, with the envelope drawn.
Style
Palette, size, variant and view, resolved once for every machine.
Color
Resolves a CSS variable to a colour three.js can read.
useRobotArm
The solver as a hook: pose an arm without rendering one.
useRobotMotion
The clock, the drag and the scalar every machine runs on.
usePointerTarget
Pointer position, in the machine's own world units.
Electromagnetism geometry
Windings, three-phase vectors, and resolver quadrature.
Sound geometry
A spiral groove, and the arm angle it fixes.
Piano geometry
An escapement, and the scale the case is drawn around.
Phyllotaxis geometry
A golden angle, and the Fibonacci arms that fall out of it.
Cactus geometry
A limb solved from its curvature, as long bent as straight.
Celestial geometry
Kepler's equation, ellipses about a focus, and the light.
Hull geometry
A tiling that sums to one sphere, and the front that opens it.
Linkage geometry
A four-bar, a slider-crank, and a rope-length constraint.
Hopper dynamics
Flight is a parabola; stance is a spring.
Household geometry
Swings, sectional panels, a tumbling drum and a resonant tub.
Rail geometry
Throw on a curve, Klingel hunting, a crossing angle.
Gridiron geometry
A prolate spheroid, a parabola, a route tree, a sprung arm.
Capture
Records a component out of the page: a snapshotter that bakes the cascade into a clone, a GIF89a encoder, and an animated-WebP muxer built on the browser's own encoder.
Export
The record button.
Gym geometry
Five reasons the felt load is not the selected load.
Carve geometry
An outline wrapped onto a shell, carved along its own perimeter.
Sport geometry
The solver under the family, drawn as the solid it builds.
Construct geometry
A stroke measured into seven numbers, and the construct they ask for.
Bore geometry
The excavation solver under it: the rate, the cavity, and the spoil that conserves it.
Airframe geometry
The loft under it — body, wing and a folding side stay — drawn as the machine it solves for.
Rod pump geometry
The solver under it, drawn as the machine it solves for.
Cube geometry
Exact integer state: a lattice of cubies, each with its own orientation.
Four ways to draw one
variant changes how a machine is painted, 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.
solid
Painted machine.
outline
Line art.
blueprint
Grid, dimensions, joint angles.
wire
Skeleton.
Kinematics, not keyframes
Two links solve with the law of cosines; longer chains run FABRIK, seeded with the previous frame. Out-of-reach targets stretch toward the target instead of breaking the pose.
Themed like the rest of your UI
Four colour roles resolve prop first, then CSS variable, then a built-in default. Set --robot-shell once and every machine on the page follows.
Moving, and worth grabbing
Every machine runs its own cycle until you supply its value, and interactive turns one into a control you can drag or arrow-key. Let go and it eases back into the cycle. Reduced-motion settings park all of it.