OpenCode · remocn

Installation

$ pnpm dlx shadcn@latest add @remocn/opencode

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:

// 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:

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.