code-accordion

1import { loadFont } from "@remotion/google-fonts/JetBrainsMono";
2import {
3  interpolate,
4  spring,
5  useCurrentFrame,
6  useVideoConfig,
7} from "remotion";
8import { stageScale } from "@/remotion/lib/ai-composer-utils";
9import {
10  CODE_THEMES,
11  CodeLine,
12  lineLength,
13  MONO_ADVANCE,
14  tokenizeCode,
15} from "@/remotion/lib/code-syntax";
16import { EASING } from "@/remotion/lib/motion-tokens";
17 
18const { fontFamily } = loadFont("normal", {
19  weights: ["400", "500", "700"],
20  subsets: ["latin"],
21});
22 
23/** Reference stage the panel is laid out against, then uniformly scaled. */
24const REF_WIDTH = 1280;
25const REF_HEIGHT = 720;
26 
27const PANEL_WIDTH = 880;
28const HEADER_HEIGHT = 64;
29const CODE_ROW_HEIGHT = 32;
30const CODE_FONT_SIZE = 19;
31const CODE_PADDING = 16;
32const CODE_INSET = 62;
33 
34/** Characters per second each step's code is written at. */
35const WRITE_CPS = 70;
36 
37export type AccordionSection = {
38  /** Step label shown on the collapsed row. */
39  title: string;
40  /** Code revealed while the step is open. */
41  code: string;
42  /** Optional right-aligned hint, e.g. a filename. */
43  meta?: string;
44};
45 
46export type CodeAccordionProps = {
47  /** Steps played in order. */
48  sections?: AccordionSection[];
49  /**
50   * Plays a single step instead of walking the list — it opens and stays open.
51   * Leave it unset to step through every section in order.
52   */
53  activeIndex?: number;
54  /** Label above the steps. */
55  title?: string;
56  /** Seconds an opened step is held before it closes. */
57  holdSeconds?: number;
58  accentColor?: string;
59  /** Overrides the page background behind the panel. */
60  backgroundColor?: string;
61  theme?: "dark" | "light";
62  /** Animation speed multiplier. */
63  speed?: number;
64};
65 
66const DEFAULT_SECTIONS: AccordionSection[] = [
67  {
68    title: "Install the scene",
69    code: "npx remotion-ui add code-accordion",
70    meta: "terminal",
71  },
72  {
73    title: "Import it",
74    code: 'import { CodeAccordion } from "@/remotion/scenes/code-accordion";',
75    meta: "Root.tsx",
76  },
77  {
78    title: "Render the steps",
79    code: "<CodeAccordion sections={sections} />",
80    meta: "Root.tsx",
81  },
82];
83 
84/** Drawn, not typed — a chevron glyph is not guaranteed in the mono face. */
85const Chevron: React.FC<{ size: number; color: string; turn: number }> = ({
86  size,
87  color,
88  turn,
89}) => (
90  <svg
91    width={size}
92    height={size}
93    viewBox="0 0 24 24"
94    fill="none"
95    style={{ transform: `rotate(${turn}deg)` }}
96  >
97    <path
98      d="M8.5 5.5L15.5 12l-7 6.5"
99// … truncated