5. Component library#

Hand-styling text gets old fast. The component library ships pre-built animated overlays — lower-thirds, title cards, stat boxes, callouts — that you drop in with a component element and a small settings object. This chapter adds an animated title card at the start of the listing.

Prerequisites: chapter 4. You should be comfortable styling text manually before relying on components.

Step 1 — What a component is#

A component is a pre-built animation rendered by the JSON2Video engine on its own canvas. You reference it by an ID (e.g. basic/000) and pass settings that customise the visible parameters — usually text strings and colours.

{
  "type": "component",
  "component": "basic/000",
  "settings": {
    "headline": "FOR SALE",
    "subline": "123 Oak Street"
  },
  "duration": 4
}

Components are listed in the component library. For this tutorial we use basic/000, a clean title card with a headline + subline. Replace headline, subline, and colour keys to match your brand.

Step 2 — Insert the title card as a new opening scene#

Prepend a new scene before the three room scenes. The component takes the full canvas and runs its built-in entry animation automatically.

{
  "resolution": "full-hd",
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "component",
          "component": "basic/000",
          "settings": {
            "headline": "FOR SALE",
            "subline": "123 Oak Street"
          }
        }
      ]
    }
  ]
}

Components have their own internal timing (entry, hold, exit). Setting duration: 4 on the element (or letting the scene's duration apply) gives the component the full 4 seconds to play.

Step 3 — Combine the title card with the room scenes#

The room scenes from chapter 4 stay unchanged. The new title card precedes them, transitioning into scene 2 with the existing fade.

{
  "resolution": "full-hd",
  "elements": [
    {
      "type": "audio",
      "src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
      "volume": 0.4
    }
  ],
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "component",
          "component": "basic/000",
          "settings": {
            "headline": "FOR SALE",
            "subline": "123 Oak Street"
          }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
        },
        {
          "type": "text",
          "text": "Exterior",
          "position": "bottom-left",
          "x": 60,
          "y": -60,
          "fade-in": 0.5,
          "fade-out": 0.5,
          "settings": {
            "font-family": "Inter",
            "font-size": "72px",
            "font-color": "#FFFFFF",
            "font-weight": "700"
          }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg"
        },
        {
          "type": "text",
          "text": "Chef's Kitchen",
          "position": "bottom-left",
          "x": 60,
          "y": -60,
          "fade-in": 0.5,
          "fade-out": 0.5,
          "settings": {
            "font-family": "Inter",
            "font-size": "72px",
            "font-color": "#FFFFFF",
            "font-weight": "700"
          }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg"
        },
        {
          "type": "text",
          "text": "Master Bedroom",
          "position": "bottom-left",
          "x": 60,
          "y": -60,
          "fade-in": 0.5,
          "fade-out": 0.5,
          "settings": {
            "font-family": "Inter",
            "font-size": "72px",
            "font-color": "#FFFFFF",
            "font-weight": "700"
          }
        }
      ]
    }
  ]
}

The complete final JSON#

(Identical to the JSON in step 3 — the listing now opens with an animated title card and continues with three room scenes.)

{
  "resolution": "full-hd",
  "elements": [
    {
      "type": "audio",
      "src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
      "volume": 0.4
    }
  ],
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "component",
          "component": "basic/000",
          "settings": {
            "headline": "FOR SALE",
            "subline": "123 Oak Street"
          }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
        },
        { "type": "text", "text": "Exterior", "position": "bottom-left", "x": 60, "y": -60 }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg"
        },
        { "type": "text", "text": "Chef's Kitchen", "position": "bottom-left", "x": 60, "y": -60 }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg"
        },
        { "type": "text", "text": "Master Bedroom", "position": "bottom-left", "x": 60, "y": -60 }
      ]
    }
  ]
}

Expected output#

A 16-second video: animated "FOR SALE / 123 Oak Street" title card (4 s) → exterior → kitchen → bedroom. The title card uses the component's built-in motion design; no manual animation needed. Sample render: tutorial-05.mp4 (placeholder).

What you learned#

• A component element pulls a pre-built animated overlay from the library.
• The component field holds the ID (e.g. basic/000); the settings object customises text, colours, and component-specific knobs.
• Each component has its own internal entry / hold / exit timing — duration gives it room to play.
• Components keep the JSON readable for branded motion design that would otherwise require dozens of lines of text styling.

Going further#

Components have their own settings catalogue. For a custom intro animation that the library does not provide, use the html element introduced in chapter 6 instead.

Previous chapter / Next chapter#

← 4. Text & styling · 6. HTML elements →