First video

This page makes a two-second title card. Install Kinetograph first: see Installation.

You can write the video as a Remotion-style TSX project or as an HTML page in the HyperFrames style. The steps are the same. Pick a tab where the two differ.

Write the project

Make an empty folder and run init in it, then install:

npx kinetograph init
npm install

init writes a starter title card. The scene is in src/scenes/Title.tsx:

import { AbsoluteFill, Rect, Text, interpolate, useCurrentFrame } from '@kinetographdev/core';
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont('normal', { weights: ['400'] });

export const Title = () => {
  const frame = useCurrentFrame();
  const width = interpolate(frame, [0, 30], [0, 640], { extrapolateRight: 'clamp' });
  return (
    <AbsoluteFill style={{ backgroundColor: '#14171f' }}>
      <Text x={320} y={200} font={fontFamily} size={96} color="#ffffff">
        Hello, Kinetograph
      </Text>
      <Rect x={320} y={340} width={width} height={12} radius={6} fill="#f6c177" />
    </AbsoluteFill>
  );
};

src/index.tsx registers it:

import { Composition, registerRoot } from '@kinetographdev/core';
import { Title } from './scenes/Title';

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

Import the API from @kinetographdev/core, not from kinetograph. The kinetograph package is the CLI, so importing registerRoot from it fails. You do not need Remotion. An @remotion/* import, such as the font loader above, maps onto Kinetograph's own code.

A composition is one video: Composition sets its id, length in frames, frame rate and size. useCurrentFrame gives the frame being drawn, and the picture depends only on that number. Here the bar grows from 0 to 640 over 30 frames, then holds. The first render downloads Inter into ~/.cache/kinetograph/fonts.

Keep this layout as the project grows:

src/       TSX code: index.tsx, scenes/, components/, lib/
html/      HTML pages, for an HTML project
public/    files for staticFile(): images/, fonts/, audio/, video/
out/       everything Kinetograph writes: renders/, stills/, sheets/

Look at the frames

npx kinetograph compositions src/index.tsx
npx kinetograph still src/index.tsx 15
npx kinetograph strip src/index.tsx -n 12

compositions lists each composition's id, size, frame rate and length.
still writes one frame as a PNG to out/stills/.
strip writes 12 evenly spaced frames on one sheet to out/sheets/, labelled with the frame and the time.

Check the project

npx kinetograph inspect src/index.tsx --frame 30
npx kinetograph lint src/index.tsx
npx kinetograph check src/index.tsx

inspect prints each layer at a frame, with its bounds.
lint reports overflowing text, layers off the canvas, overlapping text and missing fonts. It exits with 1 on errors.
check finds type errors, such as a misspelled prop. Rendering does not type-check.

These commands take an HTML page as they take a TSX entry.

Open it in Studio

npx kinetograph studio src/index.tsx

Studio plays the project in a browser, with a timeline, a props form and a chat with your coding agent. Press Space to play and Cmd+K (Ctrl+K elsewhere) for every action. Stop it with Ctrl-C.

Render the video

npx kinetograph render src/index.tsx --draft
npx kinetograph render src/index.tsx

--draft renders at half size, for a quick look. Without it the video is 1280 by 720. The video goes to out/renders/Main.mp4; pass -o to choose another path. The output is H.264 by default, in a .mp4 or .mov file. render prints the frame count, the encoder and the time it took. Add --json to get one JSON object instead.

Next steps

Authoring: the elements, effects and Remotion APIs a project can use.
Scene format: the JSON scenes the engine draws.
Audio: sound files, synthesised sound and loudness checks.
CLI reference: every command and option.
Use with agents: the agent skill and the MCP server.

Write the projectCopy Anchor Link

Look at the framesCopy Anchor Link

Check the projectCopy Anchor Link

Open it in StudioCopy Anchor Link

Render the videoCopy Anchor Link