MOTIONSTASH
All components

Live Badge

YouTube

A corner live bug whose viewer count jumps in irregular polls rather than counting smoothly upward

Download preview768×432 preview render — the full-resolution file comes from running the component
8 seconds
Format
Live Badge — A corner live bug whose viewer count jumps in irregular polls rather than counting smoothly upward

This is the format it was composed for. Switch above to see it lay itself out for another — same animation, re-arranged for the frame.

livestreamviewersbadgebugoverlayalphacounterbroadcast
What you can change — 9 settings

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

  • Label
    label · string

    The word on the solid block. Keep it to one short word — LIVE, ON AIR, EN VIVO. It is set in caps whatever you type.

    now: LIVE

  • Viewers
    viewers · number

    The count at the first frame. Everything after it is derived, so this is the only number you set — pick the one you actually go live to.

    now: 1284

  • Rate
    rate · number

    Roughly how many people arrive per second, on average. The individual jumps stay irregular around it: raise this to fill the room faster, not to make it climb more smoothly.

    now: 6

  • Seed
    seed · number

    Which pattern of jumps you get. Any whole number; the same number always renders the same sequence of polls, so once a take looks right it stays right.

    now: 5

  • Anchor
    anchor · "top-left" | "top-right" | "bottom-left" | "bottom-right"

    Which corner the bug sits in. Top-left by default — where a broadcast tally has always gone, and the corner the player's own controls and the presenter both tend to leave alone.

    now: top-left

  • Inset
    inset · number

    Distance from both frame edges, as a fraction of the shorter side. The default sits inside the title-safe margin and clears the rounded corner a phone player crops.

    now: 0.055

  • Scale
    scale · number

    Size of the bug. Push it up for a vertical cut or for footage that will be watched on a phone — a bug sized for a television is small on a 6-inch screen.

    now: 1

  • Ground
    ground · boolean

    Paint a stand-in shot behind it. Off by default — this is an overlay, so it renders on an alpha channel and drops straight onto your own footage. On, you get a deliberately half-blown, half-dark backdrop to check the bug stays readable over both.

    now: true

  • Brand
    brand · string

    Brand token id — one of the keys of BRANDS.

    now: ledger

For developers — source, dependencies and provenance

Dependencies

remotion@remotion/shapeszod

No Tailwind, no CSS, no asset files. Inline styles only.

Source

Filesrc/registry/items/live-badge.tsx
Frame1920×1080
Duration240f · 8s @ 30fps

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

A small live indicator for the top-left corner of my stream — a pulsing dot, the word LIVE on a solid block, and the number of people watching next to it. The important bit is that the number must not count up smoothly, because that looks fake. Make it jump the way a real one does: nothing for a second, then +20, then +3, then it drops by two, then a big jump. It sits over my own footage so no background unless I ask for one, and it has to stay readable whether the shot behind it is a bright window or a dark room.