Static-plus-insert compositing

The shot reads as motion video, but only the screen content actually moves. One AI still, one perspective-warped insert, and 95% of the cost of a full motion render gets cut without the audience knowing.

The problem this solves

You want a shot of someone using your app: looking at a phone or tablet, tapping a screen, scrolling a heatmap. The screen needs to show real product UI — not AI-imagined fake UI that breaks the audience's trust the second they look closely.

Three options:

  1. Film it for real. Camera, lighting, hands, screen recording. Best quality. Slow and expensive to repeat per prospect or variant.
  2. Generate with Wan / Veo / Runway. AI motion gen. Costs 50-100x more compute than a still, and the UI on the screen will be hallucinated fake UI.
  3. Static plus insert. One AI still of the scene, your real product screen recording warped onto the device in perspective. The hand, table, lighting, and surround are static. The screen moves.

The trick: viewers don't look at the hand. They look at the screen. If the screen moves and the hand stays still, the brain fills in the rest.

How it works

  1. Generate the still. Use Flux with a prompt that puts the device at an interesting angle — phone on a wooden table, tablet held off-axis, monitor seen from the side. Leave the screen face blank or filled with a placeholder so there's nothing to fight with later.
  2. Identify the four corners of the screen surface in the still. Top-left, top-right, bottom-right, bottom-left. Eyeball them, write them down as x/y in your composition frame (1080×1920 for vertical 9:16).
  3. Wrap your insert in PerspectiveOverlay. The Hybrig component takes the 4 corners + child content and computes a CSS matrix3d transform that maps the child onto the quadrilateral. The child renders into a flat rectangle; the transform projects it onto the device screen in correct perspective.
  4. The child can be anything React renders. A real video element looping your screen recording. A programmatically-built iMessage card. A live <canvas> chart. A list of property scores rendered as React components. Anything.

Worked example: the boss-text beat

In Roof Radar's "Stop Knocking Blind" ad, Beat 9 shows the contractor receiving an iMessage from a prospective customer: "Just locked 21117 on RoofRadar."

The still is a Flux render of a tablet on a wooden table, tilted upper-right away from camera. The four corners of the tablet screen are roughly:

const tabletScreenCorners = {
  tl: { x: 390, y: 670 },   // top-left
  tr: { x: 750, y: 500 },   // top-right (higher = farther)
  br: { x: 900, y: 1170 },  // bottom-right
  bl: { x: 180, y: 1370 }   // bottom-left (lower = closer)
};

The IMessageBubble component (header + bubble + delivered indicator, all programmatic) renders into a flat 500×900 rectangle. The PerspectiveOverlay wraps it and maps that rectangle onto the tablet's screen corners. The audience sees what looks like a real iMessage on a real tablet on a real table — at a fraction of what a Wan motion render of the same shot would have cost.

When it works and when it doesn't

Works for:

  • Phones, tablets, monitors, laptops — anything with a flat screen surface that doesn't rotate during the shot
  • Static handheld pose (no jitter, no wobble)
  • Moderate viewing angles (under 45° off-axis)
  • Indoor lighting where the screen self-illuminates naturally

Breaks down for:

  • The hand or device moves during the shot — perspective fails
  • Heavy specular reflections on the screen surface — your insert covers them and the audience notices
  • Extreme angles past about 60° — the projected pixels get stretched too thin to read
  • Curved or non-rectangular screens (you can still do it but the math gets harder)

Why this is the Hybrig advantage

Cloud-only AI video tools (Sora, Runway, Veo) won't do this. Their architecture wants you to describe the whole scene in a prompt and pay for the full motion render every time. You can't easily say "render the static scene then composite my screen recording on top."

Hybrig was built around chains. The composition layer is yours. You own the perspective math, the corner coords, the insert source. A 90-second ad with three screen-insert beats renders in the same time as a 90-second ad with zero, because the screen content is composited at render time, not generated.

See also: clean-plate compositing (one still + N text overlays for N variants) and cohort render pipeline (how the per-prospect ad assembly works end-to-end).