Components / UI

Rows build

Use it for any list, sheet or spec assembling itself: the children of the rows slot (or plain text items) fade and rise in one after another, top to bottom, with a touch of blur.

Install

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

npx hyperframes add rows-build

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. It also takes HTML in a <template data-slot="rows-build-rows"> in the host page.

<div data-composition-id="rows-build" data-composition-src="compositions/rows-build.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
items	string	LAUNCHABLE\|Your content on demand\|Film on your phone, get an edited reel back.	Pipe separated text rows used when no rows slot is provided.
at	number	0.2	Seconds before the first row.
stagger	number	0.09	Seconds between rows.
rise	number	1.5	Rise distance as percent of host height.
size	number	5	Default rows: font size as percent of host height.
exit	none, fade	none	none or fade.
ink	color	#1a1418	Text colour.
font	font	"Instrument Serif",Georgia,serif	Display face.
ground	color	transparent	Background; transparent to overlay.