kinetograph.
Terminology

Root

The component you pass to registerRoot, which lists the compositions of a project.

The root is a component that returns your compositions. You hand it to registerRoot in the entry point.

registerRoot(() => (
  <>
    <Composition id="Intro" component={Intro} durationInFrames={90} fps={30} width={1280} height={720} />
    <Composition id="Outro" component={Outro} durationInFrames={60} fps={30} width={1280} height={720} />
  </>
));

Kinetograph renders the root once to find the compositions. Nothing is drawn. Because the root is ordinary code, it can compute its list.

Folder groups compositions, and Still declares a one-frame composition. Two compositions with the same id are an error.

Coming from Remotion: the same registerRoot and root component. Coming from HyperFrames: no equivalent. A page holds its composition directly.

See also

Project layout

The folders of a new project, made by kinetograph init, and where generated files go.

Props

Input values you give a composition, from defaults, a zod schema or the --props option.

On this page

See also