Effects & Transitions

Browse available visual effects and transition animations that can be applied in templates.

Get Effects Catalog

GET /api/effects/catalog

List all available effects that can be applied to video, image, or text blocks in a template.

Headers:

• X-API-Key: <your-api-key> (required)

Response:

{
  "effects": [
    {
      "id": "fade-in",
      "name": "Fade In",
      "category": "appear",
      "description": "Fades the clip up from black",
      "thumbnail": "https://peako.shin0x.space/assets/effects/fade-in.png",
      "preview": "https://peako.shin0x.space/assets/effects/fade-in.gif",
      "params": [
        {
          "name": "duration",
          "type": "number",
          "default": 0.5,
          "min": 0.1,
          "max": 5.0,
          "description": "Fade duration in seconds"
        }
      ]
    }
  ]
}

Effect Object Fields:

Field	Type	Description
id	string	Unique effect ID (use in template composition)
name	string	Display name
category	string	Effect category (e.g. "appear", "disappear", "overlay")
description	string	What the effect does
thumbnail	string	Static preview image URL
preview	string	Animated GIF preview URL
params	array	Configurable parameters

Applying an Effect in a Template Block:

{
  "itemType": "block",
  "blockId": "hero-video",
  "type": "video",
  ...
  "effects": [
    {
      "id": "fade-in",
      "params": { "duration": 0.5 }
    },
    {
      "id": "vignette",
      "params": { "intensity": 0.6 }
    }
  ]
}

---

Get Transitions Catalog

GET /api/transitions/catalog

List all available transitions that can be placed between adjacent blocks.

Headers:

• X-API-Key: <your-api-key> (required)

Response:

{
  "transitions": [
    {
      "id": "fade",
      "name": "Fade",
      "description": "Fade from one clip to the next",
      "thumbnail": "https://peako.shin0x.space/assets/transitions/fade.png",
      "preview": "https://peako.shin0x.space/assets/transitions/fade.gif",
      "durationRange": [0.2, 2.0]
    },
    {
      "id": "slide-left",
      "name": "Slide Left",
      "description": "New clip slides in from the right",
      "thumbnail": "https://peako.shin0x.space/assets/transitions/slide-left.png",
      "preview": "https://peako.shin0x.space/assets/transitions/slide-left.gif",
      "durationRange": [0.2, 1.5]
    }
  ]
}

Transition Object Fields:

Field	Type	Description
id	string	Unique transition ID
name	string	Display name
description	string	What it looks like
thumbnail	string	Static preview image URL
preview	string	Animated GIF preview URL
durationRange	[min, max]	Valid duration range in seconds

Applying a Transition in a Template Block:

{
  "itemType": "block",
  "blockId": "clip-1",
  "type": "video",
  ...
  "transition": {
    "type": "slide-left",
    "durationSec": 0.5
  }
}

The transition is applied at the end of the block it's defined on — it plays as the next block begins.

---

Next: System