Text Behind the Speaker

The effect that makes people stop scrolling: text that appears physically behind the presenter, as if they’re standing in front of it. Stack a full-frame background video, place oversized title text underneath, and composite a transparent speaker cutout on top — no manual rotoscoping required. Features used: z_index layering, word_animation (color), fade motion preset, text stroke & shadow

The layer order is the whole trick:

z: 0  — background video (full clip with audio)
z: 10 — giant title text  ← TEXT LIVES HERE, behind the person
z: 20 — speaker cutout video (transparent WebM, volume 0)  ← person on top of text
z: 30 — karaoke captions (word_animation)
z: 40 — logo sting (fades out at open)

{
  "width": 3840,
  "height": 2160,
  "duration": 8,
  "elements": [
    {
      "type": "image",
      "id": "logo1",
      "source_url": "https://cdn-assets.framelane.io/shared/images/logo.png",
      "duration": 1,
      "z_index": 40,
      "motion": [
        {
          "type": "fade",
          "time": 0,
          "duration": 0.5,
          "reversed": true
        }
      ]
    },
    {
      "type": "text",
      "id": "t1",
      "text": "BOMB!",
      "font_family": "Poppins",
      "text_color": "#D9FF00",
      "stroke_color": "#000000",
      "stroke_width": 0.1,
      "shadow_color": "#000000",
      "shadow_x": "5%",
      "shadow_y": "8%",
      "font_size": 320,
      "x": "20%",
      "y": "50%",
      "time": 2,
      "duration": 6,
      "motion": [
        {
          "type": "fade",
          "time": 2,
          "duration": 1
        },
        {
          "type": "fade",
          "time": 5,
          "duration": 1,
          "reversed": true
        }
      ],
      "z_index": 10
    },
    {
      "type": "video",
      "id": "vid2",
      "source_url": "https://cdn-assets.framelane.io/shared/videos/clip4.mp4",
      "in_point": 0,
      "out_point": 8,
      "z_index": 0
    },
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn-assets.framelane.io/shared/videos/clip4.webm",
      "in_point": 0,
      "out_point": 8,
      "volume": 0,
      "z_index": 20
    },
    {
      "type": "text",
      "id": "t2",
      "text": "I'm s— What? What are we all thinking? A bomb, Alvarez. A bomb.",
      "font_family": "Poppins",
      "text_color": "#FFFFFF",
      "stroke_color": "#000000",
      "background_color": "#D9FF00",
      "stroke_width": 0.1,
      "shadow_color": "#000000",
      "shadow_x": "5%",
      "shadow_y": "8%",
      "font_size": 120,
      "z_index": 30,
      "x": "50%",
      "y": "75%",
      "duration": 8,
      "word_animation": {
        "style": "color",
        "words": [
          { "text": "I'm", "start": 0.1, "end": 0.56 },
          { "text": "s—", "start": 0.56, "end": 0.78 },
          { "text": "What?", "start": 0.78, "end": 1.14 },
          { "text": "What", "start": 1.14, "end": 1.28 },
          { "text": "are", "start": 1.28, "end": 1.38 },
          { "text": "we", "start": 1.38, "end": 1.48 },
          { "text": "all", "start": 1.48, "end": 1.6 },
          { "text": "thinking?", "start": 1.6, "end": 1.9 },
          { "text": "A", "start": 3.08, "end": 3.18 },
          { "text": "bomb,", "start": 3.18, "end": 4.8 },
          { "text": "Alvarez.", "start": 4.8, "end": 6.68 },
          { "text": "A", "start": 6.68, "end": 7.1 },
          { "text": "bomb.", "start": 7.1, "end": 8.0 }
        ]
      }
    }
  ]
}

How the z-depth sandwich works

vid2 (clip4.mp4) is the full background clip at z_index: 0 — it carries the audio. vid1 is the same footage as a transparent WebM at z_index: 20 with volume: 0, so only the speaker silhouette composites on top. The giant "BOMB!" title sits at z_index: 10 between them, which is why the speaker appears to stand in front of the letters. The title fades in at second 2 and fades out at second 5 using paired fade motion presets — the second entry sets reversed: true to dissolve out instead of in.

Karaoke captions on top

The bottom caption line uses word_animation.style: "color" with per-word timestamps from transcription. background_color on the text element sets the highlight color for the active word. At z_index: 30 it sits above the speaker cutout so captions stay readable.

Tips

Font size matters. The title needs to be large enough that the speaker visibly overlaps it — font_size: 320 at 3840px fills the frame. Scale down for 1080p or vertical formats. Two video layers, one clip. Use the full MP4 for background + audio and a pre-matted WebM for the foreground cutout. Set the cutout layer to volume: 0 so audio isn’t doubled. Logo sting. A short-lived image at the highest z_index with a reversed fade motion (reversed: true) dissolves the logo out in the first half-second without a hard cut. Don’t have a pre-matted cutout? Framelane does not rotoscope for you. Two routes:

Green screen. Put the raw clip at z_index: 20 and key it in the render:

{
  "effects": [
    {
      "type": "chroma_key",
      "chroma_settings": {
        "key_color": "#00B140",
        "threshold": 0.18,
        "smoothness": 0.12,
        "spill_suppress": 0.6
      }
    }
  ]
}

threshold widens the key, smoothness softens the edge, spill_suppress pulls green off hair. See Effects Examples.

Track matte. If you already have a separate alpha or luma pass, matte clips one layer to another without a second encode:

{ "matte": { "source": "speaker_alpha", "mode": "alpha", "invert": false } }

The layer named in source is hidden automatically — it only supplies the shape. Available on video, image, and shape.

Get Started

Renders

Render Examples

Recipes

Tasks

Webhooks

SDKs

Text Behind the Speaker

How the z-depth sandwich works

Karaoke captions on top

Tips

​How the z-depth sandwich works

​Karaoke captions on top

​Tips

How the z-depth sandwich works

Karaoke captions on top

Tips