Components / UI

Camera rig

Use it to move a camera over anything: the content slot is wrapped and driven by a keyframe path of time, scale, x, y and ease.

Install

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

npx hyperframes add camera-rig

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. It also takes HTML in a <template data-slot="camera-rig-content"> in the host page.

<div data-composition-id="camera-rig" data-composition-src="compositions/camera-rig.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
path	string	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	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	20,46	Transform origin in percent of the host: x,y.
blurOnMove	number	0	Blur in percent of host height added during fast segments (0 for none).
image	image	assets/page.svg	Used when no content slot is provided.
ground	color	transparent	Background; transparent to overlay.