Components / UI

Grow to bounds

Use it 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.

Install

With this registry set in hyperframes.json (see the docs):

npx hyperframes add grow-to-bounds

Use 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="grow-to-bounds-content"> in the host page.

<div data-composition-id="grow-to-bounds" data-composition-src="compositions/grow-to-bounds.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
from	string	20,50,18,12	x,y,w,h in percent of the host where the panel starts.
color	color	#ffffff	Panel colour.
radius	number	3.5	Corner radius as percent of host height.
at	number	0.05	Seconds before the panel appears.
duration	number	0.4	Seconds to reach the bounds.
text	string	Brand kit created successfully	Default content when no slot is given: typed after the panel lands.
cps	number	26	Typing rate of the default content.
orbA	color	#8de07a	Default content orb, light side.
orbB	color	#1e8f4f	Default content orb, dark side.
grey	color	#a39da1	Landing colour of typed characters.
ink	color	#1a1418	Text colour.
font	font	"Instrument Serif",Georgia,serif	Display face.
ground	color	transparent	Background; transparent to overlay.