@clipkit/ae-exporter

Turn a Clipkit video into an editable Adobe After Effects project.

Not a rendered clip: real comps, shape and text layers, keyframes with the same easing, live expressions, footage with time remapping, cameras, lights and effects. A motion designer can open it and keep working.

Measured on 17 production videos (3–44 s, up to 485 elements: UI mocks, glows, particles, 3D cameras), the After Effects render matches the Clipkit render at a 92 % mean pixel match (SSIM 0.94).

Use it

npm i -g @clipkit/ae-exporter
clipkit-ae video.json --out ./video-ae

Then in After Effects (2024 or newer): File ▸ Scripts ▸ Run Script File… and pick video-ae/build.jsx. The project builds in a few seconds with the main comp open.

On a Mac with After Effects installed, --aep does that for you: it launches AE, builds the project and saves video-ae/<name>.aep.

The output folder:

| file | what it is | |---|---| | build.jsx | the script you run in After Effects | | build.json | the project description the script executes | | run.jsx | headless variant: builds, saves the .aep, logs instead of dialogs | | assets/ | media, pre-rendered sequences, and fonts/ to install first | | REPORT.md | how each element was translated, and the fonts it needs |

Install the fonts first. REPORT.md lists them and assets/fonts/ holds any the video embeds. After Effects silently substitutes a missing font.

How faithful is it

Every element lands on one rung, listed in REPORT.md:

• native: a direct After Effects equivalent (most shapes, text, footage, keyframes).
• rewrite: the same result through a standard AE technique (expressions, track mattes).
• bake: motion sampled per frame into keyframes (springs, elastic and bounce, noise).
• prerender: rendered by Clipkit to an image or PNG sequence (particles, shaders, refractive glass, gradient fills).
• approx: native, but visibly different (estimated text widths, halftone).
• drop: left out, with the reason.

Native keyframes are checked against Clipkit's own animation engine before they are trusted; if they would drift, the channel bakes instead.

Flags

| flag | default | effect | |---|---|---| | --out <dir> | <file>-ae | output folder | | --name <comp> | source name | main comp name | | --prefer editable\|exact | editable | exact bakes or pre-renders anything not bit-equivalent | | --ae-version N | 24 | gates per-character text styles and Advanced 3D (AE 2024+) | | --backdrop isolate\|flatten | isolate | whether pre-rendered effects bake the layers beneath | | --no-prerender | | skip the headless-Chrome pass | | --aep | | macOS: drive After Effects and save the .aep |

Pre-rendering needs playwright and Google Chrome (npm i -g playwright). Converting embedded woff2 fonts to installable files needs python3 with fontTools and brotli.

From code

import { exportToAE, runPrerenders, renderReport } from '@clipkit/ae-exporter';

const { manifest, report, assets, prerenders, fonts } = exportToAE(source, { prefer: 'editable' });

License

Apache-2.0. The pre-render harness bundles @clipkit/runtime, which is under its own license (see that package).