> ## Documentation Index
> Fetch the complete documentation index at: https://rive-scripting-inputs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Bones

export const Marketplace = ({href, children}) => {
  const hrefWithTracking = `${href}?utm_source=docs&utm_medium=docs_link_card&utm_campaign=docs_to_marketplace_links`;
  return <Card title="Learn by remixing" icon="external-link" href={hrefWithTracking} arrow="true" horizontal>
      {children ? children : "Open this file on Marketplace, then click Remix to experiment in the Rive Editor."}

    </Card>;
};

export const VideoEmbed = ({src}) => {
  return <div>
      <video src={src} autoPlay loop muted playsInline style={{
    width: "100%",
    height: "100%",
    borderRadius: 0,
    margin: 0,
    display: "block",
    objectFit: "cover",
    backgroundColor: "transparent"
  }} />
    </div>;
};

export const UseCase = ({title, children}) => {
  return <aside class="callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-white/10" data-callout-type="info">
      <div class="mt-0.5 w-4" data-component-part="callout-icon">
        <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="text-neutral-800 dark:text-neutral-300 w-3.5 h-auto" aria-label="Tip"><path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path></svg>
      </div>
      <div class="text-sm prose dark:prose-invert min-w-0 w-full [&_kbd]:bg-background-light dark:[&_kbd]:bg-background-dark [&_code]:!text-current [&_kbd]:!text-current [&_a]:!text-current [&_a]:border-current [&_strong]:!text-current text-neutral-800 dark:text-neutral-300" data-component-part="callout-content">
        <strong>Example{title && ` - ${title}`}</strong>

        {children}
      </div>
    </aside>;
};

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

Bones create a skeleton you can use to pose and animate elements. Connect bones in a chain, then move or rotate them to control anything from a character’s arm to a bending branch or waving flag.

<CardGroup cols="2">
  <VideoEmbed src="https://static.rive.app/video/bones.mp4" />
</CardGroup>

<Marketplace href="https://rive.app/community/files/28327-53500-mesh-and-bones/" />

Bones can control elements in three ways:

* **Transform an element:** Make a shape, image, group, or other element a child of a bone. The entire element follows the bone’s position, rotation, and scale.
* **Deform a vector:** Bind the vertices and Bézier handles of a vector path to one or more bones. Adjust their weights to control how the path bends.
* **Deform an image:** Add a mesh to a raster image, then bind its vertices to one or more bones. Weighted vertices allow the image to bend and stretch smoothly.

You can combine these methods in the same rig. For example, a character’s hand might be parented to an arm bone while the sleeve’s vertices are weighted across several bones to create a natural bend.

<YouTube id="WDILxfmCEt0" />

## Creating Bone Chains

Select the Bone tool from the **Bones** menu, or press **B**.

Click once to place the start of the first bone, then click again to set its length and rotation. Continue clicking to add bones to the chain. Each new bone becomes a child of the previous bone.

Press Esc or switch to the **Select** tool (**V**) when you’re finished.

![Image](https://ucarecdn.com/7e6cb0cf-ec53-4da8-bfbf-627b841b3208/)

To extend an existing chain from a different point, select the [joint](#joints) where you want the new branch to begin. Then select the Bone tool and continue clicking to add bones.

![Image](https://ucarecdn.com/264073a6-f9bc-4344-9474-f7d7011c5568/)

<Tip>
  If you can’t see your bones on the Stage, open **View Options** and make sure **Bones** is enabled.
</Tip>

### Joints

Joints are the points where bones connect. Use them to position and orient bones while building your chain.

Joints do not appear as separate objects in the Hierarchy. Moving a joint changes properties such as the length and rotation of the bones connected to it.

<VideoEmbed src="https://static.rive.app/video/bone-joints.mp4" />

### Root bone

The first bone in a chain is the **root bone**. It controls the position of the entire chain and is the only bone in the chain with X and Y position properties. Every other bone is positioned by its length and rotation relative to its parent.

## Controlling Elements With Bones

### Transforming Elements

Make an element a child of a bone to control its transform. When the bone moves, rotates, or scales, its children follow without being deformed.

To connect an element, drag its layer onto the bone in the Hierarchy. You can parent shapes, images, groups, and other bone groups to a bone.

This method works well for rigid parts that should keep their shape, such as a hand, shoe, or mechanical component.

<YouTube id="g8MWMKixURo" />

### Deforming Elements

You can bind bones to the control points of both vector paths and raster images:

* Vector paths use vertices and Bézier handles.
* Raster images use the vertices of a [mesh](/editor/manipulating-shapes/meshes).

Binding allows different bones to influence different parts of an element, creating smooth bends and other deformations.

<Note>
  Before binding a procedural shape, such as a rectangle or ellipse, convert it to a custom path. Select its path layer, then press `Enter`.
</Note>

<Steps>
  <Step>
    Select the element you want to deform, such as a vector shape or a raster image with a [mesh](/editor/manipulating-shapes/meshes).
  </Step>

  <Step>
    In the **Bind Bones** section of the Inspector, click the **+** button.
  </Step>

  <Step>
    Hold **Cmd + Shift** on macOS or **Ctrl + Shift** on Windows, then select the bones you want to bind.
  </Step>

  <Step>
    Click **Done**.
  </Step>
</Steps>

After binding, Rive assigns each bone a color. The same colors appear on the bone and in the Bind Bones section, helping you identify which bones influence each control point.

<VideoEmbed src="https://static.rive.app/video/bind-mesh-to-bones.mp4" />

Rive automatically assigns an initial influence, or weight, to each vertex. Vector paths also allow you to weight their Bézier handles. Adjust these weights to fine-tune how the element deforms.

#### Adjusting Vertex Weights

A weight determines how much influence a bone has over a vertex. A vertex can be influenced by one or more bound bones, but its combined weights always equal 100%.

After binding, each vertex displays a pie chart using the colors assigned to its bones. The size of each colored segment represents how much that bone influences the vertex.

Rive assigns initial weights automatically. To adjust them, select a vertex or group of vertices, then change the weight for each bone in the Bind Bones section of the Inspector.

<VideoEmbed src="https://static.rive.app/video/weight-bones.mp4" />

Vertices near a joint often benefit from being influenced by both neighboring bones. Blending their weights creates a smoother bend as the bones move.

<Note>
  On vector paths, you can weight a vertex and its Bézier handles independently for more precise control over the deformation.

  <img src="https://mintcdn.com/rive-scripting-inputs/gp4iZUIljkAw1H_X/images/editor/bones/bones-controlling-bezier.gif?s=e8ac4c103f77c042b8f17f63a367dca8" alt="Bones controlling bezier handles" width="800" height="405" data-path="images/editor/bones/bones-controlling-bezier.gif" />

  [Try it in the Rive Editor](https://rive.app/community/files/28349-53555-control-bezier-handles-with-bones?utm_source=docs\&utm_medium=docs_link_card\&utm_campaign=docs_to_marketplace_links).
</Note>

You can lock a vertex’s weight for a specific bone. Locked weights stay fixed when you adjust other bone weights on the same vertex.

<VideoEmbed src="https://static.rive.app/video/lock-bone-weight.mp4" />

#### Weight Editing Tools

Rive includes tools to help you adjust vertex weights after bones are bound.

**Edit Weights** lets you adjust the influence of a specific bone on selected vertices. Select a vertex, then select a bone on the Stage or in the **Bind Bones** section. Drag up or down on the vertex to increase or decrease that bone’s weight.

<VideoEmbed src="https://static.rive.app/video/edit-weights.mp4" />

**Smooth** evens out bone weights across neighboring vertices. If vertices are selected, smoothing applies to the selected vertices. If no vertices are selected, it applies to the entire shape.

**Auto-Weights** automatically assigns weights based on each vertex’s nearest bone, blending where neighboring bone regions meet. If vertices are selected, auto-weights apply to the selected vertices. If no vertices are selected, they apply to the entire shape.

Auto-Weights includes two settings:

* **Blend** - controls how widely weights blend at the boundary between two bones. Higher values spread the blend across more of the mesh, creating softer deformation. Lower values create a more rigid result, where each vertex sticks more closely to its nearest bone.
* **Influence** - controls the maximum number of bones that can influence each vertex.

#### Mesh View Options

**Show Weights** shows or hides weight pie charts on unselected vertices. Selected vertices always show their weights while you edit them.

<VideoEmbed src="https://static.rive.app/video/show-weights.mp4" />

<Note>
  For other mesh view options, such as isolating the mesh or showing and hiding triangles, see [Meshes](/editor/manipulating-shapes/meshes#mesh-view-options).
</Note>
