Components / UI

Highlight box

Use it to point at something on a screenshot: selection draws a text highlight left to right over a rect; scan grows a translucent fill from the centre of a rect and fades a frame in around it, then reverts.

Install

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

npx hyperframes add highlight-box

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.

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

Variables

Variable	Type	Default	What it changes
mode	selection, scan	selection	selection or scan.
rect	string	30,20,40,8	x,y,w,h in percent of the host.
color	color	#7fb4ff	Highlight or scan fill colour.
frame	color	#8ec5ff	Scan frame colour.
opacity	number	0.55	0 to 1.
at	number	0.2	Seconds before the box appears.
hold	number	1	Seconds the box stays before reverting. Negative keeps it.
ground	color	transparent	Background; transparent to overlay.