Text type

Use it when text should be typed: characters land whole with seeded jitter around the rate, no caret.

Install

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

npx hyperframes add text-type

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-type" data-composition-src="compositions/text-type.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	launchable.video	What gets typed.
placeholder	string	domain.com	Shown before typing, fades out. Empty for none.
cps	number	14	Rate before jitter.
typeAt	number	0.6	Seconds before the first character.
greyLanding	boolean	false	Characters land grey and darken to ink 0.12 s later.
align	left, center	left	Where the text sits.
size	number	30	Font size as percent of host height (the host is usually one text row).
placeholderColor	color	#797578	Colour of the placeholder.
grey	color	#a39da1	Colour a character lands in when grey landing is on.
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	11	Typing jitter.