Specular sweep

Use it on a surface that just changed: a soft light band sweeps across the host once.

Install

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

npx hyperframes add specular-sweep

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="specular-sweep" data-composition-src="compositions/specular-sweep.html"
     data-start="0" data-duration="1" data-track-index="1"
     style="position:absolute;left:0;top:0;width:1920px;height:1080px"></div>

Variables

Variable	Type	Default	What it changes
color	color	#ffffff	Band colour.
opacity	number	0.95	Peak opacity.
width	number	20	Band width as percent of host width.
angle	number	28	Degrees.
direction	rtl, ltr	rtl	rtl or ltr.
at	number	0.1	Seconds before the move starts.
duration	number	0.5	Seconds for one sweep.
ground	color	transparent	Background; transparent to overlay.