# OpenCode
URL: https://remocn.dev/docs/ai/opencode

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

- Install: `npx shadcn@latest add @remocn/opencode`
- Vibe: tech
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/opencode
```

> **Note**
>
> Installing `opencode` pulls the `caret` primitive and the `remocn-ui` core lib (which provides the shared `useTypewriter` hook) via `registryDependencies`, plus the `JetBrains Mono` font via `@remotion/google-fonts` automatically. No additional install needed.

## 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>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Animation speed multiplier (minimum 1 so the query finishes typing) |

## 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.

## Use when
- Depicting the OpenCode TUI as a recognizable branded surface in a dev-tool demo.
- A coding-agent query should type itself into the authentic welcome screen with model/provider context.
- The scene wants a terminal-UI card rather than a raw shell.

## Don't use when
- You're depicting a different product — use the matching card (`claude-code`, `v0`, `chat-gpt`, `claude-chat`).
- You need a generic, unbranded terminal — use `terminal-simulator`.
- You only need a typed line with a cursor and no app chrome — use `typewriter`.