# Highlight box

Component. Use to point at something on a screenshot: selection draws a text highlight left to right over a rect; scan grows a translucent fill from the centre of a rect and fades a frame in around it, then reverts. Overlay it on the screen and give the rect in percent of 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="highlight-box" data-composition-src="compositions/highlight-box.html"
     data-start="0" data-duration="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 |
| --- | --- | --- | --- | --- | --- |
| `mode` | enum | motion | `selection` | `selection`, `scan` | selection or scan. |
| `rect` | string | layout | `30,20,40,8` | Text | x,y,w,h in percent of the host. |
| `color` | color | style | `#7fb4ff` | Hex or `transparent` | Highlight or scan fill colour. |
| `frame` | color | style | `#8ec5ff` | Hex or `transparent` | Scan frame colour. |
| `opacity` | number | style | `0.55` | 0 through 1 | 0 to 1. |
| `at` | number | timing | `0.2` | 0 through 30 | Seconds before the box appears. |
| `hold` | number | timing | `1` | -1 through 30 | Seconds the box stays before reverting. Negative keeps it. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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