# Camera rig

Component. Use to move a camera over anything: the content slot is wrapped and driven by a keyframe path of time, scale, x, y and ease. Positive x pans the content right. Good for long pushes into a field and pans onto a button.

## 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="camera-rig" data-composition-src="compositions/camera-rig.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="camera-rig-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 |
| --- | --- | --- | --- | --- | --- |
| `path` | string | motion | `0,1,0,0,none|2.2,1.9,0,0,power1.inOut|2.55,1.9,-30,0,power3.inOut|3.4,1.9,-35,0,expo.out` | Text | Pipe separated keyframes: t,scale,x,y,ease with x and y in percent of the host. The first keyframe is the start state. |
| `origin` | string | layout | `20,46` | Text | Transform origin in percent of the host: x,y. |
| `blurOnMove` | number | motion | `0` | 0 through 3 | Blur in percent of host height added during fast segments (0 for none). |
| `image` | image | content | `assets/page.svg` | Project-relative path or `{ "url": "..." }` | Used when no content slot is provided. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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