MOTIONSTASH
All components

Terminal Window

Product & UI

A terminal runs a command: it types in, then the log streams line by line with a cycling spinner and an accent success line

Download preview768×432 preview render. The full-resolution file comes from running the component
8 seconds
Format

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.

terminalclishelltypingspinnerproductdeveloper tooling
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.

  • Command
    command · string

    The command that types in after the prompt glyph. Keep it to one line, 30–45 characters reads best at 16:9; longer shrinks the type for every line in the window.

    now: npx remotion render hero out/hero.mp4

  • Output
    output · array

    The log, in order. One to nine lines; the window reserves all of their space from frame 0, so it never reflows as they land. Mix tones for hierarchy, spinners for the two or three real steps, dim for detail, one 'ok' at the end.

    now: 6 items

  • Title
    title · string

    Mono title centred in the window chrome. A path and a shell name is the convention. Empty string for bare chrome.

    now: ~/motionstash — zsh

  • Prompt
    prompt · string

    Prompt glyph in the gutter of the command line and of the prompt left behind at the end. '$', '%' and '›' all work.

    now: $

  • Eyebrow
    eyebrow · string

    Small uppercase mono label above the window, preceded by an accent dash. Empty string for none.

    now: Motionstash

  • Caption
    caption · string

    Dim mono note under the window, aligned to its right edge, fading in only once the prompt returns. Empty string for none.

    now: Deterministic render — the same frames on every machine

  • Caret blink
    caretBlink · number

    Frames in one full caret blink. 20 is ~1.5 blinks a second at 30fps. The caret holds solid while keys are landing and only blinks when the shell is waiting.

    now: 20

  • Seed
    seed · string

    Seeds the per-keystroke jitter that keeps the typing off the metronome. Change it for a differently-fumbled take of identical duration; the same seed always renders identical frames.

    now: terminal-01

  • Brand
    brand · string

    Brand token id, one of the keys of BRANDS.

    now: slate

For developers · source, dependencies and provenance

Dependencies

remotion@remotion/shapeszod

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

Source

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

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

A terminal window running a command. Window chrome with traffic lights and a mono title, a prompt glyph, then the command types itself in and the output streams out line by line, a spinner cycling while a step runs, dim detail lines, one accent-coloured success line at the end, and the prompt coming back with a blinking caret. Tight line heights, generous window padding, true monospace throughout, and each output line should fade up and rise a few pixels as it lands.