Migrate from Remotion
Every Remotion package a video can import, what works in Kinetograph, what doesn't, and the steps to move a project.
Most Remotion projects run on Kinetograph as they are.
Your remotion and @remotion/* imports are mapped onto Kinetograph's own versions of those packages. You don't edit them.
Three things need work:
- The tooling around the video.
- A few packages that have no equivalent.
- Anything the engine can't draw yet.
An agent can do this for you. See Use with agents for the kinetograph-migrate skill.
How much of Remotion is covered
Kinetograph exports 310 of the 318 names in remotion and the 24 @remotion/* packages it maps. Another 90 names belong to nine tooling packages that are left out on purpose.
Read the number with care:
- It counts runtime names (functions, components, constants) in Remotion 4.0.540. Types are not counted.
- A name that exists can still have gaps. What works lists them.
- It is not "99% of your project works". Run
doctorto see what yours uses. - Names that Kinetograph adds are not counted.
remotionalone has 105, such asLayerandScene3D.
Package by package
Status: Works means every export exists and you use the package as usual. Partly means some calls throw or draw less. Not planned means Kinetograph has something else.
Packages that work
| Package | Status | Exports present | Notes |
|---|---|---|---|
remotion | Works | 57 of 60 | Internals and FolderContext are internal to Remotion. createEffectImplementation is missing. |
@remotion/transitions | Works | 11 of 11 | All 19 presentations. |
@remotion/motion-blur | Works | 2 of 3 | HtmlInCanvasMotionBlur is missing. |
@remotion/noise | Works | 3 of 3 | |
@remotion/paths | Works | 21 of 22 | PathInternals is internal. |
@remotion/shapes | Works | 22 of 22 | |
@remotion/layout-utils | Works | 4 of 4 | |
@remotion/animation-utils | Works | 23 of 23 | |
@remotion/captions | Works | 4 of 5 | CaptionsInternals is internal. |
@remotion/google-fonts | Works | 0 of 1 | Each @remotion/google-fonts/<Family> import works. getAvailableFonts is missing. |
@remotion/fonts | Works | 1 of 1 | |
@remotion/lottie | Works | 2 of 2 | |
@remotion/gif | Works | 3 of 3 | |
@remotion/media-utils | Works | 12 of 12 | visualizeAudio follows the documented behaviour, but its numbers are not identical. |
@remotion/media | Works | 5 of 6 | Provides <Audio> and <Video>. AudioForPreview is internal. |
@remotion/light-leaks | Works | 4 of 4 | |
@remotion/starburst | Works | 4 of 4 | |
@remotion/sfx | Works | 32 of 32 | The first render downloads each sound. After that it is offline. |
@remotion/zod-types | Works | 4 of 4 | Props are not checked against the schema. |
@remotion/timeline-utils | Works | 33 of 33 | extractFrames throws UnsupportedApiError. |
@remotion/canvas | Works | 24 of 24 | This is Remotion Studio's editor canvas. It bundles, but every call throws UnsupportedApiError. The count is from 4.0.532, because 4.0.536 is not on npm. |
@remotion/rive | Yes | 1 of 1 | getRenderer() is null. CDN assets are not fetched. |
Packages that work in part
| Package | Status | Exports present | Notes |
|---|---|---|---|
@remotion/media-parser | Partly | 13 of 13 | Local files only. There is no box tree and there are no sample callbacks. See What works. |
@remotion/webcodecs | Partly | 24 of 24 | Encode and decode throw UnsupportedApiError. convertMedia writes sound to WAV. |
@remotion/skia | Partly | 1 of 1 | Needs the @kinetographdev/skia add-on. Some Skia features are not drawn. It also covers @shopify/react-native-skia. |
Packages that Kinetograph replaces
| Package | Status | Exports present | Use instead |
|---|---|---|---|
@remotion/three | Not planned | not counted | The own 3D layer, Scene3D. The steps are in the skill. |
@remotion/player | Not planned | 0 of 3 | The studio, with kinetograph studio. There is no embeddable player. |
@remotion/renderer | Not planned | 0 of 22 | kinetograph render, still and compositions. |
@remotion/bundler | Not planned | 0 of 4 | Nothing to do. render bundles for you. |
@remotion/cli | Not planned | 0 of 2 | The kinetograph CLI. |
@remotion/lambda | Not planned | 0 of 25 | There is no cloud renderer. Run kinetograph render on a machine with a GPU. |
@remotion/cloudrun | Not planned | 0 of 14 | Same as Lambda. |
@remotion/studio | Not planned | 0 of 18 | kinetograph studio. |
@remotion/tailwind, @remotion/tailwind-v4 | Not planned | 0 of 1 each | They only configure webpack. Tailwind itself works. |
IFrame (from remotion) | Not planned | exported | It needs a browser. It is reported as unsupported and left out. |
Any other @remotion/* import stops the build with "..." is not supported by Kinetograph yet.
Counts come from loading the built modules in Node and from each Remotion package's published export list.
Migrate by hand
Follow these steps in order.
- Find the entry. It is the file that calls
registerRoot, oftensrc/index.ts. Check that it loads withcompositions. If an import is not supported, the command stops and names it. Fix that first. - Run doctor. It goes through every frame without the GPU. It lists each element and property the engine can't draw, and the frames they happen on.
- Fix each finding. The common cases are below.
- Lint and look.
lintchecks the project.stripdraws twelve frames into one picture. Open it. - Render with
--strict. It stops on the first frame with something unsupported, so nothing is silently missing. - Write down what changed. Note anything you left out or approximated. The video can differ from the Remotion one.
The commands for steps 1, 2, 4 and 5 are below. They differ only in the entry. A Remotion project points at its entry file and picks a composition with --comp. A HyperFrames page points at its index.html or the directory that holds it. Your project keeps its own layout. Only the files the commands write go in out/.
npx kinetograph compositions src/index.ts
npx kinetograph doctor src/index.ts
npx kinetograph lint src/index.ts
npx kinetograph strip src/index.ts -n 12
npx kinetograph render src/index.ts --comp <id> --strictFixing findings
- Tooling imports (
player,renderer,bundler,lambda): remove them and use the CLI.remotion renderbecomeskinetograph render <entry> --comp <id>.remotion studiobecomeskinetograph studio <entry>.
@remotion/three: rebuild the scene withScene3D,Camera3D, lights,MeshandModel. Rotations are in degrees. See Authoring, section 6.6.IFrame: rebuild the page as components, or use a screenshot.- A CSS property or element in the report: change it to one the engine draws, or remove it.
Nothing in this path starts a browser. If something can't be ported, leave it out or approximate it. See What works for how warnings work.
The agent skill
The kinetograph-migrate skill follows these steps for an agent.
It has reference files for 3D, tooling and unsupported content. It loads them only when a finding needs one.
See Use with agents.