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