Components / UI

Window frame

Use it to show a website or app: browser chrome with an address pill around a screen slot (or a tall screenshot), filling the host.

Install

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

npx hyperframes add window-frame

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="window-frame-screen"> in the host page.

<div data-composition-id="window-frame" data-composition-src="compositions/window-frame.html"
     data-start="0" data-duration="6" data-track-index="1"
     style="position:absolute;left:0;top:0;width:1920px;height:1080px"></div>

Variables

Variable	Type	Default	What it changes
screen	image	assets/page.svg	Tall page image; used when no screen slot is provided.
url	string	launchable.video	Address pill text.
scrolls	string	2,75\|4.2,160	Pipe separated t,offset with offset in percent of the screen width (cumulative).
loadIn	boolean	true	Fade the arriving section from faint to solid after each scroll.
column	boolean	true	White left column with orb and label.
label	string	Building brand kit	Text in the column.
orbColor	color	#ff6b6b	Docked orb colour.
radius	number	2.5	Corner radius as percent of host height.
enter	none, rise, fly	none	none, rise, or fly (from the right with a tilt).
ink	color	#1a1418	Text colour.
font	font	"Instrument Serif",Georgia,serif	Display face.
ground	color	transparent	Background; transparent to overlay.