claude-remotion-kickstart: Command for Claude Code

task

Create a new Remotion video composition named "$1".

steps

1. Validate the name:

   • Convert to lowercase for folder name (e.g., "My Video" → "my-video")
   • Use PascalCase for component names (e.g., "my-video" → "MyVideo")

2. Create the folder structure:

   src/compositions/{folder-name}/
   ├── Composition.tsx
   ├── config.ts
   ├── content.ts
   └── segments/
       ├── TitleSegment.tsx
       └── ContentSegment.tsx
   

3. Generate files using these templates:

config.ts

// Segment durations in seconds
export const TITLE_DURATION_SECONDS = 3;
export const CONTENT_DURATION_SECONDS = 5;

content.ts

export const CONTENT = {
  title: "{Composition Name}",
  contentHeader: "Your Header",
  contentBody: "Your content goes here.",
};

segments/TitleSegment.tsx

import { TitleSlide } from "../../../components/TitleSlide";
import { CONTENT } from "../content";

export const TitleSegment: React.FC = () => {
  return <TitleSlide title={CONTENT.title} />;
};

segments/ContentSegment.tsx

import { ContentSlide } from "../../../components/ContentSlide";
import { CONTENT } from "../content";

export const ContentSegment: React.FC = () => {
  return (
    <ContentSlide header={CONTENT.contentHeader} content={CONTENT.contentBody} />
  );
};

Composition.tsx

import { Series, useVideoConfig } from "remotion";
import { TitleSegment } from "./segments/TitleSegment";
import { ContentSegment } from "./segments/ContentSegment";
import { getDurationInFrames } from "../../config";
import { TITLE_DURATION_SECONDS, CONTENT_DURATION_SECONDS } from "./config";
import { createComposition } from "../../utils/createComposition";

const {ComponentName}Composition: React.FC = () => {
  const { fps } = useVideoConfig();
  const titleDuration = getDurationInFrames(TITLE_DURATION_SECONDS, fps);
  const contentDuration = getDurationInFrames(CONTENT_DURATION_SECONDS, fps);

  return (
    <Series>
      <Series.Sequence durationInFrames={titleDuration}>
        <TitleSegment />
      </Series.Sequence>
      <Series.Sequence durationInFrames={contentDuration}>
        <ContentSegment />
      </Series.Sequence>
    </Series>
  );
};

const TOTAL_DURATION_SECONDS = TITLE_DURATION_SECONDS + CONTENT_DURATION_SECONDS;

export const {ComponentName} = createComposition({
  name: "{ComponentName}",
  component: {ComponentName}Composition,
  durationInSeconds: TOTAL_DURATION_SECONDS,
  preset: "Landscape-1080p",
});