Components / UI
Pill shell
Use it 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.
Install
With this registry set in hyperframes.json (see the docs):
npx hyperframes add pill-shellUse it in a composition
It fills whatever box you give it, so set the host element's size and position. Set values withdata-variable-values. It also takes HTML in a <template data-slot="pill-shell-content"> in the host page.
<div data-composition-id="pill-shell" data-composition-src="compositions/pill-shell.html"
data-start="0" data-duration="3" data-track-index="1"
style="position:absolute;left:0;top:0;width:1920px;height:1080px"></div>Variables
| Variable | Type | Default | What it changes |
|---|---|---|---|
| text | string | launchable.video | Static text in the slot when no content slot is provided. |
| showOrb | boolean | true | Gradient orb at the left. |
| showButton | boolean | true | Arrow button at the right. |
| enter | rise, grow, none | rise | rise, grow (from the left cap), none. |
| fitTo | number | 1 | Fraction of the host width the pill settles to (1 = full). |
| fillAt | number | -1 | Seconds when the pill flips to the gradient fill. Negative for never. |
| fillA | color | #6a2fe0 | Dark stop of the gradient fill. |
| fillB | color | #eadfff | Light stop of the gradient fill. |
| orbA | color | #ff4fd8 | Light side of the orb. |
| orbB | color | #5b1fb8 | Dark side of the orb. |
| buttonColor | color | #2b2628 | Arrow button colour. |
| pillColor | color | #ffffff | Pill colour. |
| shadow | boolean | true | Soft drop shadow. |
| ink | color | #1a1418 | Text colour. |
| font | font | "Instrument Serif",Georgia,serif | Display face. |
| ground | color | transparent | Background; transparent to overlay. |