OpenCode

Animated OpenCode TUI welcome screen that types a query into the input

Installation

$ pnpm dlx shadcn@latest add @remocn/opencode

Usage

Standalone in a Remotion <Composition> — renders immediately after install:

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { OpenCode } from "@/components/remocn/opencode";
 
const OpenCodeScene = () => (
  <OpenCode
    placeholder="Ask anything... "
    query="What is the tech stack of this project?"
    agentName="Build"
    modelName="Kimi K2.5"
    provider="Moonshot AI"
    accentColor="#2B7FFF"
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="OpenCode"
    component={OpenCodeScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Timeline: wordmark + input box + hints ease in (0–18), default state with the block cursor blinking holds (18–48), the query types into the input from frame 48, then holds to the end.

With Backdrop

Renders transparent and single-theme — supply the background via Backdrop; edit the copied file to re-theme:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { OpenCode } from "@/components/remocn/opencode";
 
<Backdrop fill={{ type: "color", value: "#000000" }}>
  <OpenCode
    query="What is the tech stack of this project?"
    accentColor="#2B7FFF"
  />
</Backdrop>

Props7

Prop	Type	Default
placeholder	string"Ask anything... " Muted prompt prefix before the query
query	string"What is the tech stack of this project?" The text that types in character-by-character
agentName	string"Build" Agent label in the status line shown in the accent color
modelName	string"Kimi K2.5" Model name in the status line
provider	string"Moonshot AI" Provider name in the status line
accentColor	string"#2B7FFF" Blue accent bar and agent label color
speed	number1 Animation speed multiplier (minimum 1 so the query finishes typing)

placeholderstring
Muted prompt prefix before the query
Default"Ask anything... "
querystring
The text that types in character-by-character
Default"What is the tech stack of this project?"
agentNamestring
Agent label in the status line shown in the accent color
Default"Build"
modelNamestring
Model name in the status line
Default"Kimi K2.5"
providerstring
Provider name in the status line
Default"Moonshot AI"
accentColorstring
Blue accent bar and agent label color
Default"#2B7FFF"
speednumber
Animation speed multiplier (minimum 1 so the query finishes typing)
Default1

Notes

Dark by default: Defaults to the dark OpenCode look.
Offline-friendly: No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup.
Shared hook: Reuses the useTypewriter hook and the caret primitive (rendered as a block cursor) shared with the other terminal and chat components.