Skip to main content

Text Elements

Complete reference for text elements in the Zvid Package, including styling options, HTML support, and positioning.

Overview​

Text elements allow you to add static text or HTML to your videos. It supports HTML content with extensive styling options including custom fonts, colors, alignment, and text effects.

TextItem Interface​

interface TextItem {
  type: "TEXT";
  text?: string;
  html?: string;
  style?: CSS.Properties;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  anchor?: Anchor;
  position?: PositionPreset;
  enterBegin?: number;
  enterEnd?: number;
  exitBegin?: number;
  exitEnd?: number;
  track?: number;
  opacity?: number;
  angle?: number;
  flipV?: boolean;
  flipH?: boolean;
  enterAnimation?: string | null;
  exitAnimation?: string | null;
}

Properties​

Required Properties​

PropertyTypeDescription
type"TEXT"Element type identifier

Content Properties​

PropertyTypeDefaultDescription
textstring""Plain text content (required if no html)
htmlstring""HTML formatted text content (takes priority over text)
styleCSS.PropertiesDefault styleText styling configuration

Position & Size Properties​

PropertyTypeDefaultDescription
xnumber0Horizontal position in pixels
ynumber0Vertical position in pixels
widthnumberAuto-calculatedText box width in pixels
heightnumberAuto-calculatedText box height in pixels
anchorAnchortop-leftAnchor point for positioning, scaling and rotation

Timing Properties​

PropertyTypeDefaultDescription
enterBeginnumber0Start time for entrance (seconds)
enterEndnumber0End time for entrance animation (seconds)
exitBeginnumberproject.durationStart time for exit animation (seconds)
exitEndnumberproject.durationEnd time for exit (seconds)

Visual Properties​

PropertyTypeDefaultDescription
tracknumber0Layer/track number (higher = on top)
opacitynumber1Transparency (0-1)
anglenumber0Rotation in degrees
flipVbooleanfalseFlip Vertically
flipHbooleanfalseFlip Horizontal

Animation Properties​

PropertyTypeDefaultDescription
enterAnimationstring | nullnullEntrance animation name
exitAnimationstring | nullnullExit animation name

Click here to see Supported Animations

Anchor​

PositionPreset​

type PositionPreset =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-right"
  | "bottom-center"
  | "bottom-left"
  | "custom";
type Anchor =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

Basic Examples​

Simple Text​

{
  type: "TEXT",
  text: "Hello World",
  x: 640,
  y: 360,
  style: {
    fontSize: "48px",
    color: "#000000",
    textAlign: "center"
  }
}

Styled Text with Animation​

{
  type: "TEXT",
  text: "Welcome to Zvid",
  position: "center-center"
  enterBegin: 0,
  enterEnd: 1,
  exitBegin: 9,
  exitEnd: 10,
  style: {
    fontSize: "36px",
    color: "#ff6b35",
    textAlign: "center",
    fontWeight: "bold",
    letterSpacing: "2px"
  },
  enterAnimation: "fade",
  exitAnimation: "fade"
}

HTML Content​

{
  type: "TEXT",
  html: `
    <div style="text-align: center;">
      <h1 style="color: #ff6b35; margin: 0;">Big Title</h1>
      <p style="color: #666; font-size: 18px;">Subtitle text</p>
    </div>
  `,
  position: 'center-center',
  enterBegin: 0,
  enterEnd: 2,
  exitBegin: 8,
  exitEnd: 10,
}

Advanced Examples​

Multi-line Text with Custom Styling​

{
  type: "TEXT",
  html: "<div><p>Line 1</p><p>Line 2</p><p>Line 3</p></div>",
  position: "center-center",
  style: {
    fontSize: "24px",
    color: "#2c3e50",
    fontFamily: "Roboto",
    textAlign: "left",
    lineHeight: 1.5,
    letterSpacing: "1px"
  },
  enterBegin: 1,
  enterEnd: 2,
  exitBegin: 4,
  exitEnd: 5,
  enterAnimation: "slideleft",
  exitAnimation: "slideright"
}

Rotated Text with Transparency​

{
  type: "TEXT",
  text: "WATERMARK",
  x: 660,
  y: 340,
  angle: 45,
  opacity: 0.3,
  style: {
    fontSize: "72px",
    color: "#000000",
    fontFamily: "Anton",
    textAlign: "center",
    letterSpacing: "5px"
  },
  track: 10, // High track to appear on top
  anchor: "center-center" // try "top-left" or "bottom-right" to change rotation/scale origin
}

HTML with Rich Formatting​

{
  type: "TEXT",
  html: `
    <div style="
      background: linear-gradient(45deg, #ff6b35, #f7931e);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    ">
      <h2 style="color: white; margin: 0 0 10px 0;">Special Offer!</h2>
      <p style="color: white; margin: 0; font-size: 16px;">
        Get <strong>50% OFF</strong> on all products
      </p>
    </div>
  `,
  x: 640,
  y: 360,
  width: 400,
  height: 120,
  enterEnd: 1.5,
  exitBegin: 8.5,
  exitEnd: 10,
  enterAnimation: "fade",
  exitAnimation: "fade"
}

Font Handling​

The package automatically downloads and caches Google Fonts when specified in the fontFamily property. Popular fonts include:

  • Sans-serif: Roboto, Open Sans, Lato, Montserrat, Poppins
  • Serif: Playfair Display, Merriweather, Lora
  • Display: Oswald, Bebas Neue, Righteous
  • Monospace: Roboto Mono, Source Code Pro
{
  type: "TEXT",
  text: "Custom Font Example",
  style: {
    fontFamily: "Montserrat", // Automatically downloaded from Google Fonts
    fontSize: "32px",
    fontWeight: "bold"
  }
}

Best Practices​

Positioning and Sizing​

  1. Center Positioning: For centered text, use x: width / 2 - elementWidth / 2 and y: height / 2 - elementHeight / 2
  2. Auto-sizing: Let width and height auto-calculate for simple text
  3. Manual Sizing: Set explicit dimensions for multi-line or HTML content

Animation Coordination​

  1. Timing: Ensure enterEnd ≤ exitBegin for continuous visibility
  2. Staggering: Use different timing for multiple text elements
  3. Track Layering: Use higher track numbers for text that should appear on top

Next Steps​