Recording Frame
A live camera overlay: animated safe-frame corners, pulsing REC light, running timecode and scan. Optional grayscale backdrop and gray edge frame.
Put this in your video
Make a clip look like it was captured seconds ago: safe frame, REC light, timecode. Paste this into Claude Code, Codex, or any coding agent.
Use the OverlayMotion video templates from https://github.com/ricardo/overlay-motion Put the Recording Frame template over the first 7 seconds of my video, with the REC label, the grayscale backdrop and the gray edge frame.
- Have ready: Nothing but the footage. Change the REC label only if you want another word.
- Hand it your clip: “the newest video in my Downloads folder” is enough.
- Defaults to the full frame for about 7 seconds. Ask for another spot, a start time, or a longer hold.
- A correction is one sentence: “Keep the color, drop the grayscale.”
Technical reference: props, spec knobs and JSON
Inputs
Everything inside the overlay's props. Omit one and its default applies.
labeltextDefault "REC"grayscaletrue / falseDefault falsegrayFrametrue / falseDefault falseWhat the spec changes without touching props
These live on the overlay, not in this template. They are renderer-provided, so they behave the same here as on every other template.
regionWhere it sits. One of the 12 named boxes, or your own
{ "x": 62, "y": 12, "w": 34, "h": 42 }in percent of the frame. This template is designed aroundfullscreen, which is what it uses when the spec says nothing.fullscreentop-bannerlower-thirdupper-thirdcaption-zoneleft-panelright-panelcentercorner-tlcorner-trcorner-blcorner-brscaleUniform size inside the resolved region,
0.25to2. Props that size the artwork stay relative to the region box, soscaleis how an overlay grows past it.timeWhen it lives:
start,duration, or theappear+holdpair (entrance length plus how long the finished overlay stays). Seconds (3s), percentages (66%) and negative seconds from the end (-2s) are all valid.motionObject motion, applied to the element itself so nothing is cropped or zoomed. Unset here, so add
{ "style": "shake" }(orwobble,float,sway-3d) withamount(0..1) and its owntimewindow, or one of theskew-*sweeps for a single slow turn into a perspective keystone. Pass an array to stack several.shakewobblefloatsway-3dskew-rightskew-leftskew-upskew-downnoneenterRenderer-owned entrance, 0.6s, identical on every template. It stacks with whatever entrance the template already runs, so set the template's own entrance prop to
nonewhen you drive it from here.slide-leftslide-rightspringmaskexitHow it leaves:
blur-outmelts it away,fade-downdrifts down,shrinkscales to center (0.9s each),vanishpops it out of existence in 0.45s. Set one and the template's own fade steps aside.blur-outfade-downshrinkvanishcameraMoves the region's VIEWPORT rather than the element:
push-in,pull-out, thepan-*family,handheld. Its own transform layer, so it stacks withmotion,enter,exitandscale.soundPer-overlay override of the spec's sound block:
enabled,volume, and asoundsmap that remaps one cue by name ({ "pop": "ding" }, a path to your own file, orfalseto mute just that cue). The map is keyed by CUE, so remappingpopalso changes anexit: "vanish", which firespoptoo. To change only this template's own sound, use itssfxprop instead. Core palette:click,pop,whoosh,ding,typewriter.All 45 premade cues
popbubbletickdingwhooshkeyboard-typing-naturalmouse-click-pressmouse-click-releasetypewriter-scissor-metallic-lowtypewriter-scissor-metallic-basstypewriter-scissor-metallic-subtypewriter-scissor-metallictypewriter-scissor-lowtypewriter-scissor-deeptypewriter-laptoptypewriter-chiclettypewriter-scissortypewritertypewriter-softtypewriter-mechanicaltypewriter-digitaltypewriter-heavytypewriter-thocktypewriter-steeltypewriter-slamtypewriter-buttontypewriter-switchtypewriter-keycapclickclick-crispclick-roundclick-glasstogglesuccesserrornotificationsparkleswoopriserimpactglitchshutterswipedropdisplay
Copy and customize
This exact spec drives the preview. Replace media paths and props with your own.
{
"theme": "<your-brand-tokens>",
"version": 1,
"format": "square",
"fps": 60,
"durationSec": 7,
"source": {
"type": "video",
"src": "your-footage.mp4"
},
"sound": {
"enabled": true,
"volume": 1,
"sounds": {}
},
"overlays": [
{
"template": "recording-frame",
"region": "fullscreen",
"time": {},
"props": {
"label": "REC",
"grayscale": true,
"grayFrame": true
}
}
]
}