Components / Text

Lockup

Use it for the last frames: icon plus wordmark cut in slightly small and grey, settle to size while the wordmark darkens and the icon straightens, then true stillness..

Install

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

npx hyperframes add lockup

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="lockup" data-composition-src="compositions/lockup.html"
     data-start="0" data-duration="1.6" data-track-index="1"
     style="position:absolute;left:0;top:0;width:1920px;height:1080px"></div>

Variables

Variable	Type	Default	What it changes
icon	image	assets/logo-icon.svg	Mark left of the wordmark.
wordmark	string	Launchable	Brand name.
wordmarkImage	image	(empty)	Replaces the text wordmark.
italic	boolean	true	Italic wordmark.
grey	color	#8a8489	Wordmark colour on frame one.
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.
size	number	14	Wordmark size as percent of host height; the icon is 0.9 of it.