RemotionUI

OpenCode

OpenCode TUI composer scene for Remotion.

SceneScenes

opencode30fps · 960×540
Install
$ npx remotion-ui@latest add opencode

Animated OpenCode TUI with wordmark, accent input bar, and agent status row.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import
@/remotion/scenes/opencode
  • Use when: full-frame scenes, overlays, cards, and reusable video sections.
  • Customize: placeholder, query, agentName, modelName, plus copied source for timing, layout, colors, and typography.
  • Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example
import { Opencode } from "@/remotion/scenes/opencode"; <Opencode query='"What is the tech stack of this project?"' />

API Reference

PropTypeDescription
placeholderstringMuted prefix before the typed query.
querystringQuery typed after the placeholder.
agentNamestringActive agent label.
modelNamestringModel name in the status row.
providerstringModel provider label.
accentColorstringLeft accent bar and agent color.
theme"light" | "dark"Light or dark TUI palette.

Related