Components / Text

Text swap

Use it for a status line or any label that changes: each new label rises in from below with a vertical smear while the old one leaves upward, two frames of overlap.

Install

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

npx hyperframes add text-swap

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-swap" data-composition-src="compositions/text-swap.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
labels	string	Going to ‘launchable.video’\|Extracting styles\|Building brand kit	Pipe separated, in order.
interval	number	1.5	Seconds each label holds.
times	string	(empty)	Optional pipe separated seconds for each swap; overrides interval.
inAt	number	0.1	Seconds before the first label rises.
direction	up, down	up	up: new label comes from below. down: from above.
align	center, left, right	center	Where the text sits in the host.
size	number	9	Font size as percent of the 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.
exit	none, out	none	none holds the last label; out leaves the same way.