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