Launchable Motion

Components / UI

Collage burst

Use it around a headline or a product: up to twelve images fly in from beyond the host edges to seeded slots on a ring that keeps the centre clear, overshoot and float.

Install

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

npx hyperframes add collage-burst

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

Variables

VariableTypeDefaultWhat it changes
image1imageassets/tile-01.svgTile; empty to skip.
image2imageassets/tile-02.svgTile; empty to skip.
image3imageassets/tile-03.svgTile; empty to skip.
image4imageassets/tile-04.svgTile; empty to skip.
image5imageassets/tile-05.svgTile; empty to skip.
image6imageassets/tile-06.svgTile; empty to skip.
image7imageassets/tile-07.svgTile; empty to skip.
image8imageassets/tile-08.svgTile; empty to skip.
image9imageassets/tile-09.svgTile; empty to skip.
image10imageassets/tile-10.svgTile; empty to skip.
image11imageassets/tile-11.svgTile; empty to skip.
image12imageassets/tile-12.svgTile; empty to skip.
clearnumber30Percent of host width kept free at the centre.
tileSizenumber18Max tile width as percent of host width.
radiusnumber1Percent of host height.
atnumber0.46Seconds before the first tile.
exitup, noneupup or none.
groundcolortransparentBackground; transparent to overlay.
seednumber2Slot positions.