MOTIONSTASH
All components

Chapter Progress Rail

YouTube

A chapter rail welded to the bottom edge — the active segment filling behind a hard cursor, its name on a block that retires into the rail when the chapter ends

Download preview768×432 preview render — the full-resolution file comes from running the component
8 seconds
Format
Chapter Progress Rail — A chapter rail welded to the bottom edge — the active segment filling behind a hard cursor, its name on a block that retires into the rail when the chapter ends

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.

chaptersprogressretentionrailoverlayalphalong formyoutubebottom edgecondensed
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.

  • Chapters *
    chapters · array

    The video's chapters, in order — the same list you put in the description. Five or six is what a rail this wide reads well; past about nine the bars stop being separable.

    now: 6 items

  • At *
    at · number

    Where the playhead starts, in minutes into the video. Set it a little before the chapter change you want the overlay to show, so the handoff happens on screen.

    now: 10

  • Advance
    advance · number

    How many minutes of the video the rail travels across during the eight seconds. Compressed on purpose: at real time the cursor would move four pixels and there would be nothing to see, the same licence a counter takes when it counts up to a figure faster than the figure ever arrived. Set it to 0 to hold one fixed position.

    now: 12

  • Edge
    edge · "bottom" | "top"

    Which edge the rail is bonded to. Bottom is the default and clears the player's own scrubber; top mirrors the whole assembly and hangs the chapter block under the rail, for cuts whose lower third is already spoken for.

    now: bottom

  • Inset
    inset · number

    Distance from that edge as a fraction of the frame height. The default sits above YouTube's controls without floating away from the edge it is measuring.

    now: 0.075

  • Remaining
    remaining · boolean

    Show the minutes-left block at the far end of the rail. This is the retention half of the device — the fill says how far you have come, this says how much is left — so leave it on unless the corner is taken.

    now: true

  • Ground
    ground · boolean

    Paint the frame behind it. Off by default — this is an overlay, so it renders on an alpha channel and drops straight onto your own footage. On, it gets a brand ground so it can stand up on its own.

    now: true

  • Scale
    scale · number

    Size of the rail and its type. The margin from the frame edge does not scale with it — that belongs to the frame, not to the object.

    now: 1

  • Brand
    brand · string

    Brand token id — one of the keys of BRANDS. The display face travels with the palette, and 'circuit' is the condensed one these labels were fitted to.

    now: circuit

For developers — source, dependencies and provenance

Dependencies

remotion@remotion/shapeszod

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

Source

Filesrc/registry/items/chapter-progress-rail.tsx
Frame1920×1080
Duration240f · 8s @ 30fps

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

My videos are half an hour long and people leave at the eight-minute mark. I want the chapter bar you see on some big channels: a thin rail along the bottom of the whole video, split into my chapters by how long each one is, the one I'm in raised slightly and filling up behind a little marker, its number and name on a block sitting on top of that segment, and how many minutes are left at the far right. When a chapter ends the name should drop back into the rail and the next one come up out of it over its own segment. It has to render on an alpha channel so I can lay it over the footage in Premiere, it has to stay readable when I cut from a drone shot of a bright sky to a dark room, and it has to be calm — it's on screen for the whole video, not for a beat.