Intro templates

An intro is an optional title card prepended to the start of demo.mp4 (and demo.gif when GIF output is enabled). The intro is rendered separately from the workflow recording, fades into the first frame of the demo, and is best-effort: if any part of it fails, the run still ships the demo without the intro.

When to use an intro

Add an intro when the viewer needs context up front: a feature name, a campaign, or a date.

• Launch announcements where the first second sets the tone.
• Feature explainers that should name the feature before the workflow starts.
• Release recap videos where viewers expect a "what's new" frame.
• Customer-facing walkthroughs that need consistent branding.

Skip the intro for raw docs walkthroughs and internal recordings where the title card is just friction.

Template choices

Six templates are available today. All take content (text and/or logo) plus style (colors). Pick by the look you want for the first frame.

simple

Single line of text on a solid or gradient background. The quietest template; good for docs intros where the goal is to name the feature without distraction.

{
  "intro": {
    "template": "simple",
    "content": { "text": "Analytics, now in 60 seconds" },
    "style": {
      "background": { "type": "solid", "color": "#0B1220" },
      "textColor": "#FFFFFF"
    }
  }
}

simple-spring-scale-in

Same as simple, with a spring-scale entrance on the text. Use it when the demo opens a launch or feature explainer and the intro should feel kinetic.

{
  "intro": {
    "template": "simple-spring-scale-in",
    "content": { "text": "Meet the new home tab" },
    "style": {
      "background": { "type": "gradient", "from": "#0B1220", "to": "#101A33", "direction": "diagonal" },
      "textColor": "#FFFFFF"
    }
  }
}

simple-line-by-line-slide

Multi-line text staggered in line by line. The default for most launch and feature cards. It gives a one-line headline plus a supporting line room to breathe.

{
  "intro": {
    "template": "simple-line-by-line-slide",
    "content": { "text": "Analytics, now in 60 seconds" },
    "style": {
      "background": { "type": "gradient", "from": "#0B1220", "to": "#101A33", "direction": "diagonal" },
      "textColor": "#FFFFFF"
    }
  }
}

simple-line-by-line-slide-with-logo

Same line-by-line motion, with a logo placed above the text. Use it when the demo is for a customer-facing campaign and the brand mark should sit above the headline.

{
  "intro": {
    "template": "simple-line-by-line-slide-with-logo",
    "content": {
      "text": "Analytics, now in 60 seconds",
      "logoUrl": "https://cdn.example.com/brand/logo.svg"
    },
    "style": {
      "background": { "type": "gradient", "from": "#0B1220", "to": "#101A33", "direction": "diagonal" },
      "textColor": "#FFFFFF"
    }
  }
}

simple-line-by-line-slide-with-logo-and-backdrop

Logo and text composited over the first frame of the recorded workflow, with a diagonal opacity ramp using backdropColor. The intro feels rooted in the product because viewers see the destination UI behind the title.

Use backdropColor instead of style.background for this template.

{
  "intro": {
    "template": "simple-line-by-line-slide-with-logo-and-backdrop",
    "content": {
      "text": "Analytics, now in 60 seconds",
      "logoUrl": "https://cdn.example.com/brand/logo.svg"
    },
    "style": {
      "backdropColor": "#0B1220",
      "textColor": "#FFFFFF"
    }
  }
}

simple-logo

Logo only, no text. Use it for short social clips where the brand mark alone is the title card.

{
  "intro": {
    "template": "simple-logo",
    "content": { "logoUrl": "https://cdn.example.com/brand/logo.svg" },
    "style": {
      "background": { "type": "solid", "color": "#0B1220" }
    }
  }
}

Field rules

• content.text: 1 to 120 characters. Required for every template except simple-logo.
• content.logoUrl: required for logo-bearing templates. SVG or PNG hosted anywhere reachable.
• style.background: either { "type": "solid", "color": "#RRGGBB" } or { "type": "gradient", "from": "#RRGGBB", "to": "#RRGGBB", "direction": "vertical" | "horizontal" | "diagonal" }. Used by every template except the backdrop variant.
• style.backdropColor: used only by simple-line-by-line-slide-with-logo-and-backdrop. The intro composites the logo and text over the first frame of the demo with a diagonal opacity ramp using this color.
• style.textColor: #RRGGBB. Required for every text-bearing template.

Agent prompt pattern

Create a Slideshot video with a short intro that names the feature, sets
context for product marketers, and then transitions into the product
walkthrough. Use the line-by-line template with a dark gradient background
unless the brand asset suggests otherwise.

Failure behavior

The intro stage is best-effort. If template rendering or the final concat fails, the run still completes successfully and demo.mp4 ships without the intro. Failures surface in the run's event log; the run status itself stays succeeded.

Related

• Background: pair an intro with a brand-aligned background.
• Video and content size: pick the output dimensions the intro is rendered into.
• Brand extraction: fetch logos and colors to auto-fill intro templates.