Components / UI

Dropdown select

Use it for a choice being made in UI: a rounded trigger that fills the host, whose background slides down onto the chosen item when the list opens and saturates to the highlight colour with a check mark, while the trigger label greys and the other items sit out of focus below.

Install

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

npx hyperframes add dropdown-select

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="dropdown-select" data-composition-src="compositions/dropdown-select.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
label	string	Select brand	Text before a choice.
items	string	Launchable\|New brand	Pipe separated options in order.
chosen	number	0	Zero based index of the option picked.
openAt	number	0.4	Seconds until the list opens.
closeAt	number	2.1	Seconds until it closes. Negative keeps it open.
highlight	color	#ff7ad9	Colour the selection saturates to.
idle	color	#f0edf0	Trigger background before selection.
zoom	number	1.1	Scale the group grows to while open.
ink	color	#1a1418	Text colour.
font	font	"Instrument Serif",Georgia,serif	Display face.
ground	color	transparent	Background; transparent to overlay.