effect-editing

name: effect-editing description: Learn how to add, modify, and remove visual effects on timeline clips for video ads, promos, and motivational videos. Includes the full effect catalog with descriptions and AI prompt examples.

effect-editing

Overview

This skill documents how to apply visual effects on the timeline for social media video production — ads, promos, motivational videos, and reels. Effects can be placed either as standalone clips on the timeline or attached directly to a specific clip's effects array.

All key (for clip-attached effects) and effectKey (for standalone effect clips) values come from the catalogs in Section 4 and Section 5.

Instructions

When the user asks to add, change, or remove effects, output commands with type: "clip.add", type: "clip.update", or type: "clip.remove".

Two Ways to Apply Effects

Mode A — Standalone Timeline Effect Clip (clip.add with type: "Effect")

A standalone effect clip placed on a track for a time range. Affects all clips rendered beneath it during that window.

• Placed on its own track.
• Has properties: type: "Effect", effectKey, values, and timing (with display and duration at project level).

Mode B — Clip-attached Effect (updating the clip's effects property)

Attaches an effect directly to a specific clip's effects array property using clip.update. Use this when targeting one clip.

• Stored as part of the clip's data.
• The effects array is replaced (not merged), so preserve other effects when updating.
• Each effect object has the structure:

  interface Effect {
    id: string; // Unique identifier (e.g. using nanoid)
    key: string; // Effect type identifier
    startTime: number; // When effect starts (microseconds from clip start)
    duration: number; // How long effect lasts (microseconds)
    values?: object; // Effect-specific parameters (optional)
  }
  

1. Adding an Effect (Timeline Clip - Mode A)

• type: Must be "Effect"
• effectKey: Key from the catalogs (Section 4 and 5)
• values: Uniform overrides (optional — defaults are sensible)
• timing.duration: Duration in microseconds
• timing.display.from / timing.display.to: Absolute time range in microseconds

Example: Add a fade-in at the start of the project (first 1 second)

{
  "type": "command",
  "description": "Adding fade-in at project start",
  "command": {
    "type": "clip.add",
    "payload": {
      "clip": {
        "type": "Effect",
        "name": "Fade In",
        "effectKey": "fadeIn",
        "values": {
          "uDuration": 1.0
        },
        "timing": {
          "duration": 1000000,
          "display": {
            "from": 0,
            "to": 1000000
          }
        }
      }
    }
  }
}

2. Adding a Clip-attached Effect (Mode B)

To add a clip-attached effect, use clip.update to replace the clip's effects array. Make sure to generate a unique id and specify startTime and duration in microseconds relative to the clip start.

Example: Apply vignette to the first 5 seconds of a specific clip

{
  "type": "command",
  "description": "Attaching vignette effect to clip",
  "command": {
    "type": "clip.update",
    "payload": {
      "id": "clip_123",
      "updates": {
        "effects": [
          {
            "id": "effect_vignette_1",
            "key": "vignette",
            "startTime": 0,
            "duration": 5000000,
            "values": {
              "uIntensity": 0.6,
              "uSoftness": 0.3
            }
          }
        ]
      }
    }
  }
}

3. Modifying Effect Parameters

• For Standalone Timeline Clips (Mode A): Update the clip's values property directly.
• For Clip-attached Effects (Mode B): Map through the clip's effects array and replace it with updated values.

Example: Adjust glitch intensity on a standalone timeline effect clip

{
  "type": "command",
  "description": "Updating glitch intensity on standalone clip",
  "command": {
    "type": "clip.update",
    "payload": {
      "id": "clip_effect_abc",
      "updates": {
        "values": {
          "intensity": 0.8
        }
      }
    }
  }
}

Example: Adjust glow color and distance on a clip-attached effect (replacing the effects array)

{
  "type": "command",
  "description": "Updating custom-glow properties on clip",
  "command": {
    "type": "clip.update",
    "payload": {
      "id": "clip_123",
      "updates": {
        "effects": [
          {
            "id": "custom-glow",
            "key": "glowFilter",
            "startTime": 0,
            "duration": 5000000,
            "values": {
              "distance": 20,
              "outerStrength": 3,
              "innerStrength": 1,
              "color": "#00ff00"
            }
          }
        ]
      }
    }
  }
}

4. Removing an Effect

• For Standalone Timeline Clips (Mode A): Use clip.remove with the effect clip's ID.
• For Clip-attached Effects (Mode B): Update the clip's effects property, filtering out the effect by its id.

Example: Remove a standalone timeline effect clip

{
  "type": "command",
  "description": "Removing effect clip",
  "command": {
    "type": "clip.remove",
    "payload": {
      "ids": ["clip_effect_abc"]
    }
  }
}

Example: Remove specific clip-attached effect by ID

{
  "type": "command",
  "description": "Removing vintage effect from clip",
  "command": {
    "type": "clip.update",
    "payload": {
      "id": "clip_123",
      "updates": {
        "effects": []
      }
    }
  }
}

Timing Reference

• All times are in microseconds (1 second = 1000000).
• For fade-in at clip start: startTime = 0, duration = fade duration (e.g. 1000000 for 1s).
• For fade-out at clip end: startTime = clip duration − fade duration, duration = fade duration.
• For full-clip effect: startTime = 0, duration = clip duration.
• Standalone effect timing display matches absolute project timing.

Section 4 — Built-in GLSL Effects Catalog

Use the key as effectKey (for Mode A) or key (for Mode B).

Color Effects

Blur and Focus

Distortion and Warping

Glitch and Digital

Light and Atmosphere

Stylized Looks

Transitions (Within Clips)

Camera Movement

Special Overlays

Section 5 — Pixi Filter Effects Catalog

These effects are powered by PixiJS filters. Use the key as effectKey (Mode A) or key (Mode B).

Color and Tone

Blur Filters

Glow and Bloom

Edge and Outline

Distortion

Vintage and Glitch

Special Effects

AI Prompt Examples