# Sticker Cloud (Moonarc)

Who it is for, as stickers: a heading and a line beside a cloud of rounded labels in the palette's blocks, each tilted a little its own way, coming in one after another as the cloud enters the screen (Reveal). A clientele, the kinds of event a venue hosts, the cuisines a kitchen cooks. The labels are a list, read in order and named by the heading. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/sticker-cloud` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<StickerCloud items={[…]} headline="Who we work with" />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16)
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 12.0 kB raw)
- Page: https://moonarc.dev/components/sticker-cloud/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | none | The labels, in order. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading; it names the list. Slot "headline" wins and may hold an <em>. |
| `copy` | `string` | none | A line under the heading. Slot "copy" wins. |
| `blocks` | `(1 | 2 | 3 | 4 | 5)[]` | `[1, 2, 3, 4, 5]` | The blocks the stickers take in turn. |
| `tilts` | `number[]` | `[-3, 2, -1.5, 3, -2.5, 1.5]` | The tilts the stickers take in turn, in degrees. |
| `label` | `string` | none | Accessible name of the list; unset, the heading names it. |
| `level` | `2 | 3` | `2` | Heading level. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the stickers keep their blocks. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import StickerCloud from '@/components/moonarc/pro/StickerCloud.astro';
---
<StickerCloud
  eyebrow="Clients"
  headline="Who we work with"
  copy="Businesses where the look of the place is part of what people pay for."
  items={['Restaurants', 'Cafés', 'Villas', 'Beach clubs', 'Spas', 'Boutiques']}
/>
```

## Reduced motion

The stickers are in place, tilted, with no entrance.

## With ClientRouter

Inherits Reveal; nothing of its own to rebind.

## Craft

- Six tilts in a fixed order: the cloud looks hand-placed and is the same on every build and in every screenshot.
- The tilts stay under 3 degrees: past that a label looks as if it fell over.
- Each sticker's text is its block's own pair, picked by the palette to read at 4.5 : 1, so any order of blocks is safe.

## Replaces

- Tag clouds (Framer templates)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/sticker-cloud` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: reveal.