Code Accordion · remocn

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

A code primitive for fixing camera attention. The window starts fully open, then a single spring drives the height of a wrapped range from lineCount * lineHeight down to one line, fading the original code out and the placeholder in. Because both inner content and the bar share the same spring, the bottom of the window snaps up with the same micro-bounce — the accordion feels like it has weight.

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.

Notes

One spring, many properties

A single spring() with damping: 10 drives the inner height, original-code opacity, placeholder opacity, and the window's effective height all from one value. Animating from a single source is what makes the bounce feel coherent.