# Lockup

Component. Use for the last frames: icon plus wordmark cut in slightly small and grey, settle to size while the wordmark darkens and the icon straightens, then true stillness.

## 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="lockup" data-composition-src="compositions/lockup.html"
     data-start="0" data-duration="1.6" 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 |
| --- | --- | --- | --- | --- | --- |
| `icon` | image | content | `assets/logo-icon.svg` | Project-relative path or `{ "url": "..." }` | Mark left of the wordmark. Portrays: subject_logo. |
| `wordmark` | string | content | `Launchable` | Up to 24 characters | Brand name. Portrays: subject_name. |
| `wordmarkImage` | image | content | (empty) | Project-relative path or `{ "url": "..." }` | Replaces the text wordmark. Portrays: subject_logo. |
| `italic` | boolean | style | `true` | `true`, `false` | Italic wordmark. |
| `grey` | color | style | `#8a8489` | Hex or `transparent` | Wordmark colour on frame one. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |
| `ink` | color | style | `#1a1418` | Hex or `transparent` | Resolved text colour. |
| `font` | font | style | `"Instrument Serif",Georgia,serif` | CSS font-family stack | Display face. Instrument Serif ships with the component. |
| `size` | number | layout | `14` | 3 through 60 | Wordmark size as percent of host height; the icon is 0.9 of it. |

## Package

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