TimeTrail

An Echo-style temporal trail — whatever moves sheds a smooth, decaying long-exposure ghost trail (frame-difference Motion mode works on opaque images and video; Alpha mode trails a shape's coverage), with optional zoom-feedback tunnels and rainbow light-painting

Props

trailSource"motion" | "alpha"

Default:motion

What sheds the trail — Motion trails whatever changes frame-to-frame (works on opaque images and video), Alpha trails the child's transparency coverage (best for a clean shape over empty canvas)

trailSource

"motion" | "alpha"Default: motion

What sheds the trail — Motion trails whatever changes frame-to-frame (works on opaque images and video), Alpha trails the child's transparency coverage (best for a clean shape over empty canvas)

motionThresholdnumber

Default:0.06

How much a pixel must change between frames to shed a trail (Motion source only) — lower catches subtle movement, higher only fast motion

motionThreshold

numberDefault: 0.06

How much a pixel must change between frames to shed a trail (Motion source only) — lower catches subtle movement, higher only fast motion

trailLengthnumber

Default:0.6

How long the trail lingers, in seconds — the time constant of the fade (the star control)

trailLength

numberDefault: 0.6

How long the trail lingers, in seconds — the time constant of the fade (the star control)

diffusionnumber

Default:1

How much the trail smears and softens as it fades — 0 keeps crisp ghost frames, higher melts them together

diffusion

numberDefault: 1

How much the trail smears and softens as it fades — 0 keeps crisp ghost frames, higher melts them together

trailOpacitynumber

Default:1

Overall strength of the trail behind the live frame

trailOpacity

numberDefault: 1

Overall strength of the trail behind the live frame

trailBlend

"normal" | "add" | "screen" | "multiply" | "overlay" | "softLight" | "hardLight" | "darken" | "lighten" | "colorDodge" | "colorBurn" | "linearBurn" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"

Default:normal

How the trail combines with the frame — Add / Screen build glowing light-painting trails, Multiply lays down dark ink ghosts, plus the full standard blend set

trailBlend

"normal" | "add" | "screen" | "multiply" | "overlay" | "softLight" | "hardLight" | "darken" | "lighten" | "colorDodge" | "colorBurn" | "linearBurn" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"

Default: normal

How the trail combines with the frame — Add / Screen build glowing light-painting trails, Multiply lays down dark ink ghosts, plus the full standard blend set

driftXnumber

Default:0

Sideways drift of the trail per second — smears the trail in a direction

driftX

numberDefault: 0

Sideways drift of the trail per second — smears the trail in a direction

driftYnumber

Default:0

Vertical drift of the trail per second

driftY

numberDefault: 0

Vertical drift of the trail per second

zoomnumber

Default:1

Per-frame zoom of the trail around the centre — above 1 pulls the trail into an outward tunnel, below 1 sucks it inward

zoom

numberDefault: 1

Per-frame zoom of the trail around the centre — above 1 pulls the trail into an outward tunnel, below 1 sucks it inward

tintMode"none" | "color" | "rainbow"

Default:none

Colour the trail — Color tints it a single hue, Rainbow cycles hue as the trail ages

tintMode

"none" | "color" | "rainbow"Default: none

Colour the trail — Color tints it a single hue, Rainbow cycles hue as the trail ages

tintstring

Default:#33aaff

Trail tint colour (used in Color mode)

tint

stringDefault: #33aaff

Trail tint colour (used in Color mode)

speednumber

Default:1

Simulation speed. 0 freezes the trail in place.

speed

numberDefault: 1

Simulation speed. 0 freezes the trail in place.

Usage

<Shader>
  <TimeTrail>
    <Circle />
  </TimeTrail>
</Shader>

<Shader>
  <TimeTrail>
    <Circle />
  </TimeTrail>
</Shader>

<Shader>
  <TimeTrail>
    <Circle />
  </TimeTrail>
</Shader>

<Shader>
  <TimeTrail>
    <Circle />
  </TimeTrail>
</Shader>

import { createShader } from 'shaders/js'

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

TiltShift

Tint