SLIDESHOT [docs] Markdown
For agents: read the markdown version of these docs →
0:00 / 0:00
Background placeholder

This placeholder uses an existing product demo video while we add examples for background styles.

Background

A background reframes the recorded UI on a colored canvas with rounded corners, instead of edge-to-edge product chrome. Use it to give docs videos a calm frame, give launch clips brand-aligned framing, or make a busy app UI easier to focus on.

Backgrounds are configured under options.video.background. Setting any background switches the renderer into framed mode: the recorded content is centered, given rounded corners, and composited onto the canvas you pick. Cursor motion is remapped so it still tracks the workflow inside the framed region.

Recorded UI framed on a brand background

Why background matters

The background changes the feel of the video before the viewer reads a single word.

  • A quiet neutral canvas reads as documentation.
  • A brand-aligned gradient reads as marketing.
  • A high-contrast canvas helps dense, low-contrast app UIs stand out on small screens.

Solid background

A single color filled across the whole canvas. Best for quiet docs videos and high-contrast hero clips.

Solid background example

{
  "video": {
    "background": { "type": "solid", "color": "#0B1220" }
  }
}

color must be #RRGGBB. No direction field: the canvas is filled with one color.

Gradient background

Two-color interpolation across the canvas. Use it when you want a subtle brand feel without picking a strong solid.

Gradient background example

{
  "video": {
    "background": {
      "type": "gradient",
      "from": "#0B1220",
      "to": "#101A33",
      "direction": "diagonal"
    }
  }
}

direction is one of vertical, horizontal, or diagonal. Defaults to diagonal when omitted.

Controlling content size inside the background

When a background is set, the recorded content sits inside the resolved output canvas. By default the framed content is scaled to 0.95 of the output size. You can override that with options.video.size.content.

Content scale inside a framed canvas

{
  "video": {
    "size": {
      "width": 1920,
      "height": 1080,
      "content": { "scale": 0.9 }
    },
    "background": { "type": "solid", "color": "#0B1220" }
  }
}

content.scale accepts 0.5 through 1. Use content.padding instead when you want pixel-exact inset. content.padding and content.scale cannot both be applied: padding wins when both are present.

See Video and content size for the full sizing model.

When to skip the background

  • Pure docs walkthroughs that prefer edge-to-edge UI.
  • Recordings that go into existing branded chrome (a launch page already shows brand frames).
  • Vertical mobile clips where every pixel of UI needs to be visible.

Omit options.video.background to get the unframed, edge-to-edge output.

Agent prompt pattern

Create a Slideshot video with a clean background that keeps the product UI
readable and avoids distracting from the workflow. Use a subtle diagonal
gradient that matches the brand palette when one is available.