KeyFrames

Motion-tracking overlay — trackers hunt and follow features in the content, dropping keyframe diamonds behind them along their motion paths, like a compositor mid-track

Props

trackersnumber

Default:12

Number of simultaneous trackers.

trackers

numberDefault: 12

Number of simultaneous trackers.

Default:bright

What the trackers hunt for.

detect

What the trackers hunt for.

thresholdnumber

Default:0.15

Feature floor — content scoring below this doesn't count as trackable at all.

threshold

numberDefault: 0.15

Feature floor — content scoring below this doesn't count as trackable at all.

variancenumber

Default:0.8

Spread of tracker preferences — 0 hunts only the strongest features, 1 distributes trackers across the whole brightness range.

variance

numberDefault: 0.8

Spread of tracker preferences — 0 hunts only the strongest features, 1 distributes trackers across the whole brightness range.

agilitynumber

Default:0.5

How fast trackers travel and how wide they search.

agility

numberDefault: 0.5

How fast trackers travel and how wide they search.

lifespannumber

Default:6

Seconds a tracker follows its target before retiring and reacquiring elsewhere. 0 = track forever.

lifespan

numberDefault: 6

Seconds a tracker follows its target before retiring and reacquiring elsewhere. 0 = track forever.

trailnumber

Default:1

Visibility of the keyframe trail each tracker leaves behind.

trail

numberDefault: 1

Visibility of the keyframe trail each tracker leaves behind.

markerSizenumber

Default:28

Tracker gizmo size in pixels.

markerSize

numberDefault: 28

Tracker gizmo size in pixels.

lineWidthnumber

Default:1.5

Stroke width in pixels.

lineWidth

numberDefault: 1.5

Stroke width in pixels.

markerColorstring

Default:#54d66b

Tracker gizmo color.

markerColor

stringDefault: #54d66b

Tracker gizmo color.

keyframeColorstring

Default:#ffcf33

Keyframe diamond color.

keyframeColor

stringDefault: #ffcf33

Keyframe diamond color.

pathColorstring

Default:#ffffffb8

Motion path color.

pathColor

stringDefault: #ffffffb8

Motion path color.

Usage

<Shader>
  <KeyFrames>
    <Circle />
  </KeyFrames>
</Shader>

<Shader>
  <KeyFrames>
    <Circle />
  </KeyFrames>
</Shader>

<Shader>
  <KeyFrames>
    <Circle />
  </KeyFrames>
</Shader>

<Shader>
  <KeyFrames>
    <Circle />
  </KeyFrames>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'KeyFrames', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

Kaleidoscope

LensFlare