Components / Visual

Sprite pop

Use it for organic accents or a full cover: N copies of a sprite pop around a focal point one after another with an overshoot, keep growing, then shrink and fade together.

Install

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

npx hyperframes add sprite-pop

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

Variables

Variable	Type	Default	What it changes
sprite	image	assets/petal.svg	Petal, leaf, mark, blob.
mode	cover, accents, explicit	cover	cover, accents, or explicit positions.
count	number	16	Sprites (cover and accents).
positions	string	50,72,1.7\|30,32,0.7\|70,32,0.7	Explicit mode: pipe separated x,y,scale in percent of host and a scale factor.
focal	string	50,50	x,y in percent of the host.
size	number	34	Sprite size as percent of host height.
at	number	0.1	Seconds before the first sprite pops.
stagger	number	0.045	Seconds between pops.
multiply	boolean	true	Blend sprites into what is under them.
exit	shrink, none	shrink	shrink fades all sprites in the last 0.2 s; none keeps them.
ground	color	transparent	Background; transparent to overlay.
seed	number	7	Deterministic scatter.