# Product Drop (Moonarc)

The next batch, as one colour block: the product drawn large (ProductArt) under a round date stamp, and beside it the heading, a line, how many of the batch are spoken for (a count, and a bar that fills as the panel comes into view), three facts in the mono face and two actions. For a small run, a pre-order, a seasonal bake or a restock. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/product-drop` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<ProductDrop product={{ name, art }} batch={{ made, taken }} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the bar stands at its value
- Measured cost: 0 B JS (CSS 16.9 kB raw)
- Page: https://moonarc.dev/components/product-drop/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `product` | `{ name: string; art: string; colour?: string; accent?: string }` | none | The product: its ProductArt drawing and colours, and its name for the picture's label. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `copy` | `string` | none | A line under the heading. |
| `stamp` | `{ top: string; bottom: string }` | none | The round stamp's two lines: the batch above, the date below. Decoration: say the date in the copy too. |
| `batch` | `{ made: number; taken: number; text?: string }` | none | How many the batch makes and how many are spoken for; text is the count's sentence with {taken} and {made}. |
| `facts` | `{ label: string; value: string }[]` | none | Up to three facts in the mono face: the price, a size, how to pay. |
| `primary` | `{ href: string; label: string }` | none | The main action, e.g. to the product's pre-order form. |
| `secondary` | `{ href: string; label: string }` | none | The second action, outlined. |
| `block` | `1 | 2 | 3 | 4 | 5` | `5` | The colour block the panel paints. |
| `level` | `2 | 3` | `2` | Heading level. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import ProductDrop from '@/components/moonarc/pro/ProductDrop.astro';
---
<ProductDrop
  eyebrow="Next firing"
  copy="The kiln opens again in three weeks. Reserve one now and it is set aside for you."
  product={{ name: 'Tall vase', art: 'vase', colour: 'var(--ma-block-2)' }}
  stamp={{ top: 'Firing 09', bottom: 'Late November' }}
  batch={{ made: 24, taken: 15 }}
  facts={[{ label: 'Price', value: '$86' }, { label: 'Pay', value: 'On collection' }]}
  primary={{ href: '/pieces/tall-vase/#reserve', label: 'Reserve one' }}
>
  <span slot="headline">The tall vase, <em>back in three glazes</em></span>
</ProductDrop>
```

## Reduced motion

The bar stands at its value.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The count is text and the bar is a picture of the same number, hidden from assistive technology, so nothing is read twice.
- The bar fills on the panel's view timeline to its share and stops there; scrolling back empties it again.
- The stamp sits a little crooked inside a dashed ring, the way a date is stamped by hand, and is hidden from screen readers: the copy says the date.
- The panel takes its block's action pair, so the primary button reads on any colour the palette gives it.

## Replaces

- Pre-order banners (Shopify apps)
- Product launch sections

## Source

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