Components / Visual

Token swarm

Use it to say "we found these": N tokens carrying any image pop out at an origin, burst to seeded targets around it while spinning on their vertical axis, then float and drift outward.

Install

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

npx hyperframes add token-swarm

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="token-swarm" data-composition-src="compositions/token-swarm.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
image	image	assets/coin-mark.svg	Square image on both faces.
count	number	5	Tokens.
size	number	8	Token diameter as percent of host height.
origin	string	50,50	x,y in percent of the host where tokens pop.
radius	string	20,30	rx,ry in percent of the host for the target ellipse.
edge	color	#c94fb0	Rim seen when a token turns edge on.
at	number	0.2	Seconds before the first token pops.
burstAfter	number	0.12	Seconds after the pop before tokens burst to their targets.
respinAt	string	(empty)	Pipe separated seconds at which tokens spin half a turn.
drift	number	1.3	Multiplier the targets grow to over the hold.
exit	none, fade	none	none or fade.
ground	color	transparent	Background; transparent to overlay.
seed	number	7	Deterministic scatter.