Free template · Charts

Cortisol Gauge

A five-band health gauge with a needle that sweeps from one reading to another, overshoots, and settles. Configure labels, values, timing, colors, and optional numeric readout.

Design

Aspect ratio

How to use it

Put this in your video

Any reading that moves between low, normal and high: stress, risk, a score. Paste this into Claude Code, Codex, or any coding agent.

Prompt

Use the OverlayMotion video templates from https://github.com/ricardo/overlay-motion Add the Cortisol Gauge template titled "CORTISOL LEVEL" sweeping from 90 down to 10, centered, with the needle overshooting before it settles.

Have ready: The title, the start and end values, and the band labels.
Works over any clip, and still renders with no clip at all.
Defaults to the center of the frame for about 6 seconds. Ask for another spot, a start time, or a longer hold.
A correction is one sentence: “Show the number while the needle moves.”

Read the full quick start

Technical reference: props, spec knobs and JSON

Template props

Inputs

Everything inside the overlay's props. Omit one and its default applies.

titletextDefault "CORTISOL LEVEL"

Heading above the gauge

lowLabeltextDefault "LOW"

Label over the low range

normalLabeltextDefault "NORMAL"

Label over the middle range

highLabeltextDefault "HIGH"

Label over the high range

startValuenumberDefault 90

Needle value before the sweep, from 0 to 100

endValuenumberDefault 10

Needle value after the sweep, from 0 to 100

delaySecondsnumberDefault 0.7

Hold before the needle starts moving

sweepSecondsnumberDefault 2.2

Duration of the main needle sweep

settleSecondsnumberDefault 1.1

Duration of the elastic settling motion after the sweep

overshootnumberDefault 4

Strength of the elastic landing, in value points

elasticBouncesnumberDefault 2

Number of pointer oscillations while it settles

showValuetrue / falseDefault false

Show the animated numeric value inside the gauge

valueSuffixtextDefault ""

Text appended to the optional numeric value, such as %

lowColortextDefault "#00CD34"

First range color

lowMidColortextDefault "#9ACB34"

Second range color

normalColortextDefault "#FFCC33"

Middle range color

highMidColortextDefault "#FF6600"

Fourth range color

highColortextDefault "#FE0002"

Final range color

backgroundColortextOptional

Gauge background; omit to use the theme surface color

textColortextOptional

Title and label color; omit to use the theme text color

needleColortextOptional

Needle and hub color; omit to use the theme text color

Spec knobs

What 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.

region: Where 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 around center, which is what it uses when the spec says nothing.
fullscreentop-bannerlower-thirdupper-thirdcaption-zoneleft-panelright-panelcentercorner-tlcorner-trcorner-blcorner-br
scale: Uniform size inside the resolved region, 0.25 to 2. Props that size the artwork stay relative to the region box, so scale is how an overlay grows past it.
time: When it lives: start, duration, or the appear + hold pair (entrance length plus how long the finished overlay stays). Seconds (3s), percentages (66%) and negative seconds from the end (-2s) are all valid.
motion: Object motion, applied to the element itself so nothing is cropped or zoomed. Unset here, so add { "style": "shake" } (or wobble, float, sway-3d) with amount (0..1) and its own time window, or one of the skew-* sweeps for a single slow turn into a perspective keystone. Pass an array to stack several.
shakewobblefloatsway-3dskew-rightskew-leftskew-upskew-downnone
enter: Renderer-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 none when you drive it from here.
slide-leftslide-rightspringmask
exit: How it leaves: blur-out melts it away, fade-down drifts down, shrink scales to center (0.9s each), vanish pops it out of existence in 0.45s. Set one and the template's own fade steps aside.
blur-outfade-downshrinkvanish
camera: Moves the region's VIEWPORT rather than the element: push-in, pull-out, the pan-* family, handheld. Its own transform layer, so it stacks with motion, enter, exit and scale.
sound: Per-overlay override of the spec's sound block: enabled, volume, and a sounds map that remaps one cue by name ({ "pop": "ding" }, a path to your own file, or false to mute just that cue). The map is keyed by CUE, so remapping pop also changes an exit: "vanish", which fires pop too. To change only this template's own sound, use its sfx prop 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

JSON spec

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": 6,
  "source": {
    "type": "none"
  },
  "sound": {
    "enabled": true,
    "volume": 1,
    "sounds": {}
  },
  "overlays": [
    {
      "template": "cortisol-gauge",
      "region": "center",
      "time": {},
      "motion": {
        "style": "sway-3d",
        "amount": 0.3,
        "frequency": 0.16,
        "seed": 29,
        "rampSec": 0.7,
        "rampOutSec": 0.7
      },
      "props": {
        "title": "CORTISOL LEVEL",
        "lowLabel": "LOW",
        "normalLabel": "NORMAL",
        "highLabel": "HIGH",
        "startValue": 90,
        "endValue": 10,
        "delaySeconds": 0.6,
        "sweepSeconds": 1.7,
        "settleSeconds": 1.1,
        "overshoot": 4,
        "elasticBounces": 2,
        "showValue": false
      }
    }
  ]
}