Basic Video Creation

Learn how to create your first video with the Zvid Package. This example demonstrates the fundamental concepts and basic usage.

Simple Text Video

Let's start with a minimal example that creates a 5-second video with animated text.

import renderVideo from "video-rendering";

const project = {
  name: "basic-text-video",
  duration: 5,
  backgroundColor: "#1a1a2e",
  visuals: [
    {
      type: "TEXT",
      text: "Hello, Zvid!",
      position: "center-center",
      enterBegin: 0,
      enterEnd: 1,
      exitBegin: 4,
      exitEnd: 5,
      style: {
        fontSize: "64px",
        color: "#ffffff",
        textAlign: "center",
        fontWeight: "bold",
        letterSpacing: "2px",
      },
      enterAnimation: "fade",
      exitAnimation: "fade",
    },
  ],
};

async function createBasicVideo() {
  try {
    console.log("Creating basic video...");

    await renderVideo(project, "./output", (progress) => {
      console.log(`Progress: ${progress}%`);
    });

    console.log("Basic video created successfully!");
  } catch (error) {
    console.error("Error:", error.message);
  }
}

createBasicVideo();

What this creates:

• A 5-second video with dark blue background
• White text that fades in over 1 second
• Text stays visible for 3 seconds
• Text fades out over the last second

Multi-Element Video

Now let's create a more complex video with multiple text elements and timing:

import renderVideo from "video-rendering";

const project = {
  name: "multi-element-video",
  duration: 10,
  backgroundColor: "#0f0f23",
  visuals: [
    // Title text
    {
      type: "TEXT",
      text: "Zvid Package",
      html: "<span>Zvid Package</span>",
      x: 0,
      y: 197,
      enterEnd: 1,
      exitBegin: 9,
      track: 2,
      style: {
        width: "100%",
        fontSize: "72px",
        lineHeight: 1.2,
        color: "#64ffda",
        fontFamily: "Lato",
        textAlign: "center",
        fontWeight: "bold",
        letterSpacing: "3px",
      },
      enterAnimation: "slideleft",
      exitAnimation: "slideright",
    },

    // Subtitle
    {
      type: "TEXT",
      text: "Create videos programmatically",
      x: 0,
      y: 355,
      enterBegin: 1.5,
      enterEnd: 2.5,
      exitBegin: 8.5,
      exitEnd: 9.5,
      track: 2,
      style: {
        width: "100%",
        fontSize: "42px",
        lineHeight: 1.2,
        color: "#ffffff",
        textAlign: "center",
        isItalic: true,
        letterSpacing: "1px",
      },
      enterAnimation: "fade",
      exitAnimation: "fade",
    },

    // Feature list
    {
      type: "TEXT",
      html: "<span>✓ Easy to use<br/>✓ Powerful features<br/>✓ TypeScript support</span>",
      x: 0,
      y: 480,
      enterBegin: 3,
      enterEnd: 4,
      exitBegin: 8,
      exitEnd: 9,
      track: 2,
      style: {
        width: "100%",
        fontSize: "36px",
        lineHeight: 1.5,
        color: "#b39ddb",
        fontFamily: "Lato",
        textAlign: "center",
      },
      enterAnimation: "diagbl",
      exitAnimation: "diagbr",
    },
  ],
};

async function createMultiElementVideo() {
  try {
    await renderVideo(project, "./output", (progress) => {
      console.log(`Rendering: ${progress}%`);
    });
    console.log("Multi-element video created!");
  } catch (error) {
    console.error("Error:", error.message);
  }
}

createMultiElementVideo();

Timeline breakdown:

• 0-1s: Title slides down and fades in
• 1.5-2.5s: Subtitle fades in
• 3-4s: Feature list slides up
• 8-9s: Feature list slides down, subtitle fades out
• 9-10s: Title slides up