Showcase Tech Terminal

Showcase: Tech Terminal

Specialist skill for the Tech Terminal showcase. Activated by the remotion-pro orchestrator when the user selects showcase 2 (terminal, cli, tech, código, code). Receives a context object with video_profile, brand_voice, remotion, and briefing.

Overview

The Tech Terminal showcase produces developer-centric videos featuring a realistic terminal emulator window. Commands appear with typewriter animation, outputs render line-by-line, and progress bars animate for install or build sequences. After the core terminal sequence, the 2–3 most impressive results are featured in glassmorphic highlight cards.

Best for: CLI tools, developer libraries, DevOps products, open-source projects, API demos, build pipelines, npm packages, Homebrew formulae.

Composition ID: TechTerminal Aspect ratio: 16:9 (1920×1080) FPS: 30 Duration range: 15–45 seconds (450–1350 frames)

Components Used

The TerminalEmulator accepts a commands: TerminalCommand[] array. Each TerminalCommand has:

typescriptCopy code
{
  text: string;
  type: "input" | "output" | "spinner" | "success" | "error" | "blank";
  color?: string;
  delay?: number;    // frames to wait before this line appears
  typeSpeed?: number; // chars per frame for "input" type
}

Scene Flow Template

Default sequence for a medium-pacing, 4-command demo:

Copy code
Scene 1 — Hook           (0s–2.5s,   frames 0–74)
  AnimatedText: product/tool name fades in
  Subtext: one-line pitch, animation: fade-in delay 12

Scene 2 — Terminal Opens  (2.5s–4s,  frames 75–119)
  TerminalEmulator window fades up (slide-up animation)
  Blinking cursor appears at prompt
  Title bar shows: "[tool-name] — zsh — 80×24"

Scene 3 — Commands Type  (4s–[dynamic]s, frames 120–[calculated])
  All TerminalCommand[] lines render sequentially
  input lines: typewriter at typeSpeed chars/frame
  output lines: appear immediately after input finishes
  spinner lines: animate for spinner_duration frames then resolve
  success lines: appear in green
  error lines: appear in red
  blank lines: add breathing room between command groups

Scene 4 — Output Highlight (after terminal, 4s)
  Terminal blurs slightly (opacity 0.4)
  2–3 GlassmorphismCard overlays slide in with key results
  Each card: metric label + value, animation: slide-up

Scene 5 — CTA            (3.5s, last frames)
  Cards fade out
  AnimatedText: CTA headline (install command or URL)
  Accent-colored pill with package name / URL

Pacing multipliers:

• fast: typeSpeed × 1.5 (types faster), shorter delays
• medium: typeSpeed = 2 chars/frame (default)
• slow: typeSpeed × 0.7, longer pauses between commands

Storyboard Generation Rules

Step 1 — Parse the briefing

Copy code
tool_name     → explicit name in briefing OR brand-voice.yaml → brand.name
description   → one-line pitch from briefing OR brand-voice.yaml → brand.tagline
commands      → explicit command list in briefing (ordered, code blocks preferred)
vague_trigger → briefing is vague ("show GrowthOS", "demo my CLI") → use default command set
highlights    → pick 2–3 output lines with numbers, percentages, or success indicators
cta_text      → explicit in briefing OR brand-voice.yaml → cta.default
               OR auto-generate: "npm install [tool_name]"

Step 2 — Build TerminalCommand list

If briefing provides explicit commands:

Parse code blocks and command-output pairs from the briefing. For each item:

Copy code
1. If line starts with $ or > → type: "input"
2. If line contains [===] or (N%) → type: "spinner" + embed ProgressBar
3. If line starts with ✓ or ✅ or "Success" → type: "success"
4. If line starts with ✗ or ✘ or "Error" / "Failed" → type: "error"
5. Empty line → type: "blank"
6. Everything else → type: "output"

If briefing is vague (no explicit commands):

Use this default impressive command set tailored to the tool_name:

typescriptCopy code
const defaultCommands: TerminalCommand[] = [
  { type: "input",   text: `$ [tool_name] --version`,   typeSpeed: 3 },
  { type: "output",  text: `[tool_name] v2.1.0`,         color: "#A3E635" },
  { type: "blank",   text: "" },
  { type: "input",   text: `$ [tool_name] init my-project`, typeSpeed: 2 },
  { type: "spinner", text: `Initializing project...`,    delay: 8 },
  { type: "success", text: `✓ Project created in 0.8s`, color: "#22C55E" },
  { type: "blank",   text: "" },
  { type: "input",   text: `$ [tool_name] build --prod`, typeSpeed: 2 },
  { type: "spinner", text: `Bundling 847 modules...`,    delay: 30 },
  { type: "output",  text: `  dist/main.js  42.3 kB`,   color: "#60A5FA" },
  { type: "output",  text: `  dist/styles.css  8.1 kB`, color: "#60A5FA" },
  { type: "success", text: `✓ Built in 1.2s`,           color: "#22C55E" },
  { type: "blank",   text: "" },
  { type: "input",   text: `$ [tool_name] deploy`,       typeSpeed: 2 },
  { type: "spinner", text: `Deploying to production...`, delay: 45 },
  { type: "success", text: `✓ Live at https://[tool].app`, color: "#22C55E" },
];

Substitute [tool_name] with the actual tool name from the briefing or brand-voice.yaml.

Step 3 — Pick output highlights (2–3 GlassmorphismCards)

Scan the TerminalCommand list for the most impressive moments to feature:

Priority order for highlight selection:

1. Lines with time metrics: "1.2s", "0.8s", "847ms" → "Built in 1.2s"
2. Lines with size metrics: "42.3 kB", "12 MB" → "Bundle: 42.3 kB"
3. Lines with counts: "847 modules", "12 tests passed" → "847 Modules"
4. Lines with URLs or deploy confirmation → "Live at [URL]"
5. Success lines (✓) → first 2–3 success lines

If fewer than 2 candidates: use first and last success lines.

Format each highlight as a GlassmorphismCard:

yamlCopy code
- label: "[short label, 1-3 words]"
  value: "[metric or key phrase]"
  icon: "[relevant emoji]"

Step 4 — Calculate duration

Copy code
hook_duration        = 2.5s (always)
terminal_open        = 1.5s (always)
per_input_line       = ceil(text.length / typeSpeed) / 30 seconds
per_output_line      = 0.3s per line
per_spinner_line     = delay / 30 seconds (min 1s)
per_blank_line       = 0.3s
output_highlight     = 4s (always, covers all cards overlapping)
cta_duration         = 3.5s (always)

terminal_section_s   = sum of per-line durations
total_s              = hook + terminal_open + terminal_section + output_highlight + cta

IF total_s < 15: add additional default commands to pad
IF total_s > 45: trim output lines to first 3 per command, remove blank lines

Step 5 — Output storyboard YAML

yamlCopy code
# storyboard.yaml — Tech Terminal
showcase: TechTerminal
tool: "[tool_name]"
description: "[one-line pitch]"
total_duration_s: [calculated]
pacing: "[fast|medium|slow]"
terminal:
  theme: dark
  prompt: "$ "
  title: "[tool_name] — zsh — 80x24"
  font_size: 14

scenes:
  - id: hook
    type: hook
    duration_s: 2.5
    text: "[tool_name]"
    subtext: "[description]"
    animation: fade-in

  - id: terminal-open
    type: terminal
    duration_s: 1.5
    animation: slide-up

  - id: commands
    type: terminal
    duration_s: [calculated]
    commands:
      - { type: input,   text: "$ [command]", typeSpeed: 2 }
      - { type: output,  text: "[output line]" }
      - { type: spinner, text: "[progress text]", delay: 30 }
      - { type: success, text: "✓ [result]", color: "#22C55E" }
      # ... full command list

  - id: output-highlight
    type: output-highlight
    duration_s: 4
    cards:
      - { label: "[label]", value: "[value]", icon: "[emoji]" }
      - { label: "[label]", value: "[value]", icon: "[emoji]" }

  - id: cta
    type: cta
    duration_s: 3.5
    text: "[cta headline]"
    subtext: "[install command or URL]"
    animation: bounce

Composition Mapping

Convert storyboard to Remotion props for the TechTerminal composition:

Frame calculation

Copy code
scene.duration_s × 30 = scene.durationFrames
startFrame[N] = sum of durationFrames[0..N-1]

Props object structure

typescriptCopy code
// TechTerminalProps (from types.ts)
{
  brand: {
    name: "[tool_name]",
    handle: brand_voice.brand.handle,
    colors: {
      primary:    design_tokens.primary_color,
      secondary:  design_tokens.secondary_color,
      background: "#0D1117",     // dark terminal default
      text:       "#F0F6FC",
      accent:     design_tokens.accent_color,
    },
    watermark_position: "bottom-right",
  },
  terminalTitle: "[tool_name] — zsh — 80x24",
  terminalTheme: "dark",
  showProgressBar: true,
  showWatermark: true,
  scenes: [
    {
      type: "hook",
      startFrame: 0,
      durationFrames: 75,
      text: "[tool_name]",
      subtext: "[description]",
      animation: "fade-in",
    },
    {
      type: "terminal",
      startFrame: 75,
      durationFrames: 45,
      animation: "slide-up",
      commands: [],     // empty — just opens terminal
    },
    {
      type: "terminal",
      startFrame: 120,
      durationFrames: [calculated],
      commands: [
        { text: "$ [command]", type: "input", typeSpeed: 2 },
        { text: "[output]",    type: "output" },
        { text: "[progress]",  type: "spinner", delay: 30 },
        { text: "✓ [result]",  type: "success", color: "#22C55E" },
        // ...
      ],
    },
    {
      type: "output-highlight",
      startFrame: [after terminal],
      durationFrames: 120,
      // GlassmorphismCards defined here
      text: "[top metric label]",
      subtext: "[top metric value]",
      animation: "slide-up",
    },
    {
      type: "cta",
      startFrame: [after highlight],
      durationFrames: 105,
      text: "[cta headline]",
      subtext: "[install command or URL]",
      animation: "bounce",
    },
  ],
}

Terminal theme color mapping

The terminal window border and title bar use brand.colors.primary at 30% opacity.

Config Reading

From video-profile.yaml

From brand-voice.yaml

Briefing overrides (highest priority)

Any explicit value in the user's briefing (tool name, commands, CTA text) takes precedence over both YAML files.

Render Command

After generating the composition props, return to the orchestrator with:

yamlCopy code
composition_id: TechTerminal
props: { ...full TechTerminalProps JSON... }

The orchestrator renders using the discovered Remotion CLI:

bashCopy code
cd "${REMOTION_PROJECT}" && npx remotion render src/index.ts TechTerminal "${OUTPUT_DIR}/video.mp4" \
  --props='{"brand":{...},"scenes":[...],"terminalTitle":"..."}' \
  --fps=30

Briefing Collection UI

When the orchestrator routes here, display this briefing prompt:

Copy code
TECH TERMINAL SHOWCASE
─────────────────────────────────────────────────────────
I'll create a developer terminal video with animated
commands, typewriter output, and highlighted results.

  Tool / project name:
  > [e.g. "GrowthOS CLI" or "my-npm-package"]

  What to demonstrate (paste commands + outputs, or describe):
  > [e.g. "show npm install, then init, then build with output"
    or paste actual terminal session]

  Terminal theme: [dark / dracula / solarized]  (default: dark)
  >

  CTA text (optional):
  > [e.g. "npm install growthOS" or "docs.growthOS.app"]

  Pacing: [fast / medium / slow]  (default: medium)
  >
─────────────────────────────────────────────────────────

If user pastes a raw terminal session (no structure), parse it line-by-line using the Step 2 rules above. Lines starting with $ or > are input; everything else is output.

Error Handling

Output

Return to orchestrator:

yamlCopy code
status: ready
composition_id: TechTerminal
storyboard_path: "[OUTPUT_DIR]/storyboard.md"
props: { ...TechTerminalProps JSON... }
estimated_duration_s: [N]
command_count: [N]
highlight_count: [N]

The orchestrator handles the render call, thumbnail, captions, and output bundle.