# Swallowtail

> Mote pack: a swallowtail butterfly with its beads laid along the veins, fanning out from the body the way real ones do, with a dark margin, pale spots and an eyespot on each tail. It opens and closes its wings slowly and pauses open. Tap to make it flutter hard, lift off, loop and settle back. WebGL point cloud.

- Slug: `mote-butterfly`
- Category: [Asset packs](https://www.assembli.design/category/asset-packs.md)
- Subcategory: [Mote](https://www.assembli.design/category/asset-packs/mote.md) (`mote`)
- Type: component
- Tags: 3d, webgl, particles, point-cloud, asset, butterfly, insect, wings, nature
- npm dependencies: none
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/mote-butterfly
- Page: https://www.assembli.design/components/mote-butterfly

![Swallowtail preview](https://www.assembli.design/thumbnails/mote-butterfly-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `palette` | `MotePalette` |  | A preset palette. Every piece in the pack reads the same colors. |
| `colors` | `Partial<MoteColors>` |  | Override any color of the palette, as any CSS color. |
| `speed` | `number` |  | Idle motion speed. 0 holds the resting pose; reduced motion always does. |
| `interactive` | `boolean` |  | Part the beads with the cursor, drag to turn and fling, tap for the piece's trick. |
| `poke` | `number` |  | Change this value to play the piece's tap trick on cue. |
| `density` | `number` |  | How many beads, from 0.25 (a loose weave) to 2 (twice as fine). Bead size follows, so coverage stays the same. |
| `motes` | `number` |  | How many loose motes drift around the piece, as a multiple of its usual number. 0 for none. |
| `assemble` | `boolean` |  | Fly the piece in from a cloud of dust the first time it comes into view. Change `key` to play it again. |
| `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/mote-butterfly/mote-butterfly.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/mote-butterfly
```

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