Wipe diagonal

Use it as a seam: a colour sweeps across the host along a diagonal edge with a soft glow riding the edge.

Install

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

npx hyperframes add wipe-diagonal

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="wipe-diagonal" data-composition-src="compositions/wipe-diagonal.html"
     data-start="0" data-duration="1.2" 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	#060308	Colour of the wipe.
glowColor	color	#a964ff	Colour of the band riding the edge.
angle	number	35	Edge angle in degrees from horizontal.
from	top-right, top-left, bottom-right, bottom-left	top-right	Corner the colour comes from.
mode	cover, reveal	cover	cover or reveal.
at	number	0.2	Seconds before the move starts.
duration	number	0.2	Seconds the edge takes to cross.
glowWidth	number	30	Percent of host height.
ground	color	transparent	Background; transparent to overlay.