Text wobble

Use it for a working state: the glyphs of a short label bob on their own phases.

Install

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

npx hyperframes add text-wobble

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="text-wobble" data-composition-src="compositions/text-wobble.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
text	string	Generating	Text while working.
doneText	string	Done!	Text swapped in at done time. Empty for no swap.
doneAt	number	1.7	Seconds until the swap.
fadeAfter	number	0.75	Seconds after done before the label fades. Negative keeps it.
amplitude	number	7	Bob height as percent of the font size.
period	number	0.4	Seconds per bob.
align	left, center	left	Where the label sits.
size	number	40	Font size as percent of host height.
ground	color	transparent	Background; transparent to overlay.
ink	color	#1a1418	Resolved text colour.
font	font	"Instrument Serif",Georgia,serif	Display face. Instrument Serif ships with the component.
seed	number	9	Bob phases.