Components / Visual
Mosaic reveal
Use it for a generated image arriving: the image starts as a thin horizontal line, the top edge snaps up and the bottom frontier travels down as a band of coarse pixels with a jagged edge.
Install
With this registry set in hyperframes.json (see the docs):
npx hyperframes add mosaic-revealUse 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="mosaic-reveal" data-composition-src="compositions/mosaic-reveal.html"
data-start="0" data-duration="3.2" data-track-index="1"
style="position:absolute;left:0;top:0;width:1920px;height:1080px"></div>Variables
| Variable | Type | Default | What it changes |
|---|---|---|---|
| image | image | assets/photo.svg | Covers the host. |
| blockSize | number | 4 | Percent of host height. |
| revealDuration | number | 1 | Seconds for the frontier to reach the bottom. |
| startLine | number | 0.4 | Fraction of the height where the line starts. |
| at | number | 0.02 | Seconds before the move starts. |
| exit | none, shrink | none | none or shrink. |
| ground | color | transparent | Background; transparent to overlay. |
| seed | number | 7 | Deterministic scatter. |