Components / Text

Text trail

Use it when a line should land with colour: glyphs appear behind a soft left to right edge (or the line rises), each one hot, cooling through a middle colour to ink.

Install

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

npx hyperframes add text-trail

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-trail" data-composition-src="compositions/text-trail.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
line1	string	Generate	First line.
line2	string	anything	Second line, optional; rises with a smear when entrance is wipe.
line3	string	(empty)	Third line, optional.
next1	string	(empty)	With exit wipe: the line that uncovers behind the erase edge.
next2	string	(empty)	Second incoming line, optional.
entrance	wipe, rise	wipe	wipe uncovers glyph by glyph; rise brings the whole line up from below.
exit	none, up, flick, wipe, fade	none	none, up, flick, wipe, fade.
align	center, left, right	center	Where the text sits in the host.
size	number	18	Font size as percent of the host height.
glow	boolean	false	Soft glow growing behind the text.
trailFrom	color	#ff5fd0	Glyph colour on arrival.
trailVia	color	#7b2fb0	Colour before ink.
accent	color	#e6452c	Warm colour of the flick exit.
glowColor	color	#d6c7ff	Centre of the glow.
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.
stagger	number	0.045	Seconds between glyph arrivals.
trail	number	0.55	Seconds from trail start to ink.
inAt	number	0.04	Seconds before the first glyph.
motionAmount	number	1	Scales rise, smear and push.