# Mosaic reveal

Component. Use for a generated image arriving: the image starts as a thin horizontal line, the top edge snaps up and the bottom frontier travels down as a band of coarse pixels with a jagged edge. Fills the host.

## Mount

Fills its host box: give the host element the size and position you want, the component sizes everything in container units (percent of the host). No fixed canvas.

```html
<div data-composition-id="mosaic-reveal" data-composition-src="compositions/mosaic-reveal.html"
     data-start="0" data-duration="3.2" data-track-index="2"
     data-variable-values='{ "...": "..." }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>
```

## Slots

No HTML slot; content comes from variables.

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `image` | image | content | `assets/photo.svg` | Project-relative path or `{ "url": "..." }` | Covers the host. Portrays: subject_image. |
| `blockSize` | number | style | `4` | 1 through 20 | Percent of host height. |
| `revealDuration` | number | timing | `1` | 0.2 through 5 | Seconds for the frontier to reach the bottom. |
| `startLine` | number | layout | `0.4` | 0.05 through 0.95 | Fraction of the height where the line starts. |
| `at` | number | timing | `0.02` | 0 through 30 | Seconds before the move starts. |
| `exit` | enum | motion | `none` | `none`, `shrink` | none or shrink. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |
| `seed` | number | motion | `7` | 1 through 999 | Deterministic scatter. |

## Package

`index.html` is a demo host at 1920 by 1080; `compositions/mosaic-reveal.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["mosaic-reveal"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.