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,PathInternalsandAudioForPrevieware internal to Remotion. - Replaced by Kinetograph's own tools.
@remotion/threeand@remotion/playerare replaced by the engine's own 3D layer and studio.renderer,bundler,cliandlambdaare replaced by the Kinetograph CLI. - Tailwind packages.
tailwindandtailwind-v4are webpack configuration only, so they do nothing here. Tailwind itself works.
Partly working
Effects and HtmlInCanvas
2dandwebgl2effects (createEffect) run, and so do theonPaintandonInitprops.webgpueffects, and anonInitoronPaintthat asks forcanvas.getContext('webgpu'), are drawn without the effect and reported.- State an effect keeps from
setupdoes not carry to the next frame. Each frame runssetup,applyandcleanupagain. getImageDataof the source is not supported.- In an
asynconPaintoronInit, the part after the firstawaitdoes 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.
isPointInStrokeignores 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_ATTACHMENT1and up; a texture level above 0 as a target; targets that are not RGBA or that hold uploaded pixels;generateMipmapandtexSubImage2Don a texture drawn into; points and lines; instancing; cube, 3D and float textures; and multisampled edges. readPixelsis refused by design.blitFramebufferis 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: spacewith thousands of gradient tiles still errors. The other repeats are drawn as one tile repeated byfeTile.- Backdrop blur and glow are capped at 128 px. The
blureffect takes up to 512.
@remotion/skia and @shopify/react-native-skia
Atlas,Patch,Glyphs,TextBlob,PictureandImageSVGare drawn. Text inside an SVG is not.- Not supported: Reanimated values,
FitBox,Skia.SurfaceandSkia.Offscreen, theSkia.Image,Skia.DataandSkia.Typefacefactories,useVideo, animated images, paragraph measurement, and shaders or filters set on aSkia.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,effectsand therefgetters. - 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-3dwith planes that cross. Groups withtransform-style: preserve-3dunderperspectiveare 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-blockelement that also has atransform, 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 aspanwithdisplay: inline-block; transform: scale(0.5). The end card of the launch film (frames 1386 to 1520) has this case. @paper-design/shadersis untested. The engine has the methods this library needs, but the library itself has not been run through it. Its WebGL2 calls, such asgetShaderPrecisionFormat, are untested.- A rare difference with
--concurrency 2. In one render out of several,--concurrency 2produced 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.