# Launchable Motion, every component

Install: set "registry": "https://motion.launchable.video/r" in hyperframes.json, then `npx hyperframes add <name>`.

# Aurora

Component. Use behind UI: two to four heavily blurred colour blobs that fade in and drift slowly. Put it on the lowest track under a scene.

## 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="aurora" data-composition-src="compositions/aurora.html"
     data-start="0" data-duration="5" 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 |
| --- | --- | --- | --- | --- | --- |
| `colors` | string | style | `#cfe3ff|#ffd9c9|#ffd0ec` | Text | Pipe separated hex colours, one blob each. |
| `blur` | number | style | `8` | 1 through 30 | Percent of the host height. |
| `opacity` | number | style | `0.9` | 0 through 1 | 0 to 1. |
| `drift` | number | motion | `3` | 0 through 20 | Percent of host width the blobs travel over the duration. |
| `at` | number | timing | `0` | 0 through 30 | Seconds before the blobs start fading in. |
| `fadeIn` | number | timing | `0.6` | 0 through 5 | Seconds to full opacity. |
| `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/aurora.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["aurora"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# Blur reveal

Component. Use for anything that is being worked on: the slot content (an image or any HTML) sits heavily out of focus at reduced opacity, sharpens a little while waiting, then snaps to focus at the reveal time under a slow push. Optional exit that shrinks and tints away.

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

## Slots

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

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `image` | image | content | `assets/poster.svg` | Project-relative path or `{ "url": "..." }` | Used when no content slot is provided. Fitted inside the host. Portrays: subject_image. |
| `blurStart` | number | motion | `3` | 0 through 10 | Percent of host height. |
| `preSharpen` | number | motion | `0.6` | 0 through 1 | Fraction of the blur left when the reveal starts. |
| `opacityStart` | number | style | `0.75` | 0 through 1 | Opacity while waiting. |
| `revealAt` | number | timing | `1.7` | 0 through 30 | Seconds until focus snaps. |
| `revealDuration` | number | timing | `0.6` | 0.05 through 3 | Seconds to full focus. |
| `push` | number | motion | `0.06` | 0 through 0.5 | Scale gained over the duration. |
| `exit` | enum | motion | `none` | `none`, `shrink` | none or shrink. |
| `exitTint` | color | style | `#ebe4ff` | Hex or `transparent` | Ground colour during the shrink exit. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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

---

# Camera rig

Component. Use to move a camera over anything: the content slot is wrapped and driven by a keyframe path of time, scale, x, y and ease. Positive x pans the content right. Good for long pushes into a field and pans onto a button.

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

## Slots

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

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `path` | string | motion | `0,1,0,0,none|2.2,1.9,0,0,power1.inOut|2.55,1.9,-30,0,power3.inOut|3.4,1.9,-35,0,expo.out` | Text | Pipe separated keyframes: t,scale,x,y,ease with x and y in percent of the host. The first keyframe is the start state. |
| `origin` | string | layout | `20,46` | Text | Transform origin in percent of the host: x,y. |
| `blurOnMove` | number | motion | `0` | 0 through 3 | Blur in percent of host height added during fast segments (0 for none). |
| `image` | image | content | `assets/page.svg` | Project-relative path or `{ "url": "..." }` | Used when no content slot is provided. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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

---

# Collage burst

Component. Use around a headline or a product: up to twelve images fly in from beyond the host edges to seeded slots on a ring that keeps the centre clear, overshoot and float. Exit up with a smear or hold.

## 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="collage-burst" data-composition-src="compositions/collage-burst.html"
     data-start="0" data-duration="3" 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 |
| --- | --- | --- | --- | --- | --- |
| `image1` | image | content | `assets/tile-01.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image2` | image | content | `assets/tile-02.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image3` | image | content | `assets/tile-03.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image4` | image | content | `assets/tile-04.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image5` | image | content | `assets/tile-05.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image6` | image | content | `assets/tile-06.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image7` | image | content | `assets/tile-07.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image8` | image | content | `assets/tile-08.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image9` | image | content | `assets/tile-09.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image10` | image | content | `assets/tile-10.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image11` | image | content | `assets/tile-11.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image12` | image | content | `assets/tile-12.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `clear` | number | layout | `30` | 0 through 60 | Percent of host width kept free at the centre. |
| `tileSize` | number | layout | `18` | 5 through 40 | Max tile width as percent of host width. |
| `radius` | number | style | `1` | 0 through 10 | Percent of host height. |
| `at` | number | timing | `0.46` | 0 through 30 | Seconds before the first tile. |
| `exit` | enum | motion | `up` | `up`, `none` | up or none. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |
| `seed` | number | motion | `2` | 1 through 999 | Slot positions. |

## Package

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

---

# Dropdown select

Component. Use for a choice being made in UI: a rounded trigger that fills the host, whose background slides down onto the chosen item when the list opens and saturates to the highlight colour with a check mark, while the trigger label greys and the other items sit out of focus below. Closes with the chosen label in the trigger. Fade the surroundings yourself for depth of field.

## 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="dropdown-select" data-composition-src="compositions/dropdown-select.html"
     data-start="0" data-duration="3" 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 |
| --- | --- | --- | --- | --- | --- |
| `label` | string | content | `Select brand` | Up to 30 characters | Text before a choice. |
| `items` | string | content | `Launchable|New brand` | Up to 200 characters | Pipe separated options in order. |
| `chosen` | number | content | `0` | 0 through 20 | Zero based index of the option picked. |
| `openAt` | number | timing | `0.4` | 0 through 30 | Seconds until the list opens. |
| `closeAt` | number | timing | `2.1` | -1 through 30 | Seconds until it closes. Negative keeps it open. |
| `highlight` | color | style | `#ff7ad9` | Hex or `transparent` | Colour the selection saturates to. |
| `idle` | color | style | `#f0edf0` | Hex or `transparent` | Trigger background before selection. |
| `zoom` | number | motion | `1.1` | 1 through 1.5 | Scale the group grows to while open. |
| `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/dropdown-select.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["dropdown-select"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# Grow to bounds

Component. Use for a card, modal or panel taking over: a rounded panel grows from a small rect to the whole host while its content keeps its size at the centre. Content comes from a slot; the default is a typed line next to a green orb.

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

## Slots

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

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `from` | string | layout | `20,50,18,12` | Text | x,y,w,h in percent of the host where the panel starts. |
| `color` | color | style | `#ffffff` | Hex or `transparent` | Panel colour. |
| `radius` | number | style | `3.5` | 0 through 20 | Corner radius as percent of host height. |
| `at` | number | timing | `0.05` | 0 through 30 | Seconds before the panel appears. |
| `duration` | number | timing | `0.4` | 0.1 through 3 | Seconds to reach the bounds. |
| `text` | string | content | `Brand kit created successfully` | Up to 60 characters | Default content when no slot is given: typed after the panel lands. |
| `cps` | number | timing | `26` | 4 through 80 | Typing rate of the default content. |
| `orbA` | color | style | `#8de07a` | Hex or `transparent` | Default content orb, light side. |
| `orbB` | color | style | `#1e8f4f` | Hex or `transparent` | Default content orb, dark side. |
| `grey` | color | style | `#a39da1` | Hex or `transparent` | Landing colour of typed characters. |
| `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/grow-to-bounds.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["grow-to-bounds"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# 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.

---

# 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.

---

# 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.

---

# Orb

Component. Use as the small living thing next to a label or in a field: a gradient sphere that fills the host, optionally defocused, whose colour moves through up to three stops on a schedule and which can pulse.

## 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="orb" data-composition-src="compositions/orb.html"
     data-start="0" data-duration="3" 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 |
| --- | --- | --- | --- | --- | --- |
| `colors` | string | style | `#8d5cf6|#ff5fcf|#ff6b6b` | Text | Pipe separated hex colours the orb moves through in order. |
| `times` | string | timing | `0.5|0.95` | Text | Pipe separated seconds at which each stop after the first is reached. |
| `highlight` | color | style | `#ffffff` | Hex or `transparent` | Light spot colour. |
| `defocus` | number | style | `3` | 0 through 30 | Blur as percent of the orb size. |
| `pulse` | number | motion | `0.06` | 0 through 0.4 | Scale swing while alive, 0 for none. |
| `enter` | enum | motion | `grow` | `none`, `grow`, `pop` | none, grow (scale from 0.6), pop (from 0 with overshoot). |
| `at` | number | timing | `0` | 0 through 30 | Seconds before the move starts. |
| `exit` | enum | motion | `none` | `none`, `fade` | none or fade in the last 0.2 s. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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

---

# Pill shell

Component. Use as the frame of any input or status: a white pill that fills the host with an optional orb at the left, an arrow button at the right and a content slot between them. It can rise in, grow out of its left cap, refit its width, flip to a gradient fill at a chosen time (with the button restyled) and glow.

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

## Slots

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

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `text` | string | content | `launchable.video` | Up to 60 characters | Static text in the slot when no content slot is provided. |
| `showOrb` | boolean | style | `true` | `true`, `false` | Gradient orb at the left. |
| `showButton` | boolean | style | `true` | `true`, `false` | Arrow button at the right. |
| `enter` | enum | motion | `rise` | `rise`, `grow`, `none` | rise, grow (from the left cap), none. |
| `fitTo` | number | layout | `1` | 0.2 through 1 | Fraction of the host width the pill settles to (1 = full). |
| `fillAt` | number | timing | `-1` | -1 through 30 | Seconds when the pill flips to the gradient fill. Negative for never. |
| `fillA` | color | style | `#6a2fe0` | Hex or `transparent` | Dark stop of the gradient fill. |
| `fillB` | color | style | `#eadfff` | Hex or `transparent` | Light stop of the gradient fill. |
| `orbA` | color | style | `#ff4fd8` | Hex or `transparent` | Light side of the orb. |
| `orbB` | color | style | `#5b1fb8` | Hex or `transparent` | Dark side of the orb. |
| `buttonColor` | color | style | `#2b2628` | Hex or `transparent` | Arrow button colour. |
| `pillColor` | color | style | `#ffffff` | Hex or `transparent` | Pill colour. |
| `shadow` | boolean | style | `true` | `true`, `false` | Soft drop shadow. |
| `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/pill-shell.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["pill-shell"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# Rows build

Component. Use for any list, sheet or spec assembling itself: the children of the rows slot (or plain text items) fade and rise in one after another, top to bottom, with a touch of blur. Sub items marked data-chip stagger inside their row.

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

## Slots

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

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `items` | string | content | `LAUNCHABLE|Your content on demand|Film on your phone, get an edited reel back.` | Up to 300 characters | Pipe separated text rows used when no rows slot is provided. |
| `at` | number | timing | `0.2` | 0 through 30 | Seconds before the first row. |
| `stagger` | number | timing | `0.09` | 0 through 1 | Seconds between rows. |
| `rise` | number | motion | `1.5` | 0 through 10 | Rise distance as percent of host height. |
| `size` | number | layout | `5` | 1 through 20 | Default rows: font size as percent of host height. |
| `exit` | enum | motion | `none` | `none`, `fade` | none or fade. |
| `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/rows-build.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["rows-build"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# Specular sweep

Component. Use on a surface that just changed: a soft light band sweeps across the host once. Overlay it on a pill, a card or an image.

## 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="specular-sweep" data-composition-src="compositions/specular-sweep.html"
     data-start="0" data-duration="1" 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 |
| --- | --- | --- | --- | --- | --- |
| `color` | color | style | `#ffffff` | Hex or `transparent` | Band colour. |
| `opacity` | number | style | `0.95` | 0 through 1 | Peak opacity. |
| `width` | number | style | `20` | 2 through 100 | Band width as percent of host width. |
| `angle` | number | layout | `28` | -80 through 80 | Degrees. |
| `direction` | enum | motion | `rtl` | `rtl`, `ltr` | rtl or ltr. |
| `at` | number | timing | `0.1` | 0 through 30 | Seconds before the move starts. |
| `duration` | number | timing | `0.5` | 0.1 through 3 | Seconds for one sweep. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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

---

# Sprite pop

Component. Use for organic accents or a full cover: N copies of a sprite pop around a focal point one after another with an overshoot, keep growing, then shrink and fade together. cover fills the host from the centre outward; accents places a few around the focal point; explicit positions are accepted.

## 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="sprite-pop" data-composition-src="compositions/sprite-pop.html"
     data-start="0" data-duration="2.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 |
| --- | --- | --- | --- | --- | --- |
| `sprite` | image | content | `assets/petal.svg` | Project-relative path or `{ "url": "..." }` | Petal, leaf, mark, blob. |
| `mode` | enum | layout | `cover` | `cover`, `accents`, `explicit` | cover, accents, or explicit positions. |
| `count` | number | layout | `16` | 1 through 40 | Sprites (cover and accents). |
| `positions` | string | layout | `50,72,1.7|30,32,0.7|70,32,0.7` | Text | Explicit mode: pipe separated x,y,scale in percent of host and a scale factor. |
| `focal` | string | layout | `50,50` | Text | x,y in percent of the host. |
| `size` | number | layout | `34` | 4 through 120 | Sprite size as percent of host height. |
| `at` | number | timing | `0.1` | 0 through 30 | Seconds before the first sprite pops. |
| `stagger` | number | timing | `0.045` | 0 through 0.5 | Seconds between pops. |
| `multiply` | boolean | style | `true` | `true`, `false` | Blend sprites into what is under them. |
| `exit` | enum | motion | `shrink` | `shrink`, `none` | shrink fades all sprites in the last 0.2 s; none keeps them. |
| `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/sprite-pop.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["sprite-pop"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# Text scatter

Component. Use when a line should feel thrown into place: words arrive from scattered offsets, each at its own size, height and blur, and converge onto one baseline with a small overshoot. Optional settle from oversized. Exits: none, demote (grey and shrink), fade.

## 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="text-scatter" data-composition-src="compositions/text-scatter.html"
     data-start="0" data-duration="2.5" 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 |
| --- | --- | --- | --- | --- | --- |
| `text` | string | content | `What would you like to create?` | Up to 80 characters | One line of words. |
| `align` | enum | layout | `center` | `center`, `left`, `right` | Where the text sits in the host. |
| `size` | number | layout | `8` | 3 through 60 | Font size as percent of the host height. |
| `spread` | number | motion | `1` | 0 through 2 | How far words start from rest, 0 to 2. |
| `scaleMax` | number | motion | `2` | 1 through 4 | Largest starting scale of a word. |
| `settle` | number | motion | `1` | 1 through 1.6 | Scale the aligned line holds before easing to 1 (1 = no settle). |
| `exit` | enum | motion | `none` | `none`, `demote`, `fade` | none, demote, fade. |
| `grey` | color | style | `#9c969a` | Hex or `transparent` | Colour of the demote exit. |
| `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. |
| `inAt` | number | timing | `0.04` | 0 through 10 | Seconds before the first word. |
| `seed` | number | motion | `5` | 1 through 999 | Scatter pattern. |

## Package

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

---

# Text swap

Component. Use for a status line or any label that changes: each new label rises in from below with a vertical smear while the old one leaves upward, two frames of overlap. Labels are pipe separated and swap on a fixed interval or at explicit times.

## 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="text-swap" data-composition-src="compositions/text-swap.html"
     data-start="0" data-duration="5" 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 |
| --- | --- | --- | --- | --- | --- |
| `labels` | string | content | `Going to ‘launchable.video’|Extracting styles|Building brand kit` | Up to 200 characters | Pipe separated, in order. |
| `interval` | number | timing | `1.5` | 0.3 through 10 | Seconds each label holds. |
| `times` | string | timing | (empty) | Text | Optional pipe separated seconds for each swap; overrides interval. |
| `inAt` | number | timing | `0.1` | 0 through 10 | Seconds before the first label rises. |
| `direction` | enum | motion | `up` | `up`, `down` | up: new label comes from below. down: from above. |
| `align` | enum | layout | `center` | `center`, `left`, `right` | Where the text sits in the host. |
| `size` | number | layout | `9` | 3 through 60 | Font size as percent of the host height. |
| `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. |
| `exit` | enum | motion | `none` | `none`, `out` | none holds the last label; out leaves the same way. |

## Package

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

---

# Text trail

Component. Use when a line should land with colour: glyphs appear behind a soft left to right edge (or the line rises), each one hot, cooling through a middle colour to ink. One to three lines. Exits: none, up with smear, warm flick and zoom, wipe (with optional incoming lines behind the same edge), fade.

## 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="text-trail" data-composition-src="compositions/text-trail.html"
     data-start="0" data-duration="3" 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 |
| --- | --- | --- | --- | --- | --- |
| `line1` | string | content | `Generate` | Up to 40 characters | First line. |
| `line2` | string | content | `anything` | Up to 40 characters | Second line, optional; rises with a smear when entrance is wipe. |
| `line3` | string | content | (empty) | Up to 40 characters | Third line, optional. |
| `next1` | string | content | (empty) | Up to 40 characters | With exit wipe: the line that uncovers behind the erase edge. |
| `next2` | string | content | (empty) | Up to 40 characters | Second incoming line, optional. |
| `entrance` | enum | motion | `wipe` | `wipe`, `rise` | wipe uncovers glyph by glyph; rise brings the whole line up from below. |
| `exit` | enum | motion | `none` | `none`, `up`, `flick`, `wipe`, `fade` | none, up, flick, wipe, fade. |
| `align` | enum | layout | `center` | `center`, `left`, `right` | Where the text sits in the host. |
| `size` | number | layout | `18` | 3 through 60 | Font size as percent of the host height. |
| `glow` | boolean | style | `false` | `true`, `false` | Soft glow growing behind the text. |
| `trailFrom` | color | style | `#ff5fd0` | Hex or `transparent` | Glyph colour on arrival. |
| `trailVia` | color | style | `#7b2fb0` | Hex or `transparent` | Colour before ink. |
| `accent` | color | style | `#e6452c` | Hex or `transparent` | Warm colour of the flick exit. |
| `glowColor` | color | style | `#d6c7ff` | Hex or `transparent` | Centre of the glow. |
| `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. |
| `stagger` | number | timing | `0.045` | 0.01 through 0.15 | Seconds between glyph arrivals. |
| `trail` | number | timing | `0.55` | 0.1 through 2 | Seconds from trail start to ink. |
| `inAt` | number | timing | `0.04` | 0 through 10 | Seconds before the first glyph. |
| `motionAmount` | number | motion | `1` | 0 through 2 | Scales rise, smear and push. |

## Package

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

---

# Text type

Component. Use when text should be typed: characters land whole with seeded jitter around the rate, no caret. Optional placeholder that fades before typing; optional grey landing that darkens to ink shortly after each character.

## 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="text-type" data-composition-src="compositions/text-type.html"
     data-start="0" data-duration="3" 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 |
| --- | --- | --- | --- | --- | --- |
| `text` | string | content | `launchable.video` | Up to 120 characters | What gets typed. |
| `placeholder` | string | content | `domain.com` | Up to 60 characters | Shown before typing, fades out. Empty for none. |
| `cps` | number | timing | `14` | 2 through 80 | Rate before jitter. |
| `typeAt` | number | timing | `0.6` | 0 through 10 | Seconds before the first character. |
| `greyLanding` | boolean | motion | `false` | `true`, `false` | Characters land grey and darken to ink 0.12 s later. |
| `align` | enum | layout | `left` | `left`, `center` | Where the text sits. |
| `size` | number | layout | `30` | 3 through 60 | Font size as percent of host height (the host is usually one text row). |
| `placeholderColor` | color | style | `#797578` | Hex or `transparent` | Colour of the placeholder. |
| `grey` | color | style | `#a39da1` | Hex or `transparent` | Colour a character lands in when grey landing is on. |
| `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. |
| `seed` | number | motion | `11` | 1 through 999 | Typing jitter. |

## Package

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

---

# Text wave

Component. Use when a sentence should be read word by word: words land in light grey one after another, then a colour wave runs left to right turning each word accent, then ink. Exit fades with blur.

## 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="text-wave" data-composition-src="compositions/text-wave.html"
     data-start="0" data-duration="2.4" 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 |
| --- | --- | --- | --- | --- | --- |
| `text` | string | content | `Generate any brand asset` | Up to 80 characters | Three to eight words. |
| `align` | enum | layout | `left` | `left`, `center`, `right` | Where the text sits. |
| `size` | number | layout | `10` | 3 through 60 | Font size as percent of the host height. |
| `accent` | color | style | `#7b2f8e` | Hex or `transparent` | Focus word colour. |
| `grey` | color | style | `#c9c4c8` | Hex or `transparent` | Colour on landing. |
| `greyDark` | color | style | `#6a6467` | Hex or `transparent` | Colour before the wave arrives. |
| `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. |
| `wordInterval` | number | timing | `0.16` | 0.04 through 1 | Seconds between landings. |
| `waveStep` | number | timing | `0.13` | 0.04 through 1 | Seconds between focus moves. |
| `exit` | enum | motion | `fade` | `fade`, `none` | fade or none. |

## Package

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

---

# Text wobble

Component. Use for a working state: the glyphs of a short label bob on their own phases. At a chosen time the label shrinks to a point, swaps to the done text and pops back with a slight overshoot, then fades. Pair it with an orb or a blur reveal.

## 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="text-wobble" data-composition-src="compositions/text-wobble.html"
     data-start="0" data-duration="3" 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 |
| --- | --- | --- | --- | --- | --- |
| `text` | string | content | `Generating` | Up to 30 characters | Text while working. |
| `doneText` | string | content | `Done!` | Up to 30 characters | Text swapped in at done time. Empty for no swap. |
| `doneAt` | number | timing | `1.7` | 0.3 through 20 | Seconds until the swap. |
| `fadeAfter` | number | timing | `0.75` | -1 through 10 | Seconds after done before the label fades. Negative keeps it. |
| `amplitude` | number | motion | `7` | 0 through 30 | Bob height as percent of the font size. |
| `period` | number | timing | `0.4` | 0.1 through 2 | Seconds per bob. |
| `align` | enum | layout | `left` | `left`, `center` | Where the label sits. |
| `size` | number | layout | `40` | 3 through 60 | Font size as percent of host height. |
| `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. |
| `seed` | number | motion | `9` | 1 through 999 | Bob phases. |

## Package

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

---

# Token swarm

Component. Use to say "we found these": N tokens carrying any image pop out at an origin, burst to seeded targets around it while spinning on their vertical axis, then float and drift outward. Re-spin at chosen times to react to events. Tokens have visible thickness.

## 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="token-swarm" data-composition-src="compositions/token-swarm.html"
     data-start="0" data-duration="5" 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/coin-mark.svg` | Project-relative path or `{ "url": "..." }` | Square image on both faces. Portrays: subject_logo. |
| `count` | number | layout | `5` | 1 through 12 | Tokens. |
| `size` | number | layout | `8` | 2 through 30 | Token diameter as percent of host height. |
| `origin` | string | layout | `50,50` | Text | x,y in percent of the host where tokens pop. |
| `radius` | string | layout | `20,30` | Text | rx,ry in percent of the host for the target ellipse. |
| `edge` | color | style | `#c94fb0` | Hex or `transparent` | Rim seen when a token turns edge on. |
| `at` | number | timing | `0.2` | 0 through 30 | Seconds before the first token pops. |
| `burstAfter` | number | timing | `0.12` | 0 through 3 | Seconds after the pop before tokens burst to their targets. |
| `respinAt` | string | timing | (empty) | Text | Pipe separated seconds at which tokens spin half a turn. |
| `drift` | number | motion | `1.3` | 1 through 2 | Multiplier the targets grow to over the hold. |
| `exit` | enum | motion | `none` | `none`, `fade` | none or fade. |
| `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/token-swarm.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["token-swarm"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.

---

# 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.

---

# Wipe diagonal

Component. Use as a seam: a colour sweeps across the host along a diagonal edge with a soft glow riding the edge. Put it above the outgoing scene; cover brings the colour in and holds, reveal starts covered and clears.

## 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="wipe-diagonal" data-composition-src="compositions/wipe-diagonal.html"
     data-start="0" data-duration="1.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 |
| --- | --- | --- | --- | --- | --- |
| `color` | color | style | `#060308` | Hex or `transparent` | Colour of the wipe. |
| `glowColor` | color | style | `#a964ff` | Hex or `transparent` | Colour of the band riding the edge. |
| `angle` | number | layout | `35` | -80 through 80 | Edge angle in degrees from horizontal. |
| `from` | enum | motion | `top-right` | `top-right`, `top-left`, `bottom-right`, `bottom-left` | Corner the colour comes from. |
| `mode` | enum | motion | `cover` | `cover`, `reveal` | cover or reveal. |
| `at` | number | timing | `0.2` | 0 through 30 | Seconds before the move starts. |
| `duration` | number | timing | `0.2` | 0.05 through 3 | Seconds the edge takes to cross. |
| `glowWidth` | number | style | `30` | 0 through 100 | Percent of host height. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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