Components / Visual
Blur reveal
Use it for anything that is being worked on: the slot content (an image or any HTML) sits heavily out of focus at reduced opacity, sharpens a little while waiting, then snaps to focus at the reveal time under a slow push.
Install
With this registry set in hyperframes.json (see the docs):
npx hyperframes add blur-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. It also takes HTML in a <template data-slot="blur-reveal-content"> in the host page.
<div data-composition-id="blur-reveal" data-composition-src="compositions/blur-reveal.html"
data-start="0" data-duration="4" 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/poster.svg | Used when no content slot is provided. Fitted inside the host. |
| blurStart | number | 3 | Percent of host height. |
| preSharpen | number | 0.6 | Fraction of the blur left when the reveal starts. |
| opacityStart | number | 0.75 | Opacity while waiting. |
| revealAt | number | 1.7 | Seconds until focus snaps. |
| revealDuration | number | 0.6 | Seconds to full focus. |
| push | number | 0.06 | Scale gained over the duration. |
| exit | none, shrink | none | none or shrink. |
| exitTint | color | #ebe4ff | Ground colour during the shrink exit. |
| ground | color | transparent | Background; transparent to overlay. |