# Product Art (Moonarc)
A product drawn flat, for a shop slot that has no photograph yet: 29 drawings in six sets (clothes, ceramics, coffee, skincare, furniture and objects, bakery). Each is a few SVG shapes in the product's colour with a shade, a light and an accent mixed from it, so one drawing takes any colourway; unset, it takes the first drawing colour of the colour block it sits on. With tile it fills its box with the block colour and stands the product on a soft shadow. A link around it picks the product up on hover, and a few have a second gesture: a cup steams, a lamp lights, a pump presses, a jar opens. Zero JavaScript.
- Import: `import ProductArt from '@moonarc/core/ProductArt'`
- Install: `npx astro add moonarc` · copy-paste: `npx shadcn@latest add https://moonarc.dev/r/product-art.json`
- Tier A · category background · trigger hover
- Readout: ``
- Browser support: widely (every browser)
- Measured cost: 0 B JS (CSS 9.7 kB raw)
- Page: https://moonarc.dev/components/product-art/
## Props
| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `'tee' | 'jacket' | 'dress' | 'trousers' | 'tote' | 'cap' | 'vase' | 'cup' | 'bowl' | 'plate' | 'jug' | 'bag' | 'mug' | 'dripper' | 'tin' | 'dropper' | 'jar' | 'tube' | 'pump' | 'chair' | 'stool' | 'lamp' | 'table' | 'shelf' | 'loaf' | 'croissant' | 'cake' | 'cookie' | 'bun'` | none | The drawing. Unset, seed picks one. |
| `seed` | `string` | `''` | A word the drawing is picked from when name is unset: the same word, the same drawing on every build. |
| `set` | `'clothes' | 'ceramics' | 'coffee' | 'skincare' | 'objects' | 'bakery'` | none | Keep the seeded pick to one set. |
| `tile` | `boolean` | `false` | Fill the box: the block colour, the product at four fifths of the box on a soft shadow, a light from the top left. |
| `block` | `1 | 2 | 3 | 4 | 5` | none | The colour block the tile paints, from @moonarc/core/blocks.css or a palette. Unset, the tile takes the ground it sits on. |
| `colour` | `string` | none | The product's colour, any CSS colour (var(--ma-block-2) follows the palette). Unset, the block's first drawing colour. |
| `accent` | `string` | none | The second colour: a glaze, a lid, a band. Unset, the block's second drawing colour. |
| `caption` | `string` | none | A short caption in a pill at the tile's lower left (tile only). |
| `label` | `string` | none | What the picture shows, for a screen reader (role="img"). Unset, the drawing is decoration and hidden from it. |
| `still` | `boolean` | `false` | No movement on hover. |
## Usage
```astro
---
import ProductArt from '@moonarc/core/ProductArt';
import '@moonarc/core/blocks.css';
---
```
## Reduced motion
Nothing moves: the product stays where it is drawn, and the steam, the drips and the lamp's light stay off.
## With ClientRouter
CSS and SVG only; nothing to rebind.
## Craft
- One colour drives the drawing: the shade, the light, the paper of a label and the deep tone of coffee in a cup are mixed from it in OKLab, so a colourway is one custom property and a palette recolours a whole shop.
- The product stands on a shadow that narrows as it lifts, so a hover reads as picking the thing up.
- The second gestures are the ones the object has: a cup steams, a lamp lights, a pump presses, a jar's lid lifts, a tote swings. The steam rises twice and the drips fall three times per hover, then rest.
- The seed is a hash of the word, so a product keeps its drawing between builds; set narrows the pick to one set.
## Replaces
- Product photo placeholders (shop themes)
- Illustration packs (Humaaans, Open Peeps)
## Source
```astro
---
/**
* ProductArt — a product drawn flat, for a shop slot that has no photograph yet: 29 drawings in six sets (clothes,
* ceramics, coffee, skincare, furniture and objects, bakery). Each is a few SVG shapes in the product's colour with a
* shade, a light and an accent mixed from it, so one drawing takes any colourway: `colour` sets it, and unset the
* drawing takes the first motif colour of the colour block or tone it sits on (a palette picks that by contrast with
* the ground). With `tile` it fills its box: the block's ground, the product standing on a soft shadow, an optional
* caption in a pill.
*
* Hovering or focusing a link around it picks the product up a little; a few have a second gesture (a cup steams, a
* lamp lights, a pump presses, a jar's lid lifts, a tote swings). Nothing moves on its own. Zero JavaScript.
*
* `seed` picks a drawing from a word when `name` is not given, the same one on every build; `set` keeps the pick to
* one set.
*/
import type { HTMLAttributes } from 'astro/types';
const sets = {
clothes: ['tee', 'jacket', 'dress', 'trousers', 'tote', 'cap'],
ceramics: ['vase', 'cup', 'bowl', 'plate', 'jug'],
coffee: ['bag', 'mug', 'dripper', 'tin'],
skincare: ['dropper', 'jar', 'tube', 'pump'],
objects: ['chair', 'stool', 'lamp', 'table', 'shelf'],
bakery: ['loaf', 'croissant', 'cake', 'cookie', 'bun'],
} as const;
type ArtSet = keyof typeof sets;
type ArtName = (typeof sets)[ArtSet][number];
interface Props extends HTMLAttributes<'div'> {
/** The drawing. Unset, `seed` picks one. */
name?: ArtName;
/** A word the drawing is picked from when name is unset: the same word, the same drawing. */
seed?: string;
/** Keep the seeded pick to one set. */
set?: ArtSet;
/** Fill the box: the block's ground, the product standing in the middle, a soft light. */
tile?: boolean;
/** The block the tile paints (1–5, `blocks.css`); unset, the tile takes the ground it sits on. */
block?: 1 | 2 | 3 | 4 | 5;
/** The product's colour, any CSS colour. Unset, the block's first motif colour. */
colour?: string;
/** The second colour (a glaze, a cap, a band). Unset, the block's second motif colour. */
accent?: string;
/** A short caption in a pill at the tile's lower edge. */
caption?: string;
/** What the picture shows, for a screen reader. Unset, the drawing is decoration and hidden from it. */
label?: string;
/** No movement on hover. */
still?: boolean;
}
const { name, seed = '', set, tile = false, block, colour, accent, caption, label, still = false, class: className, style, ...rest } = Astro.props;
const pool: readonly ArtName[] = set ? sets[set] : Object.values(sets).flat();
let hash = 0;
for (const ch of seed) hash = (hash * 31 + ch.charCodeAt(0)) >>> 0;
const art: ArtName = name ?? pool[hash % pool.length]!;
const a11y = label ? { role: 'img' as const, 'aria-label': label } : { 'aria-hidden': 'true' as const };
const vars = [colour && `--ma-art-body:${colour}`, accent && `--ma-art-accent:${accent}`, typeof style === 'string' && style].filter(Boolean).join(';') || undefined;
---