Code Accordion · remocn

A code window that springs a range of lines closed and replaces them with a "N lines collapsed" placeholder

Installation

$ pnpm dlx shadcn@latest add @remocn/code-accordion

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { CodeAccordion } from "@/components/remocn/code-accordion";

const CodeAccordionScene = () => (
  <CodeAccordion
    lines={fileContents.split("\n")}
    collapseRange={[3, 14]}
    collapseAt={30}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="CodeAccordion"
    component={CodeAccordionScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`lines`	`string[]`	—	Lines of code to render. Pre-split into an array.
`collapseRange`	`[number, number]`	`[3, 14]`	Inclusive 0-based start and end line indices that will collapse
`collapseAt`	`number`	`30`	Frame at which the collapse spring fires
`title`	`string`	`"process-orders.ts"`	Filename shown in the chrome bar
`fontSize`	`number`	`16`	Code font size in pixels
`width`	`number`	`720`	Window width in pixels
`background`	`string`	`"#050505"`	Page background color
`cardColor`	`string`	`"#0a0a0a"`	Editor surface color
`textColor`	`string`	`"#e4e4e7"`	Code color
`mutedColor`	`string`	`"#52525b"`	Line numbers and placeholder bar color
`speed`	`number`	`1`	Playback speed multiplier
`className`	`string`	—	Optional className passed to the root container