terminal-inserts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Terminal Inserts

终端插入画面

Use with
remotion-best-practices
,
motion-graphics
, and
cinematic-camera
for Claude Code, Codex, MCP, agents, skills, repository workflows, automation demos, and authentic CLI inserts.
与
remotion-best-practices
、
motion-graphics
和
cinematic-camera
配合使用,适用于 Claude Code、Codex、MCP、Agent、skill、仓库工作流、自动化演示和真实的 CLI 插入画面。

Mandatory intake

强制需求采集

Follow the
motion-graphics
intake gate before coding. If not already specified, ask:
Which format do you want: 4:3 half-screen Instagram insert or 9:16 full-screen Instagram? And which background: warm light, clean dark, light grid, or dark grid?
The terminal window may remain charcoal on any chosen surface. A terminal object does not force the entire scene to be dark.
编码前遵循
motion-graphics
的需求采集关卡。如果尚未指定,则询问:
你需要哪种格式:4:3 半屏 Instagram 插入画面,还是 9:16 全屏 Instagram?背景要哪一种:暖色浅色背景、干净深色背景、浅色网格背景,还是深色网格背景?
无论选择哪种背景,终端窗口都可以保持炭灰色。终端对象并不意味着整个场景都必须采用深色。

Absolute visual ban

绝对视觉禁用项

  • Zero neon, fluorescent green, electric cyan, electric purple, or multicolor AI palettes.
  • Zero glow, bloom, luminous edges, colored shadow, radial color wash, halo, aura, or light spill.
  • No glassmorphism, shiny gradients, cyberpunk atmosphere, scanline spectacle, or “hacker movie” styling.
  • No cyan-purple gradients or green glow around text, cursors, panels, or ASCII words.
  • Use flat ink/charcoal surfaces, neutral borders, neutral shadows, and at most one restrained flat product or ANSI accent.
If any glow or neon appears in a still, reject the render and remove it before delivery.
  • 完全禁止霓虹色、荧光绿、电光青、电光紫或多色 AI 配色。
  • 完全禁止辉光、泛光、发光边缘、彩色阴影、径向色彩晕染、光环、氛围光或光溢散。
  • 禁止玻璃拟态、闪亮渐变、赛博朋克氛围、扫描线奇观或“黑客电影”风格。
  • 文本、光标、面板或 ASCII 单词周围不得使用青紫渐变或绿色辉光。
  • 使用扁平墨色或炭灰表面、中性边框、中性阴影,并且最多使用一种克制的扁平产品强调色或 ANSI 强调色。
如果任何静帧中出现辉光或霓虹效果,则拒绝该渲染,并在交付前将其移除。

Goal and references

目标与参考

Make the idea obvious in under two seconds using an authentic terminal metaphor—not a random code screenshot, checklist UI, dashboard, or generic AI animation.
Inspect the actual approved examples before coding:
  • assets/examples/terminal-install.mp4
    — command → large terminal word → authentic CLI lines → success state.
  • assets/examples/outreach-sequence-generator.mp4
    — command → status → structured generated output.
  • Repository example
    examples/kickbacks-spinner-terminals.mp4
    — multiple CLI sessions in one connected world.
Use contact sheets in
references/
when available. Continue their typography, density, spacing, and motion, while enforcing the zero-glow rule above.
使用真实的终端隐喻,在两秒内让创意一目了然,而不是使用随机代码截图、清单 UI、仪表盘或通用 AI 动画。
编码前检查实际获批的示例:
  • assets/examples/terminal-install.mp4
    — 命令 → 大号终端字样 → 真实 CLI 行 → 成功状态。
  • assets/examples/outreach-sequence-generator.mp4
    — 命令 → 状态 → 结构化生成输出。
  • 仓库示例
    examples/kickbacks-spinner-terminals.mp4
    — 在一个相互关联的场景中呈现多个 CLI 会话。
如果
references/
中提供了联系表,请使用。延续其字体排印、信息密度、间距和动效,同时严格遵守上述零辉光规则。

Surface and terminal specs

画面与终端规格

  • Match the selected destination exactly.
  • 4:3 insert: 1440×1080, 30fps unless the user specifies otherwise.
  • 9:16 full-screen: 1080×1920, 30fps unless specified otherwise.
  • Terminal:
    #101214
    /
    #15181B
    , charcoal title bar, 1px neutral border, neutral black shadow.
  • Scene surface comes from the user’s selected warm light, clean dark, light grid, or dark grid option.
  • Typography: monospace only inside the terminal. Prefer SF Mono, JetBrains Mono, IBM Plex Mono, or Berkeley Mono fallback.
  • Text: warm white and muted gray.
  • Accent: one restrained flat product color or subdued terminal green such as
    #4F8F6D
    ; no fluorescent
    #39FF88
    .
  • macOS traffic-light dots are allowed as small authentic chrome, not as a decorative palette.
  • 必须与所选目标规格完全一致。
  • 4:3 插入画面:1440×1080,除非用户另有说明,否则为 30fps。
  • 9:16 全屏:1080×1920,除非另有说明,否则为 30fps。
  • 终端:
    #101214
    /
    #15181B
    ,炭灰标题栏,1px 中性边框,中性黑色阴影。
  • 场景背景采用用户选择的暖色浅色、干净深色、浅色网格或深色网格选项。
  • 字体排印:仅在终端内部使用等宽字体。优先使用 SF Mono、JetBrains Mono 或 IBM Plex Mono,也可回退到 Berkeley Mono。
  • 文本:暖白色和低饱和灰色。
  • 强调色:一种克制的扁平产品色,或类似
    #4F8F6D
    的柔和终端绿;不得使用荧光色
    #39FF88
    。
  • macOS 红黄绿控制点可以作为小尺寸的真实系统细节使用,但不得作为装饰性配色。

Critical authenticity rules

关键真实性规则

For install/log scenes, use terminal symbols and flowing CLI text—not UI checklist cards:
txt
~ $ codex skills load carousel-qa

        QA CHECK LOADED

        ( + Welcome to Carousel QA )
┌ installing carousel-qa...
◇ skill added: brand-rules ✓
◇ skill added: slide-fit-checker ✓
◇ skill added: remotion-frame-guard ✓
◇ skill added: export-reviewer

✓ carousel QA skill ready
Required:
  • Prompt starts with
    ~ $ 
    or a project path plus
    $
    .
  • Command types character-by-character.
  • ┌
    may open a section.
  • ◇
    prefixes install/progress rows.
  • Completed rows use a trailing
    ✓
    .
  • Use plain flowing terminal text, not rounded checklist components.
  • Use a blinking
    ▊
    or pipe cursor at the active line.
  • A large ASCII/terminal word may fade and scale in using flat text color only—never glow.
Avoid:
  • Checkbox UI or separate oversized check icons.
  • Emoji and sans-serif UI lists inside the terminal.
  • Pills, status chips, dividers, dashboards, or nested card rows for terminal logs.
  • Random fake code dumps.
  • Dense illegible logs used as decorative texture.
对于安装或日志场景,使用终端符号和连贯的 CLI 文本,不要使用 UI 清单卡片:
txt
~ $ codex skills load carousel-qa

        QA CHECK LOADED

        ( + Welcome to Carousel QA )
┌ installing carousel-qa...
◇ skill added: brand-rules ✓
◇ skill added: slide-fit-checker ✓
◇ skill added: remotion-frame-guard ✓
◇ skill added: export-reviewer

✓ carousel QA skill ready
要求:
  • 命令提示符以
    ~ $ 
    或项目路径加
    $
    开头。
  • 命令逐字符输入。
  • ┌
    可用于开启一个区块。
  • ◇
    用作安装或进度行的前缀。
  • 已完成的行末尾使用
    ✓
    。
  • 使用朴素、连贯的终端文本,而不是圆角清单组件。
  • 在活动行使用闪烁的
    ▊
    或管道光标。
  • 大号 ASCII 或终端字样可以仅使用扁平文字颜色淡入并缩放出现,绝不能发光。
避免:
  • 复选框 UI 或单独的超大勾选图标。
  • 终端内的 Emoji 和无衬线 UI 列表。
  • 用于终端日志的胶囊、状态标签、分隔线、仪表盘或嵌套卡片行。
  • 随机伪造的代码转储。
  • 作为装饰纹理使用的密集难辨日志。

Perspective and motion

透视与动效

  • Build the terminal in the same connected camera world as supporting objects.
  • Enter with controlled perspective such as
    perspective(...) rotateX(18deg–22deg)
    and a slight directional
    rotateY
    .
  • Keep it readable and mostly front-facing; the tilt must feel physical, not warped.
  • Use subtle scale/fade and a restrained settle.
  • End with a clean 20–30 frame hold.
  • Drive motion with
    useCurrentFrame()
    ,
    spring()
    , and
    interpolate()
    ; no CSS animation.
  • Type commands at roughly one frame per character where practical.
  • Stagger CLI rows by 6–12 frames and reveal trailing checks after each line.
  • Do not add glow pulses, color pulses, scanline flashes, or decorative light sweeps.
  • 将终端置于与配套对象相同的连贯相机场景中。
  • 进入时采用克制的透视效果,例如
    perspective(...) rotateX(18deg–22deg)
    ,并加入轻微的方向性
    rotateY
    。
  • 保持可读性且大部分时间接近正面朝向;倾斜应有物理感,不能变形失真。
  • 使用轻微的缩放或淡入淡出和克制的落定效果。
  • 以干净的 20–30 帧停留结束。
  • 使用
    useCurrentFrame()
    、
    spring()
    和
    interpolate()
    驱动动效;不要使用 CSS animation。
  • 在可行的情况下,命令大致每帧输入一个字符。
  • CLI 各行错开 6–12 帧显示,并在每行之后显现末尾的勾选标记。
  • 不要添加辉光脉冲、颜色脉冲、扫描线闪光或装饰性光线扫过。

Reusable patterns

可复用模式

Authentic skill install

真实的 skill 安装

  1. Terminal enters with controlled perspective.
  2. A real-looking command types in.
  3. A large flat ASCII/terminal word appears:
    LOADED
    ,
    VERIFY
    , or
    DEPLOY
    .
  4. CLI rows reveal using
    ◇ ... ✓
    .
  5. One concise success line finishes the action.
  1. 终端以克制的透视效果进入。
  2. 逐字符输入一条看起来真实的命令。
  3. 出现一个大号扁平 ASCII 或终端字样:
    LOADED
    、
    VERIFY
    或
    DEPLOY
    。
  4. 使用
    ◇ ... ✓
    逐步显示 CLI 行。
  5. 用一行简洁的成功信息结束操作。

Command → generated output

命令 → 生成输出

  1. Command types in.
  2. A restrained flat status line appears.
  3. Two or three output objects reveal.
  4. Output objects may use cards only because generated structured output is the point; use neutral materials and one restrained accent.
  1. 输入命令。
  2. 出现一行克制的扁平状态文本。
  3. 显示两到三个输出对象。
  4. 仅当生成结构化输出本身是重点时,输出对象才可使用卡片;采用中性材质和一种克制的强调色。

Agent run / verification log

Agent 运行或验证日志

  1. Type a plausible command such as
    codex run "fix checkout bug"
    .
  2. Reveal realistic actions: reading, reproducing, editing, testing.
  3. End with
    ✓ diff ready for review
    or another truthful state.
Never invent product capabilities or claim tests passed unless the supplied story requires that exact illustrative state.
  1. 输入一条合理的命令,例如
    codex run "fix checkout bug"
    。
  2. 显示逼真的操作:读取、复现、编辑、测试。
  3. 以
    ✓ diff ready for review
    或其他如实状态结束。
绝不要虚构产品能力;除非所提供的故事明确要求该示意状态,否则不得声称测试已通过。

Mobile clarity

移动端清晰度

  • One primary idea per insert.
  • The main command, terminal word, or success state must remain readable at phone size.
  • 4:3 inserts must be legible when occupying roughly half of a 9:16 frame.
  • Tiny logs cannot carry the main message.
  • Use no redundant narration text; real commands, filenames, UI strings, and verified output belong on screen.
  • 每段插入画面只表达一个主要创意。
  • 主命令、终端字样或成功状态在手机尺寸下必须保持可读。
  • 4:3 插入画面置于 9:16 画面约一半位置时必须清晰易读。
  • 不得让微小日志承载主要信息。
  • 不要添加冗余旁白文本;应将真实命令、文件名、UI 字符串和经验证的输出呈现在画面中。

First-pass rejection gate

首轮拒收检查

Do not deliver until every answer is “no”:
  1. Was format or background left unconfirmed?
  2. Is there any neon, glow, radial color wash, fluorescent green, or cyan-purple treatment?
  3. Does the terminal look like a checklist, dashboard, glass card, or generic AI template?
  4. Is the scene dark only because a terminal exists rather than because the user chose dark?
  5. Is essential text unreadable at the destination size?
  6. Are CLI structure, product identity, or output claims fake when authentic material exists?
  7. Does the result miss the approved examples’ spacing, restraint, and motion quality?
Revise privately until the gate passes.
在以下所有问题的答案均为“否”之前,不要交付:
  1. 格式或背景是否仍未确认?
  2. 是否出现任何霓虹、辉光、径向色彩晕染、荧光绿或青紫处理?
  3. 终端是否看起来像清单、仪表盘、玻璃卡片或通用 AI 模板?
  4. 场景是否仅仅因为存在终端而采用深色,而并非用户选择了深色?
  5. 关键文字在目标尺寸下是否难以阅读?
  6. 在存在真实可用素材的情况下,CLI 结构、产品标识或输出结果是否仍是编造的?
  7. 结果是否未达到获批示例的间距、克制程度和动效质量?
自行修改,直到通过此关卡。

QA and delivery

QA 与交付

  1. Typecheck/build or render the smallest meaningful validation.
  2. Render stills for command entry, primary output, and end hold.
  3. Compare against the approved terminal examples.
  4. Inspect the MP4 for clipping, weak perspective, tiny text, generic filler, any glow/neon, and weak end frames.
  5. Deliver the MP4 with dimensions, duration, exact render command, and editor placement note.
  1. 执行 typecheck/build,或渲染规模最小但仍有意义的验证内容。
  2. 为命令输入、主要输出和结束停留画面渲染静帧。
  3. 与获批的终端示例进行比较。
  4. 检查 MP4 是否存在裁切、透视不足、文字过小、泛泛的填充内容、任何辉光或霓虹,以及结束帧表现薄弱等问题。
  5. 交付 MP4,并附上尺寸、时长、精确渲染命令和剪辑软件中的放置说明。