# Moiré Screens

> WebGL op-art from two printed transparencies laid one over the other. Concentric rings (or straight rules) beat into broad moiré fans that swim as the top sheet drifts or follows the pointer, every rule box-filtered over the pixel so only the designed interference shows. By day the rules print in graphite, riso or tomato ink; at night they glow on black and cancel where they cross.

- Slug: `moire-screens`
- Category: [Backgrounds](https://www.assembli.design/category/backgrounds.md)
- Type: block
- Tags: webgl, shader, moire, op-art, print, pattern, pointer
- npm dependencies: motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/moire-screens
- Page: https://www.assembli.design/components/moire-screens

![Moiré Screens preview](https://www.assembli.design/thumbnails/moire-screens-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `palette` | `MoireInk \| Inks` | `"graphite"` | Paper and inks in light mode: a preset, or three colors (paper first). |
| `darkPalette` | `MoireInk \| Inks` | `"phosphor"` | Ground and inks in dark mode. |
| `mode` | `"auto" \| "light" \| "dark"` | `"auto"` | Follow the page theme, or force one. |
| `pattern` | `"rings" \| "lines"` | `"rings"` | What's printed on the screens: concentric rings, or straight rules. |
| `pitch` | `number` | `7` | Distance between lines, in CSS px. |
| `ink` | `number` | `0.85` | Strength of the ink, 0 to 1. |
| `speed` | `number` | `1` | Time scale. 0 holds the screens still. |
| `interactive` | `boolean` | `true` | The top screen follows the pointer. |

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

```bash
npx shadcn@latest add @assembli/moire-screens
```

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