# Window frame

Component. Use to show a website or app: browser chrome with an address pill around a screen slot (or a tall screenshot), filling the host. Scroll steps move the screen at given times with a load-in fade on arrival. Optional docked left column with an orb and label.

## 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="window-frame" data-composition-src="compositions/window-frame.html"
     data-start="0" data-duration="6" data-track-index="2"
     data-variable-values='{ "...": "..." }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>
```

## Slots

- `<template data-slot="window-frame-screen">…</template>` placed anywhere in the host page: its content is cloned into the screen box. Without it the component uses its variables.

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `screen` | image | content | `assets/page.svg` | Project-relative path or `{ "url": "..." }` | Tall page image; used when no screen slot is provided. Portrays: subject_image. |
| `url` | string | content | `launchable.video` | Up to 40 characters | Address pill text. Portrays: subject_domain. |
| `scrolls` | string | timing | `2,75|4.2,160` | Text | Pipe separated t,offset with offset in percent of the screen width (cumulative). |
| `loadIn` | boolean | motion | `true` | `true`, `false` | Fade the arriving section from faint to solid after each scroll. |
| `column` | boolean | layout | `true` | `true`, `false` | White left column with orb and label. |
| `label` | string | content | `Building brand kit` | Up to 30 characters | Text in the column. |
| `orbColor` | color | style | `#ff6b6b` | Hex or `transparent` | Docked orb colour. |
| `radius` | number | style | `2.5` | 0 through 10 | Corner radius as percent of host height. |
| `enter` | enum | motion | `none` | `none`, `rise`, `fly` | none, rise, or fly (from the right with a tilt). |
| `ink` | color | style | `#1a1418` | Hex or `transparent` | Text colour. |
| `font` | font | style | `"Instrument Serif",Georgia,serif` | CSS font-family stack | Display face. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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