Plugins

A plugin is an npm package that adds components or effects to a project. It also tells Studio and coding agents how to use them. Studio shows its props as form fields, and an agent reads its skill.

Use a pluginCopy Anchor Link

Add the package to the dependencies of your project's package.json, then import from it.

import { Hexed } from '@kinetographdev/hexed';

<Hexed seed={42}><Video src={staticFile('video/clip.mp4')} /></Hexed>

Kinetograph finds a project's plugins in the dependencies and devDependencies of the nearest package.json above the entry. npx kinetograph plugins lists them with the path of each plugin's SKILL.md. Add --json for a machine-readable list. Over MCP, use the plugins tool.

Plugins are React components, so they belong in Remotion-shaped projects. Nothing in the plugins below is written for HyperFrames pages.

Kinetograph pluginsCopy Anchor Link

None of these is published yet.

• Hexed: rolls a look onto a picture or clip from a number.
• Kinetic typography: captions that move with the voice.
• Paper: match cuts, cut-outs and hand-drawn lines on paper.
• VJ: screen and sensor looks, tracking marks and pop art.

The library adapters for GSAP, Motion, anime.js and p5.brush are published. To make your own, see Writing a plugin.

PresetsCopy Anchor Link

A preset is a named set of props for one composition. In the Props tab of Studio, the Presets menu loads a saved preset, and Save preset saves the props you are previewing under a name.

A preset is a JSON file at presets/<composition id>/<name>.json, next to the project's entry file. You can commit it or edit it by hand. A name uses lower-case letters, digits, - and _, starts with a letter or digit, and has at most 64 characters.

--props takes the path of a JSON file as well as a JSON object. A value that starts with { is read as JSON. Any other value is a file path.

npx kinetograph still src/index.tsx --comp Hero --props presets/Hero/warm.json

Studio's agentCopy Anchor Link

The coding agent in Studio's chat panel gets a Kinetograph MCP server. It has every kinetograph tool, your plugins' tools, and four tools for the open window:

• studio_get_props returns { comp, props }, what the preview shows now.
• studio_set_props takes { comp?, props, merge? }. It merges the props over the current ones, or replaces them with merge: false. The preview and the Props tab update.
• studio_open_panel takes { panel, data, message?, placement? } and opens a brief, script, storyboard, styleframes, review or custom panel to ask the person for a decision. The answer arrives later as a message starting [panel <kind> <id> submitted]. It is also saved in plan/<kind>.json.
• studio_panel_result takes { id } and returns { status, answer? }. It is for an agent in a terminal that the person told.

An agent in Studio should try values with studio_set_props, then write the values it picks into the code or a preset.

To run the same server outside Studio:

KINETOGRAPH_STUDIO_TOKEN=<token> npx kinetograph mcp --studio http://127.0.0.1:3000