Skip to main content

​
Overview

Green screen compositing gives you full control over how and where a LemonSlice avatar appears in your application. Rather than a fixed rectangular video frame, the character can be placed over a dynamic landscape, layered into a product UI, floated transparently over slides or web content, or composited against a generative background that reacts to the conversation. LemonSlice generates the avatar against a solid lime-green background, and your browser removes the green in real time using a chroma key shader. WebGL makes it straightforward to replace the green background in real time, right in the browser — a fragment shader runs the per-pixel keying math on the GPU, fast enough to keep up with the incoming video frame rate. Running the keying step client-side gives you full control over the scene — backgrounds can be swapped or animated at any point, independent of the avatar session.

​
Why chroma key?

Use caseWhat you get
Landscape layoutsDrop a vertical LemonSlice stream into a 16:9 or other horizontal container
Floating avatarKey to transparency and overlay the character directly on your site, product UI, or slides
Engaging backgroundsAdd background animations with a looping MP4, CSS animation, canvas, or WebGL
Live scene changesSwap or animate the background mid-call without recreating the session

​
How it works

Start by giving LemonSlice a reference image with a solid lime-green background. LemonSlice animates the avatar against that green and streams the result as a standard WebRTC video track. On the frontend, you draw each incoming frame through a chroma-key pass. Any pixel close to the key color is made transparent. You can then layer that canvas over whatever background you want.
The key color you configure in your frontend shader must match the actual background color in your reference image. Sample the exact hex value from the image rather than assuming a standard green — the specific shade matters for clean edges.
A WebGL fragment shader is the right tool for the keying step. Running per-pixel math on the GPU keeps the loop fast enough to match the incoming video frame rate without blocking the main thread.
Green screen compositing pipeline: reference image → LemonSlice stream → chroma key → composited scene
Overview of the green screen compositing process.

​
End-to-end example: landscape video streams

Vertical aspect ratios generally produce the best results for humanoid avatars — they keep the frame tight on the character and avoid wasting pixels on dead space. But many UIs need to be landscape. Using a green screen allows you to get the best of both: stream a high-quality vertical avatar, then composite it into a 16:9 (or wider) container on the frontend. Our Green Screen + Landscape example repo is a complete Next.js + LiveKit example of this pattern. It includes:
  • A Python LiveKit Agents worker that requests a 2x3 green-screen avatar stream
  • A WebGL chroma-key renderer with tunable similarity, smoothness, spill-removal, and edge feathering parameters
  • A looping landscape background MP4 behind the keyed avatar
When adapting to your own application, you should configure the keyer to match your reference image: 
export const CHROMA_KEY_HEX = "#50A954"; // sample this from your reference image

export const CHROMA_KEY_OPTIONS = {
  keyColor: hexToKeyColor(CHROMA_KEY_HEX),
  similarity: 0.22,   // how close a pixel must be to the key color to be removed
  smoothness: 0.06,   // width of the transition between opaque and transparent
  spillMin: 0.025,    // green-excess (g - max(r,b)) at which spill removal starts
  spillMax: 0.085,    // green-excess at which the pixel is fully keyed out
  edgeFeatherPx: 1,   // post-key alpha blur at the silhouette edge (0 = off)
};
similarity and the spill values are the parameters most likely to need tuning — greens vary enough across reference images that defaults rarely transfer perfectly. See createChromaKeyRenderer.ts for the full WebGL shader and renderer implementation.