kinetograph.

Known issues

What doesn't work yet in Kinetograph, and what you see instead.

Each item says what doesn't work and what you see instead. For what does work, see Remotion compatibility. Items marked "reported" show up in the warnings and in doctor.

Not planned

  • IFrame. Not drawn, because a real webpage needs a browser. It is reported as unsupported content.
  • Not exported. Internals, FolderContext, PathInternals and AudioForPreview are internal to Remotion.
  • Replaced by Kinetograph's own tools. @remotion/three and @remotion/player are replaced by the engine's own 3D layer and studio. renderer, bundler, cli and lambda are replaced by the Kinetograph CLI.
  • Tailwind packages. tailwind and tailwind-v4 are webpack configuration only, so they do nothing here. Tailwind itself works.

Partly working

Effects and HtmlInCanvas

  • 2d and webgl2 effects (createEffect) run, and so do the onPaint and onInit props.
  • webgpu effects, and an onInit or onPaint that asks for canvas.getContext('webgpu'), are drawn without the effect and reported.
  • State an effect keeps from setup does not carry to the next frame. Each frame runs setup, apply and cleanup again.
  • getImageData of the source is not supported.
  • In an async onPaint or onInit, the part after the first await does not run.
  • An <HtmlInCanvas> inside another is not supported.

Video and audio encoding and decoding in your own code

@remotion/webcodecs is Remotion's wrapper around the browser's WebCodecs API, which encodes and decodes video and audio frames. Its encode and decode functions, and the box tree and sample callbacks of @remotion/media-parser, throw UnsupportedApiError. They need a video decoder and encoder in the addon, which is not built. Normal <Video> and <Audio> are not affected.

Canvas 2D

  • A pattern of a canvas, used for a stroke or for text, is drawn transparent.
  • Pattern fills work, up to 10,000 tiles.
  • isPointInStroke ignores caps, joins and dashes.
  • url() filters are reported and not drawn.
  • Shadow and filter images are capped at 50 million pixels per canvas layer per frame. A frame past that is an error.

WebGL

A framebuffer texture starts every frame blank. A frame that only draws into framebuffers still clears the canvas, where a browser would keep the last picture. Each item below needs new GPU work.

  • Not supported: renderbuffers; depth and stencil attachments; COLOR_ATTACHMENT1 and up; a texture level above 0 as a target; targets that are not RGBA or that hold uploaded pixels; generateMipmap and texSubImage2D on a texture drawn into; points and lines; instancing; cube, 3D and float textures; and multisampled edges.
  • readPixels is refused by design.
  • blitFramebuffer is reported as unsupported.

WGSL shader()

It sees only its own layer, runs one pass, has no other texture, and takes f32 uniforms only.

3D (scene3d)

  • Not supported: occlusion and emissive texture maps, bevels and GPU skinning.
  • The CPU deforms morphs and skins once per pose.
  • At most 4 lights cast shadows, and 8 shadow maps are drawn in all. A point light takes 6 of them.

CSS

  • background-repeat: space with thousands of gradient tiles still errors. The other repeats are drawn as one tile repeated by feTile.
  • Backdrop blur and glow are capped at 128 px. The blur effect takes up to 512.

@remotion/skia and @shopify/react-native-skia

  • Atlas, Patch, Glyphs, TextBlob, Picture and ImageSVG are drawn. Text inside an SVG is not.
  • Not supported: Reanimated values, FitBox, Skia.Surface and Skia.Offscreen, the Skia.Image, Skia.Data and Skia.Typeface factories, useVideo, animated images, paragraph measurement, and shaders or filters set on a Skia.Paint() object.
  • Drawing is on the CPU only.
  • PNGs of drawn frames are kept under ~/.cache/kinetograph/skia, the newest 400 to 600 of them.
  • More in AUTHORING.md, section 7.7.

@remotion/rive

  • Not supported: onLoad, assetLoader, effects and the ref getters.
  • A state machine starts with its inputs at their defaults, and you can't set them.
  • Only pictures embedded in the file are supported.
  • More in AUTHORING.md, section 7.6.

Can look different

  • preserve-3d with planes that cross. Groups with transform-style: preserve-3d under perspective are drawn back to front, with no depth buffer. Planes that cross each other are drawn wrong.
  • Inline-block with a stacking context is drawn twice. A display: inline-block element that also has a transform, or any other property that makes it a stacking context or positions it, comes out as two identical layers. Its antialiased edges look slightly heavier, and it costs two draws. To reproduce it: a div with the text "ab", and a span with display: inline-block; transform: scale(0.5). The end card of the launch film (frames 1386 to 1520) has this case.
  • @paper-design/shaders is untested. The engine has the methods this library needs, but the library itself has not been run through it. Its WebGL2 calls, such as getShaderPrecisionFormat, are untested.
  • A rare difference with --concurrency 2. In one render out of several, --concurrency 2 produced a different video from the same project. Other runs at 2 workers matched, and runs at 1, 3, 4 and 6 workers matched. The cause is not known. It may be a rare race, or a fault in that one run. Renders are meant to be identical at any concurrency, so a difference is a bug.

On this page