Rig editor

A React block (a whole screen) in Beamline's CMS & media app.

Rig a character: bones, a rotation constraint and a mesh. Bones are drawn joint by joint on the stage or added from the chosen joint, and can branch from any joint; only the root has a position, every other joint follows its bone's length and angle, removing a bone removes what hangs from it, and a part fixed to a bone moves with it unbent. A rotation constraint makes a part follow a target with a strength (0 none, 50 half), source and destination spaces, its own offset, a copy factor and limits; a minimum above the maximum is refused, turning the target turns the part live, and the result says where a limit holds it. A mesh over a picture is edited by contour (the outline changes, the picture is only cut) or deform (the picture warps); vertices move by keyboard, triangles can be hidden, and resetting asks first.

Use it for

Setting up bones, follow constraints and mesh deformation for a character or object in an animation tool.
Any editor where parts follow other parts and the rule must stay readable.

Not for

Keyframing over time (keyframe-timeline).
Laying out boxes and pins (layout-inspector).

Anatomy

header: the product's mark, the title and object, the tool (bones, rotation constraint, mesh)
stage: bones with joints and the fixed part, or the target and follower gears, or the picture with its mesh, contour, triangles and vertices
bones: draw switch, add from the chosen joint, the bone tree with remove, root position or the chosen bone's length and angle, the fixed part said
constraint: target, its turn, strength with what it means, spaces, offset, copy factor, limits; the result
mesh: contour or deform with what each does, triangles, the chosen vertex and where it is, moved count, reset with a question

States

bones: none yet (said), drawing (stage outlined, said), branching from a joint other than the last
constraint: no target (said), held at a limit (amber), minimum above maximum (refused, red)
mesh: nothing moved (reset off), vertices moved (counted), reset asking
phone: one column, stage first
right to left: the page mirrors; the stage keeps its coordinates
reduced motion: nothing animates; everything changes on input only

Keyboard

Tab through the tool, bones, fields and vertices; arrows move the chosen vertex (Shift for 10 pt); Escape stops drawing

Motion

Nothing runs at rest. The stage redraws only on input.

Props

Prop	Type	Default	Description
`name` (required)	`string`	—
`defaultTab`	`"bones" \| "constraint" \| "mesh"`	—
`defaultRoot`	`{ x: number; y: number; }`	—
`defaultBones`	`Bone[]`	—
`defaultSelected`	`string`	—	The bone chosen at first; the last bone by default.
`rigid`	`{ name: string; bone: string; } \| null`	—	A part fixed to a bone, moving with it.
`targets`	`{ id: string; name: string; }[]`	—	Parts a constraint can target.
`constrained`	`string`	—
`defaultConstraint`	`RotationConstraint`	—
`ownAngle`	`number`	—	The constrained part's own rotation, kept when Offset is on.
`defaultMode`	`"contour" \| "deform"`	—
`defaultMoved`	`{ vertex: number; dx: number; dy: number; }[]`	—	Mesh vertices already moved, by index in the 4 × 4 grid.
`onChange`	`((state: { bones: Bone[]; constraint: RotationConstraint; }) => void)`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { RigEditor } from "@beamline/rig-editor";

Get it

Rig editor is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent