Class EffectBuilder

constructor

• new EffectBuilder(effect: ShaderEffect, extra: ExtraBuilder): EffectBuilder

  Parameters

  • effect: ShaderEffect
  • extra: ExtraBuilder

  Returns EffectBuilder

Readonlydata

startBeat

• get startBeat(): number

  Effect start beat.

  Returns number

endBeat

• get endBeat(): number

  Effect end beat.

  Returns number

set

• set(name: string, value: Variable): this

  Set a static or animated variable on this effect.

  Parameters

  • name: string

    Uniform variable name.

  • value: Variable

    Static number, vector, string (texture), or AnimatedVariable.

  Returns this

animate

• animate(
      name: string,
      from: number | number[],
      to: number | number[],
      opts?: AnimateOptions,
  ): this

  Animate a uniform variable from from → to over a beat range.

  The beat range defaults to the effect's own [startBeat, endBeat], so you only need to supply value overrides for the common case.

  Parameters

  • name: string
  • from: number | number[]
  • to: number | number[]
  • opts: AnimateOptions = {}

  Returns this

  Example

  effect.animate('posZ', 5, 0.5, { easing: 'cubicOut' });
  effect.animate('rotX', 0, Math.PI * 4, { start: 0, end: 16, easing: 'sineInOut' });
  Copy

addEffect

• addEffect(
      name: string,
      startBeat: number,
      endBeat: number,
      from: number | number[],
      to: number | number[],
      easing?:
          | number
          | "linear"
          | "sineOut"
          | "sineIn"
          | "quadOut"
          | "quadIn"
          | "sineInOut"
          | "quadInOut"
          | "cubicOut"
          | "cubicIn"
          | "quartOut"
          | "quartIn"
          | "cubicInOut"
          | "quartInOut"
          | "quintOut"
          | "quintIn"
          | "expoOut"
          | "expoIn"
          | "circOut"
          | "circIn"
          | "backOut"
          | "backIn"
          | "circInOut"
          | "backInOut"
          | "elasticOut"
          | "elasticIn"
          | "bounceOut"
          | "bounceIn"
          | "bounceInOut",
      options?: VariableEventOptions,
  ): this

  Animate a uniform variable from from → to over startBeat → endBeat.

  A simple wrapper for animate().

  Parameters

  • name: string
  • startBeat: number
  • endBeat: number
  • from: number | number[]
  • to: number | number[]
  • easing:
        | number
        | "linear"
        | "sineOut"
        | "sineIn"
        | "quadOut"
        | "quadIn"
        | "sineInOut"
        | "quadInOut"
        | "cubicOut"
        | "cubicIn"
        | "quartOut"
        | "quartIn"
        | "cubicInOut"
        | "quartInOut"
        | "quintOut"
        | "quintIn"
        | "expoOut"
        | "expoIn"
        | "circOut"
        | "circIn"
        | "backOut"
        | "backIn"
        | "circInOut"
        | "backInOut"
        | "elasticOut"
        | "elasticIn"
        | "bounceOut"
        | "bounceIn"
        | "bounceInOut" = 1
  • options: VariableEventOptions = {}

  Returns this

keyframes

• keyframes(
      name: string,
      kfs: [
          beat: number,
          value: number
          | number[],
          easing?:
              | number
              | "linear"
              | "sineOut"
              | "sineIn"
              | "quadOut"
              | "quadIn"
              | "sineInOut"
              | "quadInOut"
              | "cubicOut"
              | "cubicIn"
              | "quartOut"
              | "quartIn"
              | "cubicInOut"
              | "quartInOut"
              | "quintOut"
              | "quintIn"
              | "expoOut"
              | "expoIn"
              | "circOut"
              | "circIn"
              | "backOut"
              | "backIn"
              | "circInOut"
              | "backInOut"
              | "elasticOut"
              | "elasticIn"
              | "bounceOut"
              | "bounceIn"
              | "bounceInOut",
      ][],
      easing?:
          | number
          | "linear"
          | "sineOut"
          | "sineIn"
          | "quadOut"
          | "quadIn"
          | "sineInOut"
          | "quadInOut"
          | "cubicOut"
          | "cubicIn"
          | "quartOut"
          | "quartIn"
          | "cubicInOut"
          | "quartInOut"
          | "quintOut"
          | "quintIn"
          | "expoOut"
          | "expoIn"
          | "circOut"
          | "circIn"
          | "backOut"
          | "backIn"
          | "circInOut"
          | "backInOut"
          | "elasticOut"
          | "elasticIn"
          | "bounceOut"
          | "bounceIn"
          | "bounceInOut",
      options?: VariableEventOptions,
  ): this

  Set a multi-keyframe animated variable via [beat, value, easing?] tuples.

  Parameters

  • name: string

    Uniform variable name.

  • kfs: [
        beat: number,
        value: number
        | number[],
        easing?:
            | number
            | "linear"
            | "sineOut"
            | "sineIn"
            | "quadOut"
            | "quadIn"
            | "sineInOut"
            | "quadInOut"
            | "cubicOut"
            | "cubicIn"
            | "quartOut"
            | "quartIn"
            | "cubicInOut"
            | "quartInOut"
            | "quintOut"
            | "quintIn"
            | "expoOut"
            | "expoIn"
            | "circOut"
            | "circIn"
            | "backOut"
            | "backIn"
            | "circInOut"
            | "backInOut"
            | "elasticOut"
            | "elasticIn"
            | "bounceOut"
            | "bounceIn"
            | "bounceInOut",
    ][]

    Sorted [beat, value, easing?] tuples (at least 2 entries). If easing is provided per keyframe, it overrides the default for that segment.

  • easing:
        | number
        | "linear"
        | "sineOut"
        | "sineIn"
        | "quadOut"
        | "quadIn"
        | "sineInOut"
        | "quadInOut"
        | "cubicOut"
        | "cubicIn"
        | "quartOut"
        | "quartIn"
        | "cubicInOut"
        | "quartInOut"
        | "quintOut"
        | "quintIn"
        | "expoOut"
        | "expoIn"
        | "circOut"
        | "circIn"
        | "backOut"
        | "backIn"
        | "circInOut"
        | "backInOut"
        | "elasticOut"
        | "elasticIn"
        | "bounceOut"
        | "bounceIn"
        | "bounceInOut" = 1

    Default easing applied to segments without override. Default: 2 (linear).

  • options: VariableEventOptions = {}

  Returns this

  Example

  effect.keyframes('rotX', [
    [0,  0],
    [16, Math.PI, 'cubicOut'],  // Use cubicOut for 0→16
    [32, Math.PI * 2],          // Use default for 16→32
  ], 'linear');
  Copy

pulse

• pulse(
      name: string,
      peakBeat: number,
      peak?: number | number[],
      opts?: {
          easingIn?:
              | number
              | "linear"
              | "sineOut"
              | "sineIn"
              | "quadOut"
              | "quadIn"
              | "sineInOut"
              | "quadInOut"
              | "cubicOut"
              | "cubicIn"
              | "quartOut"
              | "quartIn"
              | "cubicInOut"
              | "quartInOut"
              | "quintOut"
              | "quintIn"
              | "expoOut"
              | "expoIn"
              | "circOut"
              | "circIn"
              | "backOut"
              | "backIn"
              | "circInOut"
              | "backInOut"
              | "elasticOut"
              | "elasticIn"
              | "bounceOut"
              | "bounceIn"
              | "bounceInOut";
          easingOut?: | number
          | "linear"
          | "sineOut"
          | "sineIn"
          | "quadOut"
          | "quadIn"
          | "sineInOut"
          | "quadInOut"
          | "cubicOut"
          | "cubicIn"
          | "quartOut"
          | "quartIn"
          | "cubicInOut"
          | "quartInOut"
          | "quintOut"
          | "quintIn"
          | "expoOut"
          | "expoIn"
          | "circOut"
          | "circIn"
          | "backOut"
          | "backIn"
          | "circInOut"
          | "backInOut"
          | "elasticOut"
          | "elasticIn"
          | "bounceOut"
          | "bounceIn"
          | "bounceInOut";
          easingLeft?: number;
          easingRight?: number;
      },
  ): this

  Animate a variable as a pulse: 0 → peak → 0.

  Ramp-up spans [effect.startBeat, peakBeat]; ramp-down spans [peakBeat, effect.endBeat].

  Parameters

  • name: string

    Uniform variable name.

  • peakBeat: number

    Beat where the peak is reached.

  • peak: number | number[] = 1

    Peak value (default: 1).

  • opts: {
        easingIn?:
            | number
            | "linear"
            | "sineOut"
            | "sineIn"
            | "quadOut"
            | "quadIn"
            | "sineInOut"
            | "quadInOut"
            | "cubicOut"
            | "cubicIn"
            | "quartOut"
            | "quartIn"
            | "cubicInOut"
            | "quartInOut"
            | "quintOut"
            | "quintIn"
            | "expoOut"
            | "expoIn"
            | "circOut"
            | "circIn"
            | "backOut"
            | "backIn"
            | "circInOut"
            | "backInOut"
            | "elasticOut"
            | "elasticIn"
            | "bounceOut"
            | "bounceIn"
            | "bounceInOut";
        easingOut?: | number
        | "linear"
        | "sineOut"
        | "sineIn"
        | "quadOut"
        | "quadIn"
        | "sineInOut"
        | "quadInOut"
        | "cubicOut"
        | "cubicIn"
        | "quartOut"
        | "quartIn"
        | "cubicInOut"
        | "quartInOut"
        | "quintOut"
        | "quintIn"
        | "expoOut"
        | "expoIn"
        | "circOut"
        | "circIn"
        | "backOut"
        | "backIn"
        | "circInOut"
        | "backInOut"
        | "elasticOut"
        | "elasticIn"
        | "bounceOut"
        | "bounceIn"
        | "bounceInOut";
        easingLeft?: number;
        easingRight?: number;
    } = {}

    Optional easing for each phase.

  Returns this

  Example

  // Flash 'intensity' at the midpoint of the effect
  const mid = (effect.startBeat + effect.endBeat) / 2;
  effect.pulse('intensity', mid, 1, { easingIn: 'cubicOut', easingOut: 'cubicIn' });
  Copy

fromShader

• fromShader(source: string): this

  Populate missing uniform defaults by parsing a GLSL shader source.

  Only uniforms not already present in this.data.vars are set — existing values (including animations you've already applied) are preserved.

  Uniforms must be annotated with // %default% in the shader source.

  Parameters

  • source: string

    Full GLSL shader source text.

  Returns this

setRange

• setRange(min: number, max: number, exclusive?: boolean): this

  Set the z-index target range (restricts which objects the shader affects).

  Parameters

  • min: number

    Minimum z-index.

  • max: number

    Maximum z-index.

  • exclusive: boolean = false

    Whether the range is exclusive (default: false).

  Returns this

setGlobal

• setGlobal(global: boolean): this

  Set whether the effect also applies to UI elements.

  Parameters

  • global: boolean

  Returns this

toExtra

• toExtra(): ExtraBuilder

  Navigate back to the parent ExtraBuilder.

  Returns ExtraBuilder