# Blur reveal

Component. Use 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. Optional exit that shrinks and tints away.

## Mount

Fills its host box: give the host element the size and position you want, the component sizes everything in container units (percent of the host). No fixed canvas.

```html
<div data-composition-id="blur-reveal" data-composition-src="compositions/blur-reveal.html"
     data-start="0" data-duration="4" data-track-index="2"
     data-variable-values='{ "...": "..." }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>
```

## Slots

- `<template data-slot="blur-reveal-content">…</template>` placed anywhere in the host page: its content is cloned into the content box. Without it the component uses its variables.

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `image` | image | content | `assets/poster.svg` | Project-relative path or `{ "url": "..." }` | Used when no content slot is provided. Fitted inside the host. Portrays: subject_image. |
| `blurStart` | number | motion | `3` | 0 through 10 | Percent of host height. |
| `preSharpen` | number | motion | `0.6` | 0 through 1 | Fraction of the blur left when the reveal starts. |
| `opacityStart` | number | style | `0.75` | 0 through 1 | Opacity while waiting. |
| `revealAt` | number | timing | `1.7` | 0 through 30 | Seconds until focus snaps. |
| `revealDuration` | number | timing | `0.6` | 0.05 through 3 | Seconds to full focus. |
| `push` | number | motion | `0.06` | 0 through 0.5 | Scale gained over the duration. |
| `exit` | enum | motion | `none` | `none`, `shrink` | none or shrink. |
| `exitTint` | color | style | `#ebe4ff` | Hex or `transparent` | Ground colour during the shrink exit. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

`index.html` is a demo host at 1920 by 1080; `compositions/blur-reveal.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["blur-reveal"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.