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