Live Code Compilation
A split-screen where code is typed on the left and the right-side UI snaps to match in a single frame
Installation
$ pnpm dlx shadcn@latest add @remocn/live-code-compilationUsage
// src/Root.tsx
import { Composition } from "remotion";
import { LiveCodeCompilation } from "@/components/remocn/live-code-compilation";
const LiveCodeCompilationScene = () => (
<LiveCodeCompilation accentColor="#3b82f6" />
);
export const RemotionRoot = () => (
<Composition
id="LiveCodeCompilation"
component={LiveCodeCompilationScene}
durationInFrames={260}
fps={30}
width={1280}
height={720}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
accentColor | string | "#3b82f6" | Color used for the JSX prop highlight, the HMR flash, and the default button background |
speed | number | 1 | Time multiplier applied as frame × speed. The typing schedule is a fixed set of frame constants, so this shifts the whole sequence rather than remapping it cleanly — leave it at 1 unless you are matching an external beat |
className | string | — | Optional className for the outer container |