Aurora

Use it behind UI: two to four heavily blurred colour blobs that fade in and drift slowly.

Install

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

npx hyperframes add aurora

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

Variables

Variable	Type	Default	What it changes
colors	string	#cfe3ff\|#ffd9c9\|#ffd0ec	Pipe separated hex colours, one blob each.
blur	number	8	Percent of the host height.
opacity	number	0.9	0 to 1.
drift	number	3	Percent of host width the blobs travel over the duration.
at	number	0	Seconds before the blobs start fading in.
fadeIn	number	0.6	Seconds to full opacity.
ground	color	transparent	Background; transparent to overlay.
seed	number	7	Deterministic scatter.