Elements are the building blocks of your video content, including text, images, videos, shapes, and more. Consider the order of elements in your clip. Elements added later will appear on top of earlier elements.

​
Properties

PropertyTypeDefaultDescription
idstringuuid()A unique identifier for the element.
namestring-A name for the element.
typestring9:16The type of element (e.g., text, image, video, shape, etc.)
xnumber0The x position of the element
ynumber0The y position of the element
widthnumber-The width of the element
heightnumber-The height of the element
rotationnumber0The rotation angle of the element in degrees
scalenumber1The scale factor of the element
opacitynumber1The opacity of the element (0 to 1)
animationsarray[]An array of Animation objects applied to the element.
keepRatiobooleanfalseKeep the ratio while resizing the element.
originCenterbooleanfalseIf true, use the center of the element as self origin
anchorToCenterbooleanfalseIf true, use the center of the stage as world origin

​
Usage

Here’s an example of how to create and customize different types of elements: 
import BlendDuck, { Text, Image, Video, Animation, AnimationType } from "@blendduck/node-sdk";

// Create a text element
const textElement = new Text();
textElement.text = "Hello, BlendDuck!";
textElement.fontSize = 48;
textElement.x = 100;
textElement.y = 100;

// Create an image element
const imageElement = new Image();
imageElement.url = "https://s.blendduck.com/images/24.png";
imageElement.width = 300;
imageElement.height = 200;
imageElement.x = 200;
imageElement.y = 200;

// Create a video element
const videoElement = new Video();
videoElement.url = "https://s.blendduck.com/videos/07.mp4";
videoElement.width = 640;
videoElement.height = 360;
videoElement.x = 300;
videoElement.y = 300;
videoElement.volume = 0.8;
videoElement.loop = true;

// Add an animation to an element
const fadeIn = new Animation(AnimationType.FadeIn);
fadeIn.startTime = 0;
fadeIn.endTime = 1;
textElement.addAnimation(fadeIn);

​
Element Types

BlendDuck supports various types of elements. Below are the descriptions of each element type along with example code snippets to create them.

​
Text

The Text element allows you to add customizable text content to your videon. You can modify properties such as font size, style, and alignment.
PropertyTypeDefaultDescription
textstring-The content of the text.
textAlignenumcenterThe alignment of the text (e.g., left, right).
fontSizenumber60The size of the font in pixels.
fontFamilystringnullThe font family of the text, if null, using the fontFamily in Theme.
boldboolfalseIf true, the text is bold.
italicboolfalseIf true, the text is italic.
underlineboolfalseIf true, the text has an underline.
strikethroughboolfalseIf true, the text has a strikethrough.
textStyleenumnoneThe style of the text (e.g., shadow, neon, stack, stage, glitch).
autoSizebooltrueIf true, the text box adjusts its size automatically.
import { Text } from "@blendduck/node-sdk";

const textElement = new Text();
textElement.text = "Hello World";
textElement.fontWeight = 700;
textElement.fontSize = 24;
textElement.bold = true;
textElement.textAlign = "center";

​
Image

The Image element enables you to add static images from a URL.
PropertyTypeDefaultDescription
urlstring-The URL of the image.
radiusnumber0The border radius of the image.
import { Image } from "@blendduck/node-sdk";

const imageElement = new Image();
imageElement.url = "https://example.com/image.jpg";
imageElement.radius = 10;

​
Video

The Video element allows you to embed video content from a URL. You can manage playback properties such as volume and looping.
PropertyTypeDefaultDescription
urlstring-The URL of the video.
volumeboolean1The volume of the video (0-1).
loopbooleanfalseIf true, the video will loop.
radiusnumber0The border radius of the video.
import { Video } from "@blendduck/node-sdk";

const videoElement = new Video();
videoElement.url = "https://example.com/video.mp4";
videoElement.volume = 0.8;
videoElement.loop = true;

​
Emoji

The Emoji element lets you add dynamic emojis to your Clip.
PropertyTypeDefaultDescription
urlstring-the URL of the emoji
import { Emoji } from "@blendduck/node-sdk";

const emojiElement = new Emoji();
emojiElement.url = "https://example.com/emoji.png";

​
Shape

The Shape element allows you to add basic geometric shapes to your Clip. You can customize their appearance with different colors or gradients, making them useful for creating backgrounds, dividers, or other visual elements.
PropertyTypeDefaultDescription
shapeIdstring-The shape ID of the shape element.
fillcolor-The color or gradient of the shape.
import { Shape } from "@blendduck/node-sdk";

const shapeElement = new Shape();
shapeElement.shapeId = 'rect';
shapeElement.fill = { type: "color", color: "#ff0000" };

​
Lottie

The Lottie element allows you to embed lightweight animations by Lottie URL, the URL can be .json or .lottie.
PropertyTypeDefaultDescription
urlstring-the URL of the lottie file
import { Lottie } from "@blendduck/node-sdk";

const lottieElement = new Lottie();
lottieElement.url = "https://example.com/animation.json";

​
Group

The Group element acts as a container for other elements. By grouping multiple elements together, you can apply transformationsto the group as a whole, allowing for better organization and control over complex layouts.
PropertyTypeDefaultDescription
childrenarray[]The array of elements that form the group.
import { Group, Text, Image } from "@blendduck/node-sdk";

const groupElement = new Group();

const textElement = new Text();
textElement.text = "Grouped Text";

const imageElement = new Image();
imageElement.url = "https://example.com/image.jpg";

groupElement.children = [textElement, imageElement];

​
Widget

The Widget element allows for embedding custom-built components. This flexible element type is ideal for dynamic data visualizations, charts, or other resuable blocks in your video.
PropertyTypeDefaultDescription
scopestring-The widget package scope identifier.
widgetIdstring-The widget ID in the scope.
playobject-The widget AudioPlay
import { Widget } from "@blendduck/node-sdk";

const widget = new Widget({ scope: 'core', widgetId: 'counter' });
Create a widget with a AudioPlay controller 
import { Widget } from "@blendduck/node-sdk";

const widget = new Widget({ 
  scope: 'core', 
  widgetId: 'avatar',
  // avatar preview image
  avatar: {
    url: 'https://s.blendduck.com/images/avatar-000.png'
  },
  // avatar audio
  audio: {
    url: 'https://s.blendduck.com/audios/motivation.mp3'
  },
  // generated avatar video
  video: null,
  // timeline AudioPlay control bar
  play: {
    id: 'test',
    type: 'audioPlay',
    name: 'Avatar',
    offset: 0,
    startTime: 0,
    endTime: 5,
    volume: 1,
    url: 'https://s.blendduck.com/audios/motivation.mp3'
  }
});
A Widget is an extension of an Element. You can use the built-in ready-made widgets or develop your own widgets.

Builtin Widgets

Use ready-made widgets out of box

Build a Widget

Make a widget customized for your needs.