curl --request POST \
--url https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays \
--header 'Authorization: Bearer <token>' \
--header 'Content-Type: application/json' \
--data '
{
"durationMs": 5000,
"startTimeMs": 1000,
"animation": {
"intro": {
"preset": "slide_up"
},
"outro": {
"preset": "fade"
}
},
"border": {
"color": "#FFFFFFFF",
"width": 1
},
"corners": "squircle",
"depth": "behind_presenter",
"depthChanges": [
{
"atMs": 1200,
"depth": "behind_presenter"
}
],
"name": "<string>",
"path": "M50 0 L100 100 L0 100 Z",
"shadow": "subtle",
"transition": "smooth"
}
'import requests
url = "https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays"
payload = {
"durationMs": 5000,
"startTimeMs": 1000,
"animation": {
"intro": { "preset": "slide_up" },
"outro": { "preset": "fade" }
},
"border": {
"color": "#FFFFFFFF",
"width": 1
},
"corners": "squircle",
"depth": "behind_presenter",
"depthChanges": [
{
"atMs": 1200,
"depth": "behind_presenter"
}
],
"name": "<string>",
"path": "M50 0 L100 100 L0 100 Z",
"shadow": "subtle",
"transition": "smooth"
}
headers = {
"Authorization": "Bearer <token>",
"Content-Type": "application/json"
}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {Authorization: 'Bearer <token>', 'Content-Type': 'application/json'},
body: JSON.stringify({
durationMs: 5000,
startTimeMs: 1000,
animation: {intro: {preset: 'slide_up'}, outro: {preset: 'fade'}},
border: {color: '#FFFFFFFF', width: 1},
corners: 'squircle',
depth: 'behind_presenter',
depthChanges: [{atMs: 1200, depth: 'behind_presenter'}],
name: '<string>',
path: 'M50 0 L100 100 L0 100 Z',
shadow: 'subtle',
transition: 'smooth'
})
};
fetch('https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'durationMs' => 5000,
'startTimeMs' => 1000,
'animation' => [
'intro' => [
'preset' => 'slide_up'
],
'outro' => [
'preset' => 'fade'
]
],
'border' => [
'color' => '#FFFFFFFF',
'width' => 1
],
'corners' => 'squircle',
'depth' => 'behind_presenter',
'depthChanges' => [
[
'atMs' => 1200,
'depth' => 'behind_presenter'
]
],
'name' => '<string>',
'path' => 'M50 0 L100 100 L0 100 Z',
'shadow' => 'subtle',
'transition' => 'smooth'
]),
CURLOPT_HTTPHEADER => [
"Authorization: Bearer <token>",
"Content-Type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays"
payload := strings.NewReader("{\n \"durationMs\": 5000,\n \"startTimeMs\": 1000,\n \"animation\": {\n \"intro\": {\n \"preset\": \"slide_up\"\n },\n \"outro\": {\n \"preset\": \"fade\"\n }\n },\n \"border\": {\n \"color\": \"#FFFFFFFF\",\n \"width\": 1\n },\n \"corners\": \"squircle\",\n \"depth\": \"behind_presenter\",\n \"depthChanges\": [\n {\n \"atMs\": 1200,\n \"depth\": \"behind_presenter\"\n }\n ],\n \"name\": \"<string>\",\n \"path\": \"M50 0 L100 100 L0 100 Z\",\n \"shadow\": \"subtle\",\n \"transition\": \"smooth\"\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("Authorization", "Bearer <token>")
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays")
.header("Authorization", "Bearer <token>")
.header("Content-Type", "application/json")
.body("{\n \"durationMs\": 5000,\n \"startTimeMs\": 1000,\n \"animation\": {\n \"intro\": {\n \"preset\": \"slide_up\"\n },\n \"outro\": {\n \"preset\": \"fade\"\n }\n },\n \"border\": {\n \"color\": \"#FFFFFFFF\",\n \"width\": 1\n },\n \"corners\": \"squircle\",\n \"depth\": \"behind_presenter\",\n \"depthChanges\": [\n {\n \"atMs\": 1200,\n \"depth\": \"behind_presenter\"\n }\n ],\n \"name\": \"<string>\",\n \"path\": \"M50 0 L100 100 L0 100 Z\",\n \"shadow\": \"subtle\",\n \"transition\": \"smooth\"\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"durationMs\": 5000,\n \"startTimeMs\": 1000,\n \"animation\": {\n \"intro\": {\n \"preset\": \"slide_up\"\n },\n \"outro\": {\n \"preset\": \"fade\"\n }\n },\n \"border\": {\n \"color\": \"#FFFFFFFF\",\n \"width\": 1\n },\n \"corners\": \"squircle\",\n \"depth\": \"behind_presenter\",\n \"depthChanges\": [\n {\n \"atMs\": 1200,\n \"depth\": \"behind_presenter\"\n }\n ],\n \"name\": \"<string>\",\n \"path\": \"M50 0 L100 100 L0 100 Z\",\n \"shadow\": \"subtle\",\n \"transition\": \"smooth\"\n}"
response = http.request(request)
puts response.read_body{
"shapeOverlay": {
"border": {
"color": "#FFFFFFFF",
"width": 1
},
"corners": "squircle",
"depth": "behind_presenter",
"dimensions": {
"height": 540,
"width": 960
},
"durationMs": 1,
"fill": {
"type": "solid",
"color": "#000000ff",
"gradientAngle": 45,
"gradientColor1": "#ff0080ff",
"gradientColor2": "#7928caff",
"imageUrl": "<string>",
"shaderGradientPreset": "Halo",
"sourceId": "su_abc123",
"videoDurationSeconds": 12.4,
"videoUrl": "<string>"
},
"id": "ly_abc123",
"name": "<string>",
"path": "<string>",
"point": {
"xPct": 30,
"yPct": 30
},
"shadow": "subtle",
"shapeType": "square",
"startTimeMs": 1,
"transition": "smooth",
"zIndex": 0,
"depthChanges": [
{
"atMs": 1200,
"depth": "behind_presenter"
}
]
}
}{
"docsUrl": "https://docs.tella.com/",
"error": "bad_request",
"message": "The request was malformed or contained invalid parameters."
}{
"docsUrl": "https://docs.tella.com/",
"error": "unauthorized",
"message": "Authentication is required. Provide a valid API key."
}{
"docsUrl": "https://docs.tella.com/",
"error": "forbidden",
"message": "You don't have permission to access this resource."
}{
"docsUrl": "https://docs.tella.com/",
"error": "not_found",
"message": "The requested resource was not found."
}{
"docsUrl": "https://docs.tella.com/",
"error": "conflict",
"message": "The request conflicts with the resource's current state, e.g. an Idempotency-Key whose first request is still in progress. Retry once it settles."
}{
"docsUrl": "https://docs.tella.com/",
"error": "rate_limited",
"message": "You have exceeded the rate limit. Please slow down."
}{
"docsUrl": "https://docs.tella.com/",
"error": "server_error",
"message": "An unexpected error occurred"
}{
"docsUrl": "https://docs.tella.com/",
"error": "not_implemented",
"message": "The requested operation is not implemented."
}{
"docsUrl": "https://docs.tella.com/",
"error": "unavailable",
"message": "A dependency was unavailable and the request was not executed. Safe to resend unchanged after the Retry-After delay."
}Add a shape overlay to a clip
Adds a square, circle, triangle, diamond, star, hexagon or arrow on top of a clip, filled with any clip background and with an optional border and shadow.
curl --request POST \
--url https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays \
--header 'Authorization: Bearer <token>' \
--header 'Content-Type: application/json' \
--data '
{
"durationMs": 5000,
"startTimeMs": 1000,
"animation": {
"intro": {
"preset": "slide_up"
},
"outro": {
"preset": "fade"
}
},
"border": {
"color": "#FFFFFFFF",
"width": 1
},
"corners": "squircle",
"depth": "behind_presenter",
"depthChanges": [
{
"atMs": 1200,
"depth": "behind_presenter"
}
],
"name": "<string>",
"path": "M50 0 L100 100 L0 100 Z",
"shadow": "subtle",
"transition": "smooth"
}
'import requests
url = "https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays"
payload = {
"durationMs": 5000,
"startTimeMs": 1000,
"animation": {
"intro": { "preset": "slide_up" },
"outro": { "preset": "fade" }
},
"border": {
"color": "#FFFFFFFF",
"width": 1
},
"corners": "squircle",
"depth": "behind_presenter",
"depthChanges": [
{
"atMs": 1200,
"depth": "behind_presenter"
}
],
"name": "<string>",
"path": "M50 0 L100 100 L0 100 Z",
"shadow": "subtle",
"transition": "smooth"
}
headers = {
"Authorization": "Bearer <token>",
"Content-Type": "application/json"
}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {Authorization: 'Bearer <token>', 'Content-Type': 'application/json'},
body: JSON.stringify({
durationMs: 5000,
startTimeMs: 1000,
animation: {intro: {preset: 'slide_up'}, outro: {preset: 'fade'}},
border: {color: '#FFFFFFFF', width: 1},
corners: 'squircle',
depth: 'behind_presenter',
depthChanges: [{atMs: 1200, depth: 'behind_presenter'}],
name: '<string>',
path: 'M50 0 L100 100 L0 100 Z',
shadow: 'subtle',
transition: 'smooth'
})
};
fetch('https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'durationMs' => 5000,
'startTimeMs' => 1000,
'animation' => [
'intro' => [
'preset' => 'slide_up'
],
'outro' => [
'preset' => 'fade'
]
],
'border' => [
'color' => '#FFFFFFFF',
'width' => 1
],
'corners' => 'squircle',
'depth' => 'behind_presenter',
'depthChanges' => [
[
'atMs' => 1200,
'depth' => 'behind_presenter'
]
],
'name' => '<string>',
'path' => 'M50 0 L100 100 L0 100 Z',
'shadow' => 'subtle',
'transition' => 'smooth'
]),
CURLOPT_HTTPHEADER => [
"Authorization: Bearer <token>",
"Content-Type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays"
payload := strings.NewReader("{\n \"durationMs\": 5000,\n \"startTimeMs\": 1000,\n \"animation\": {\n \"intro\": {\n \"preset\": \"slide_up\"\n },\n \"outro\": {\n \"preset\": \"fade\"\n }\n },\n \"border\": {\n \"color\": \"#FFFFFFFF\",\n \"width\": 1\n },\n \"corners\": \"squircle\",\n \"depth\": \"behind_presenter\",\n \"depthChanges\": [\n {\n \"atMs\": 1200,\n \"depth\": \"behind_presenter\"\n }\n ],\n \"name\": \"<string>\",\n \"path\": \"M50 0 L100 100 L0 100 Z\",\n \"shadow\": \"subtle\",\n \"transition\": \"smooth\"\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("Authorization", "Bearer <token>")
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays")
.header("Authorization", "Bearer <token>")
.header("Content-Type", "application/json")
.body("{\n \"durationMs\": 5000,\n \"startTimeMs\": 1000,\n \"animation\": {\n \"intro\": {\n \"preset\": \"slide_up\"\n },\n \"outro\": {\n \"preset\": \"fade\"\n }\n },\n \"border\": {\n \"color\": \"#FFFFFFFF\",\n \"width\": 1\n },\n \"corners\": \"squircle\",\n \"depth\": \"behind_presenter\",\n \"depthChanges\": [\n {\n \"atMs\": 1200,\n \"depth\": \"behind_presenter\"\n }\n ],\n \"name\": \"<string>\",\n \"path\": \"M50 0 L100 100 L0 100 Z\",\n \"shadow\": \"subtle\",\n \"transition\": \"smooth\"\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.tella.com/v1/videos/{id}/clips/{clipId}/shape-overlays")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer <token>'
request["Content-Type"] = 'application/json'
request.body = "{\n \"durationMs\": 5000,\n \"startTimeMs\": 1000,\n \"animation\": {\n \"intro\": {\n \"preset\": \"slide_up\"\n },\n \"outro\": {\n \"preset\": \"fade\"\n }\n },\n \"border\": {\n \"color\": \"#FFFFFFFF\",\n \"width\": 1\n },\n \"corners\": \"squircle\",\n \"depth\": \"behind_presenter\",\n \"depthChanges\": [\n {\n \"atMs\": 1200,\n \"depth\": \"behind_presenter\"\n }\n ],\n \"name\": \"<string>\",\n \"path\": \"M50 0 L100 100 L0 100 Z\",\n \"shadow\": \"subtle\",\n \"transition\": \"smooth\"\n}"
response = http.request(request)
puts response.read_body{
"shapeOverlay": {
"border": {
"color": "#FFFFFFFF",
"width": 1
},
"corners": "squircle",
"depth": "behind_presenter",
"dimensions": {
"height": 540,
"width": 960
},
"durationMs": 1,
"fill": {
"type": "solid",
"color": "#000000ff",
"gradientAngle": 45,
"gradientColor1": "#ff0080ff",
"gradientColor2": "#7928caff",
"imageUrl": "<string>",
"shaderGradientPreset": "Halo",
"sourceId": "su_abc123",
"videoDurationSeconds": 12.4,
"videoUrl": "<string>"
},
"id": "ly_abc123",
"name": "<string>",
"path": "<string>",
"point": {
"xPct": 30,
"yPct": 30
},
"shadow": "subtle",
"shapeType": "square",
"startTimeMs": 1,
"transition": "smooth",
"zIndex": 0,
"depthChanges": [
{
"atMs": 1200,
"depth": "behind_presenter"
}
]
}
}{
"docsUrl": "https://docs.tella.com/",
"error": "bad_request",
"message": "The request was malformed or contained invalid parameters."
}{
"docsUrl": "https://docs.tella.com/",
"error": "unauthorized",
"message": "Authentication is required. Provide a valid API key."
}{
"docsUrl": "https://docs.tella.com/",
"error": "forbidden",
"message": "You don't have permission to access this resource."
}{
"docsUrl": "https://docs.tella.com/",
"error": "not_found",
"message": "The requested resource was not found."
}{
"docsUrl": "https://docs.tella.com/",
"error": "conflict",
"message": "The request conflicts with the resource's current state, e.g. an Idempotency-Key whose first request is still in progress. Retry once it settles."
}{
"docsUrl": "https://docs.tella.com/",
"error": "rate_limited",
"message": "You have exceeded the rate limit. Please slow down."
}{
"docsUrl": "https://docs.tella.com/",
"error": "server_error",
"message": "An unexpected error occurred"
}{
"docsUrl": "https://docs.tella.com/",
"error": "not_implemented",
"message": "The requested operation is not implemented."
}{
"docsUrl": "https://docs.tella.com/",
"error": "unavailable",
"message": "A dependency was unavailable and the request was not executed. Safe to resend unchanged after the Retry-After delay."
}Authorizations
API key obtained from your Tella account settings
Path Parameters
Video identifier
"vid_abc123def456"
Clip identifier
"cl_xyz789ghi012"
Body
Add a shape overlay to a clip. Defaults: a square in Tella purple, no border or shadow. When point/dimensions are omitted it is a centered square a third of the artboard's longer side.
0 < x <= 90071992547409915000
Start time. Milliseconds on the clip playback timeline (with cuts applied) — the same timeline as the cut transcript.
0 <= x <= 90071992547409911000
How the overlay enters and leaves; when set it replaces transition. Each side describes the hidden state the overlay moves from on the way in and back to on the way out. An omitted side stays as it is. {intro: {preset: 'slide_up'}, outro: {preset: 'fade'}} is a complete animation; on text, {textIntro: {preset: 'slide_up', text: {unit: 'words'}}} brings the words in one by one.
Hide child attributes
Hide child attributes
How the whole overlay enters, or null to appear instantly. Takes no text. Omit to keep the current intro.
Hide child attributes
Hide child attributes
Blur of the hidden state in pixels.
0 <= x <= 200Clip the motion to the overlay's box, so it wipes in like a mask.
How long the side plays, in ms (50 to 5000). On a text side, how long each unit plays. Defaults to 500.
50 <= x <= 5000How the side accelerates. Without it a new side slows down into place on the way in and speeds up on the way out.
Hide child attributes
Hide child attributes
How a side accelerates. linear keeps one speed. smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse and swing are shaped by intensity. custom follows bezier, spring follows spring.
linear, smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse, swing, custom, spring "slow_down"
For custom: the handles. Defaults to the side's current curve.
4 elements0 <= x <= 1[0.25, 0.1, 0.25, 1]
How strongly the curve shapes the motion, 0 to 1. Only curves with an intensity use it. Defaults to 0.5.
0 <= x <= 1For spring: its physics. Defaults to stiffness 200, damping 12, mass 1.
Horizontal offset of the hidden state, as a fraction of the overlay's width (of a line's height on a text side); positive is right.
-10 <= x <= 10Vertical offset of the hidden state, as a fraction of the overlay's height (of a line's height on a text side); positive is down.
-10 <= x <= 10Opacity of the hidden state, 0 to 1.
0 <= x <= 1Start from a ready-made side; the other fields adjust it. Without it the side starts from what it is now; a new whole side starts still and a new text side from fade.
fade, slide_up, slide_down, slide_left, slide_right, mask_up, mask_down, grow, shrink, blur, blur_slide_up "slide_up"
Clockwise rotation of the hidden state in degrees.
-3600 <= x <= 3600Scale of the hidden state; 1 is its resting size.
0 <= x <= 10On textIntro/textOutro only: which units play the side, each in turn. Required on a new text side.
Hide child attributes
Hide child attributes
What animates on its own.
letters, words, lines "words"
How long after one unit the next starts, in ms (0 to 2000). Defaults to 100.
0 <= x <= 2000Which unit goes first. random uses the same shuffle every time. Defaults to forward.
forward, backward, center, edges, random "forward"
Eases the delays across the units. Defaults to linear.
linear, smooth, natural, slow_down, accelerate, elastic, overshoot, impulse, swing "linear"
Blur the overlay along its motion while it moves, scales or turns. Defaults to true.
How the whole overlay leaves, or null to disappear instantly. Takes no text. Omit to keep the current outro.
Hide child attributes
Hide child attributes
Blur of the hidden state in pixels.
0 <= x <= 200Clip the motion to the overlay's box, so it wipes in like a mask.
How long the side plays, in ms (50 to 5000). On a text side, how long each unit plays. Defaults to 500.
50 <= x <= 5000How the side accelerates. Without it a new side slows down into place on the way in and speeds up on the way out.
Hide child attributes
Hide child attributes
How a side accelerates. linear keeps one speed. smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse and swing are shaped by intensity. custom follows bezier, spring follows spring.
linear, smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse, swing, custom, spring "slow_down"
For custom: the handles. Defaults to the side's current curve.
4 elements0 <= x <= 1[0.25, 0.1, 0.25, 1]
How strongly the curve shapes the motion, 0 to 1. Only curves with an intensity use it. Defaults to 0.5.
0 <= x <= 1For spring: its physics. Defaults to stiffness 200, damping 12, mass 1.
Horizontal offset of the hidden state, as a fraction of the overlay's width (of a line's height on a text side); positive is right.
-10 <= x <= 10Vertical offset of the hidden state, as a fraction of the overlay's height (of a line's height on a text side); positive is down.
-10 <= x <= 10Opacity of the hidden state, 0 to 1.
0 <= x <= 1Start from a ready-made side; the other fields adjust it. Without it the side starts from what it is now; a new whole side starts still and a new text side from fade.
fade, slide_up, slide_down, slide_left, slide_right, mask_up, mask_down, grow, shrink, blur, blur_slide_up "slide_up"
Clockwise rotation of the hidden state in degrees.
-3600 <= x <= 3600Scale of the hidden state; 1 is its resting size.
0 <= x <= 10On textIntro/textOutro only: which units play the side, each in turn. Required on a new text side.
Hide child attributes
Hide child attributes
What animates on its own.
letters, words, lines "words"
How long after one unit the next starts, in ms (0 to 2000). Defaults to 100.
0 <= x <= 2000Which unit goes first. random uses the same shuffle every time. Defaults to forward.
forward, backward, center, edges, random "forward"
Eases the delays across the units. Defaults to linear.
linear, smooth, natural, slow_down, accelerate, elastic, overshoot, impulse, swing "linear"
Text overlays only: how its letters, words or lines enter, one after another, or null for none. Plays alongside intro: both start together.
Hide child attributes
Hide child attributes
Blur of the hidden state in pixels.
0 <= x <= 200Clip the motion to the overlay's box, so it wipes in like a mask.
How long the side plays, in ms (50 to 5000). On a text side, how long each unit plays. Defaults to 500.
50 <= x <= 5000How the side accelerates. Without it a new side slows down into place on the way in and speeds up on the way out.
Hide child attributes
Hide child attributes
How a side accelerates. linear keeps one speed. smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse and swing are shaped by intensity. custom follows bezier, spring follows spring.
linear, smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse, swing, custom, spring "slow_down"
For custom: the handles. Defaults to the side's current curve.
4 elements0 <= x <= 1[0.25, 0.1, 0.25, 1]
How strongly the curve shapes the motion, 0 to 1. Only curves with an intensity use it. Defaults to 0.5.
0 <= x <= 1For spring: its physics. Defaults to stiffness 200, damping 12, mass 1.
Hide child attributes
Hide child attributes
Horizontal offset of the hidden state, as a fraction of the overlay's width (of a line's height on a text side); positive is right.
-10 <= x <= 10Vertical offset of the hidden state, as a fraction of the overlay's height (of a line's height on a text side); positive is down.
-10 <= x <= 10Opacity of the hidden state, 0 to 1.
0 <= x <= 1Start from a ready-made side; the other fields adjust it. Without it the side starts from what it is now; a new whole side starts still and a new text side from fade.
fade, slide_up, slide_down, slide_left, slide_right, mask_up, mask_down, grow, shrink, blur, blur_slide_up "slide_up"
Clockwise rotation of the hidden state in degrees.
-3600 <= x <= 3600Scale of the hidden state; 1 is its resting size.
0 <= x <= 10On textIntro/textOutro only: which units play the side, each in turn. Required on a new text side.
Hide child attributes
Hide child attributes
What animates on its own.
letters, words, lines "words"
How long after one unit the next starts, in ms (0 to 2000). Defaults to 100.
0 <= x <= 2000Which unit goes first. random uses the same shuffle every time. Defaults to forward.
forward, backward, center, edges, random "forward"
Eases the delays across the units. Defaults to linear.
linear, smooth, natural, slow_down, accelerate, elastic, overshoot, impulse, swing "linear"
Text overlays only: how its letters, words or lines leave, one after another, or null for none. Plays alongside outro: both end together.
Hide child attributes
Hide child attributes
Blur of the hidden state in pixels.
0 <= x <= 200Clip the motion to the overlay's box, so it wipes in like a mask.
How long the side plays, in ms (50 to 5000). On a text side, how long each unit plays. Defaults to 500.
50 <= x <= 5000How the side accelerates. Without it a new side slows down into place on the way in and speeds up on the way out.
Hide child attributes
Hide child attributes
How a side accelerates. linear keeps one speed. smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse and swing are shaped by intensity. custom follows bezier, spring follows spring.
linear, smooth, natural, slow_down, accelerate, elastic, bounce, overshoot, impulse, swing, custom, spring "slow_down"
For custom: the handles. Defaults to the side's current curve.
4 elements0 <= x <= 1[0.25, 0.1, 0.25, 1]
How strongly the curve shapes the motion, 0 to 1. Only curves with an intensity use it. Defaults to 0.5.
0 <= x <= 1For spring: its physics. Defaults to stiffness 200, damping 12, mass 1.
Hide child attributes
Hide child attributes
Horizontal offset of the hidden state, as a fraction of the overlay's width (of a line's height on a text side); positive is right.
-10 <= x <= 10Vertical offset of the hidden state, as a fraction of the overlay's height (of a line's height on a text side); positive is down.
-10 <= x <= 10Opacity of the hidden state, 0 to 1.
0 <= x <= 1Start from a ready-made side; the other fields adjust it. Without it the side starts from what it is now; a new whole side starts still and a new text side from fade.
fade, slide_up, slide_down, slide_left, slide_right, mask_up, mask_down, grow, shrink, blur, blur_slide_up "slide_up"
Clockwise rotation of the hidden state in degrees.
-3600 <= x <= 3600Scale of the hidden state; 1 is its resting size.
0 <= x <= 10On textIntro/textOutro only: which units play the side, each in turn. Required on a new text side.
Hide child attributes
Hide child attributes
What animates on its own.
letters, words, lines "words"
How long after one unit the next starts, in ms (0 to 2000). Defaults to 100.
0 <= x <= 2000Which unit goes first. random uses the same shuffle every time. Defaults to forward.
forward, backward, center, edges, random "forward"
Eases the delays across the units. Defaults to linear.
linear, smooth, natural, slow_down, accelerate, elastic, overshoot, impulse, swing "linear"
{
"intro": { "preset": "slide_up" },
"outro": { "preset": "fade" }
}
A line just inside the outline, or null for none.
How a square's corners are rounded.
none, regular, squircle "squircle"
Where the overlay sits relative to the presenter: the person in the clip's camera recording, or in its uploaded footage when the clip has no camera. front paints over everything. behind_presenter paints it behind the person but over everything else: in any layout the person is matted out of their footage and redrawn above the overlay. Fullscreen and framed layouts keep the recorded room around them; a cut-out layout replaces the room with the clip background. New overlays start on front. Without a presenter the overlay paints in front either way.
front, behind_presenter "behind_presenter"
Changes of depth over the overlay's own time, each held until the next: atMs after the overlay starts it moves to that depth, so one overlay can pass in front of the presenter and back behind them (a ring orbiting their head, a title they step in front of). depth is where it starts. On updates, omit it to leave the changes as they are; [] removes them. Absent in responses while the overlay holds one depth.
Hide child attributes
Hide child attributes
Ms after the overlay starts.
x >= 01200
Where the overlay sits relative to the presenter: the person in the clip's camera recording, or in its uploaded footage when the clip has no camera. front paints over everything. behind_presenter paints it behind the person but over everything else: in any layout the person is matted out of their footage and redrawn above the overlay. Fullscreen and framed layouts keep the recorded room around them; a cut-out layout replaces the room with the clip background. New overlays start on front. Without a presenter the overlay paints in front either way.
front, behind_presenter "behind_presenter"
Overlay size in artboard pixels. Absolute (not a percentage) so the overlay shape never distorts when the artboard dimensions change. Both sides must be greater than 0 — the renderer lays the overlay out into this box, so a zero or negative side has no valid meaning.
What fills the shape, cut to its outline: any clip background except ambient. A solid #00000000 leaves only the border.
Hide child attributes
Hide child attributes
Background variant. ambient: the clip's screen, else its camera, heavily blurred; no other fields. shaderGradient: an animated gradient set by shaderGradientPreset; echoing a non-preset one unchanged keeps it.
solid, gradient, image, video, shaderGradient, ambient "solid"
Hex color string. Required when type = 'solid'.
"#000000ff"
Linear gradient angle in degrees. Required when type = 'gradient'.
-9007199254740991 <= x <= 900719925474099145
Hex color string. Required when type = 'gradient'.
"#ff0080ff"
Hex color string. Required when type = 'gradient'.
"#7928caff"
Hosted image URL. Present in responses and accepted as input only when copied exactly from GET /v1/backgrounds; otherwise pass sourceId.
Animated gradient preset from GET /v1/backgrounds. Required when type = 'shaderGradient'.
"Halo"
Source ID from POST /v1/sources (kind: image for type = 'image', kind: video for type = 'video'). Required for image/video backgrounds unless using an exact URL from GET /v1/backgrounds. Input-only.
"su_abc123"
Video background duration in seconds. Read-only: derived from the uploaded source or catalog entry on input.
x >= 012.4
Hosted video URL. Present in responses and accepted as input only when copied exactly from GET /v1/backgrounds; otherwise pass sourceId.
Label in the editor's timeline.
A custom outline as SVG path data (d) in a 0–100 box; it stretches with the overlay box. Sending it makes the shape a path. Closed subpaths (ending in Z) are filled; an open path shows only its border, drawn centred on the line.
1 - 10000"M50 0 L100 100 L0 100 Z"
Drop shadow, matching the editor's Shadow menu. It falls from the background box when the text has one, else from the letters.
none, subtle, deep "subtle"
The outline, stretched to fill the overlay box: a non-square box makes a rectangle or an oval. path draws the overlay's own path.
square, circle, triangle, diamond, star, hexagon, arrow, path Intro/outro animation: smooth fades the shape in and out, hard_cut pops it. An animation replaces it while set.
smooth, hard_cut "smooth"
Response
OK
A shape overlay on a clip
A shape overlay on a clip: a square, circle, star… filled with any clip background.
Hide child attributes
Hide child attributes
Hide child attributes
Hide child attributes
How a square's corners are rounded.
none, regular, squircle "squircle"
Where the overlay sits relative to the presenter: the person in the clip's camera recording, or in its uploaded footage when the clip has no camera. front paints over everything. behind_presenter paints it behind the person but over everything else: in any layout the person is matted out of their footage and redrawn above the overlay. Fullscreen and framed layouts keep the recorded room around them; a cut-out layout replaces the room with the clip background. New overlays start on front. Without a presenter the overlay paints in front either way.
front, behind_presenter "behind_presenter"
Overlay size in artboard pixels. Absolute (not a percentage) so the overlay shape never distorts when the artboard dimensions change. Both sides must be greater than 0 — the renderer lays the overlay out into this box, so a zero or negative side has no valid meaning.
x >= 0What fills the shape, cut to its outline.
Hide child attributes
Hide child attributes
Background variant. ambient: the clip's screen, else its camera, heavily blurred; no other fields. shaderGradient: an animated gradient set by shaderGradientPreset; echoing a non-preset one unchanged keeps it.
solid, gradient, image, video, shaderGradient, ambient "solid"
Hex color string. Required when type = 'solid'.
"#000000ff"
Linear gradient angle in degrees. Required when type = 'gradient'.
-9007199254740991 <= x <= 900719925474099145
Hex color string. Required when type = 'gradient'.
"#ff0080ff"
Hex color string. Required when type = 'gradient'.
"#7928caff"
Hosted image URL. Present in responses and accepted as input only when copied exactly from GET /v1/backgrounds; otherwise pass sourceId.
Animated gradient preset from GET /v1/backgrounds. Required when type = 'shaderGradient'.
"Halo"
Source ID from POST /v1/sources (kind: image for type = 'image', kind: video for type = 'video'). Required for image/video backgrounds unless using an exact URL from GET /v1/backgrounds. Input-only.
"su_abc123"
Video background duration in seconds. Read-only: derived from the uploaded source or catalog entry on input.
x >= 012.4
Hosted video URL. Present in responses and accepted as input only when copied exactly from GET /v1/backgrounds; otherwise pass sourceId.
Shape overlay ID
"ly_abc123"
SVG path data in a 0–100 box, for shapeType path; null otherwise.
Drop shadow, matching the editor's Shadow menu. It falls from the background box when the text has one, else from the letters.
none, subtle, deep "subtle"
The outline, stretched to fill the overlay box: a non-square box makes a rectangle or an oval. path draws the overlay's own path.
square, circle, triangle, diamond, star, hexagon, arrow, path x >= 0How one thing gives way to the next: smooth eases across the change, hard_cut swaps instantly.
smooth, hard_cut "smooth"
Stacking position among the clip's image, video and text overlays: 0 is the backmost. depth applies first — a behind_presenter overlay stays behind the presenter whatever its zIndex — so the order only matters among overlays at the same depth. Lottie overlays share the stack but aren't listed, so listed values can skip a number.
0 <= x <= 90071992547409910
Changes of depth over the overlay's own time, each held until the next: atMs after the overlay starts it moves to that depth, so one overlay can pass in front of the presenter and back behind them (a ring orbiting their head, a title they step in front of). depth is where it starts. On updates, omit it to leave the changes as they are; [] removes them. Absent in responses while the overlay holds one depth.
Hide child attributes
Hide child attributes
Ms after the overlay starts.
x >= 01200
Where the overlay sits relative to the presenter: the person in the clip's camera recording, or in its uploaded footage when the clip has no camera. front paints over everything. behind_presenter paints it behind the person but over everything else: in any layout the person is matted out of their footage and redrawn above the overlay. Fullscreen and framed layouts keep the recorded room around them; a cut-out layout replaces the room with the clip background. New overlays start on front. Without a presenter the overlay paints in front either way.
front, behind_presenter "behind_presenter"
Was this page helpful?