Components / Visual

Orb

Use it as the small living thing next to a label or in a field: a gradient sphere that fills the host, optionally defocused, whose colour moves through up to three stops on a schedule and which can pulse..

Install

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

npx hyperframes add orb

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="orb" data-composition-src="compositions/orb.html"
     data-start="0" data-duration="3" 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	#8d5cf6\|#ff5fcf\|#ff6b6b	Pipe separated hex colours the orb moves through in order.
times	string	0.5\|0.95	Pipe separated seconds at which each stop after the first is reached.
highlight	color	#ffffff	Light spot colour.
defocus	number	3	Blur as percent of the orb size.
pulse	number	0.06	Scale swing while alive, 0 for none.
enter	none, grow, pop	grow	none, grow (scale from 0.6), pop (from 0 with overshoot).
at	number	0	Seconds before the move starts.
exit	none, fade	none	none or fade in the last 0.2 s.
ground	color	transparent	Background; transparent to overlay.