# Gimbal

> Bijou pack: a glass globe of beads hung in three nested polished rings on a stand, like a gyroscope or an armillary sphere. Each ring turns on its own pins at its own slow pace, so the globe rolls over and over and the beads tumble round inside it. A tap spins every ring up, and they wind down again. Raymarched in WebGL, with real bead physics.

- Slug: `bijou-gimbal`
- Category: [Asset packs](https://www.assembli.design/category/asset-packs.md)
- Subcategory: [Bijou](https://www.assembli.design/category/asset-packs/bijou.md) (`bijou`)
- Type: component
- Tags: 3d, webgl, raymarching, physics, glass, metal, beads, gimbal, gyroscope, armillary, globe, rings
- npm dependencies: none
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/bijou-gimbal
- Page: https://www.assembli.design/components/bijou-gimbal

![Gimbal preview](https://www.assembli.design/thumbnails/bijou-gimbal-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `palette` | `BijouPalette` |  | A preset palette. Every piece in the pack reads the same colors. |
| `colors` | `Partial<BijouColors>` |  | Override any color of the palette, as any CSS color. |
| `studio` | `string` |  | The studio the piece floats in, as any CSS color: what the metal and glass reflect. By default it's a pale warm grey, or near black on dark surfaces. |
| `finish` | `BijouFinish` |  | How the metal is finished. Changing it crossfades. |
| `speed` | `number` |  | Idle motion speed. 0 holds still, though the beads still settle; reduced motion always holds. |
| `interactive` | `boolean` |  | Lean toward the cursor, drag to turn and fling, tap for the piece's trick. The beads feel all of it. |
| `poke` | `number` |  | Change this value to play the piece's tap trick on cue. |
| `shadow` | `boolean` |  | The soft shadow the piece casts on the floor beneath it. |
| `surface` | `"auto" \| "light" \| "dark"` |  | What the piece sits on. "auto" follows the page theme; set "light" or "dark" when it sits on its own backdrop. |
| `rotate` | `Vec3` |  | Extra rotation of the resting pose in degrees: [pitch, yaw, roll]. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/bijou-gimbal/bijou-gimbal.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/bijou-gimbal
```

Registry item JSON: https://www.assembli.design/r/bijou-gimbal.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.