Green screen

Green screen, also called chroma key, makes part of a video transparent by color: the editor removes every pixel that matches a chosen key color, usually a pure green, so the layer underneath shows through. The technique comes from film and TV, where people are filmed in front of a green backdrop. For motion graphics it means rendering an overlay on solid green so that any editor can key it out.

Chroma key versus a real alpha channel

An alpha channel stores the transparency of every pixel inside the file. A chroma key rebuilds transparency from color afterwards, in the editor.

Use the transparent file wherever the editor supports it. Use the green-screen MP4 in CapCut and phone editors, which often ignore transparency in imported video.

Designing for a clean key

• Flat green, edge to edge. No gradient, vignette or texture in the background.
• No green in the artwork. Colors close to the key green disappear with it, so draw them darker in the green-screen version.
• No soft shadows or glows. They blend into the green and leave a fringe.
• Light effects are different. Light leaks and flares key badly; a version on black with a Screen blend mode works better.

Keying in a phone editor

Add the green MP4 as an overlay above your clip, open the background removal or chroma key tool, pick the green with the color picker and raise the strength until the green is gone. The right value is the lowest one that removes all of it.

In Motion Cheat Code

Each of the 60 overlays comes as a transparent WebM, a green-screen MP4 and its HyperFrames source. To render one again, for example in another color, run these inside its source folder; the bg variable switches the background to green:

npx hyperframes render --format webm -o renders/overlay.webm
npx hyperframes render --format mov -o renders/overlay.mov
npx hyperframes render --variables '{"bg":"#00FF00"}' -o renders/overlay-green.mp4