# Gyroscope

> Gyre pack: a gyroscope, a spun brass flywheel with four windows in a cage of three chrome rings, its foot set in a cup on a turned walnut tower and its axle held out sideways in mid air. It precesses round the tower, faster as the spin bleeds away, the axle drooping and nodding until it's spun up and lifts level again. Tap to spin it up. Raymarched in WebGL.

- Slug: `gyre-gyroscope`
- Category: [Asset packs](https://www.assembli.design/category/asset-packs.md)
- Subcategory: [Gyre](https://www.assembli.design/category/asset-packs/gyre.md) (`gyre`)
- Type: component
- Tags: 3d, webgl, raymarching, physics, spinning-top, metal, motion-blur, gyroscope, precession, flywheel, science
- npm dependencies: none
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/gyre-gyroscope
- Page: https://www.assembli.design/components/gyre-gyroscope

![Gyroscope preview](https://www.assembli.design/thumbnails/gyre-gyroscope-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `palette` | `GyrePalette` |  | A preset palette. Every piece in the pack reads the same colors. |
| `colors` | `Partial<GyreColors>` |  | Override any color of the palette, as any CSS color. |
| `studio` | `string` |  | The table the piece stands on, as any CSS color: what its metal reflects below the horizon. Match it to the page behind. By default it's a warm paper white, or near black on dark surfaces. |
| `light` | `GyreLight` |  | How the set is lit. Changing it crossfades. |
| `shutter` | `number` |  | Shutter speed in seconds: how far the spin blurs in each frame. 1/60 shows spokes as a veil; 0 freezes them sharp, as if lit by a strobe. |
| `speed` | `number` |  | Playback speed. 0 holds the moment; reduced motion always holds it. |
| `interactive` | `boolean` |  | Drag across a piece to spin it up, tap to knock it (or to spin it again once it's down). |
| `poke` | `number` |  | Change this value to knock it on cue. |
| `shadow` | `boolean` |  | The shade the piece casts and the window's bars on the table. |
| `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` | `[number, number]` |  | Move the camera, in degrees: [higher, round to the right]. |
| `onRpm` | `(rpm: number) => void` |  | Called about ten times a second with the spin in revolutions per minute, for a readout. |

## 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/gyre-gyroscope/gyre-gyroscope.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/gyre-gyroscope
```

Registry item JSON: https://www.assembli.design/r/gyre-gyroscope.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.