MOTIONSTASH
All components

Shorts Handle Bug

YouTube

A persistent channel bug under the top chrome of a vertical frame — a drawn monogram and an @handle that announce once, recede to a resting weight and breathe there for the rest of the clip

Download preview432×768 preview render — the full-resolution file comes from running the component
8 seconds
Format
Shorts Handle Bug — A persistent channel bug under the top chrome of a vertical frame — a drawn monogram and an @handle that announce once, recede to a resting weight and breathe there for the rest of the clip

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.

channel bughandleverticalshortsreelsoverlaywatermarksafe areamonogrampersistent
What you can change — 8 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.

  • Handle
    handle · string

    The @handle, and the only line that has to survive being watched at phone size. Keep the @ — it is what makes the line read as a channel rather than a caption. Around fourteen characters is the comfortable maximum; past about twenty the plate starts crowding the action rail.

    now: @quartershift

  • Note
    note · string

    Second line under the handle — what the channel is, or when it posts. Sentence case, deliberately: this is texture at phone size rather than something anyone reads, and it exists to give a two-line object a hierarchy. Omit it for a single-line bug, which is what a sponsor lockup wants.

    now: Startup finance, every Tuesday

  • Mark
    mark · "aperture" | "initial"

    The drawn monogram. 'aperture' is the geometric mark this component ships — a stroked square with a sweep through it, drawn on frame by frame. 'initial' puts a single letterform in the same square instead, for a channel whose logo really is its letter.

    now: aperture

  • Initial
    initial · string

    The letter drawn when mark is 'initial'. One character; two will fit but crowd the square. Ignored by the 'aperture' mark.

    now: Q

  • Top zone
    topZone · number

    Percent of the frame height reserved at the TOP for platform chrome — the back arrow, the format wordmark, the camera and overflow icons. The bug hangs below this line. 7 clears Shorts and Reels; TikTok's header sits a little lower, so 9 is safer there. Set 0 for a website cut or a paid placement with no interface over it.

    now: 7

  • Rest
    rest · number

    Percent opacity the bug settles to about a second and a half after it lands, and holds for the rest of the clip. 100 never recedes, which is what a sponsor bug does; 82-88 is what a channel bug does — still present, no longer competing with the footage. Below about 70 it stops being legible over a bright shot.

    now: 86

  • Backdrop
    backdrop · "footage" | "none"

    'footage' puts a defocused stand-in shot underneath, with a blowout that crosses the corner mid-clip, so you can see whether the bug survives the footage changing exposure under it. 'none' leaves the brand ground bare, which is what you export when you are burning this over your own video.

    now: footage

  • Brand
    brand · string

    Brand token id — one of the keys of BRANDS. The accent is the sweep through the monogram and nothing else, so this is the one colour the channel gets. Light palettes flip the plate to a white tile with an ink hairline.

    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/shorts-handle-bug.tsx
Frame1080×1920
Duration240f · 8s @ 30fps

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

I want the little channel bug that sits in the corner of a Short for the whole video — a small logo mark and my @handle on a soft plate, top left. It has to hang below the bit of interface at the top of the frame, not sit flush to the edge. It should assemble itself once at the start, be at full strength long enough that someone who just scrolled onto the video can read the handle, and then drop back to about 85% and stay there breathing very slightly so it never looks frozen. Draw the logo, do not use an image. Most importantly it has to still be readable at phone size over my own footage, so show it over something defocused that gets bright underneath it partway through — if it survives that it survives anything.