{"_id":"@codemovie/cli","_rev":"2-bc40bebe2c6f026c69f78450cbaf1433","name":"@codemovie/cli","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@codemovie/cli","version":"0.0.1","author":{"name":"peter@peterkroener.de"},"license":"MIT","_id":"@codemovie/cli@0.0.1","maintainers":[{"name":"sirpepe","email":"peter@peterkroener.de"}],"bin":{"code-movie":"bin/index.js"},"dist":{"shasum":"9bb6ee34dc3465005b46e3b14ff22a5f53c280d2","tarball":"https://registry.npmjs.org/@codemovie/cli/-/cli-0.0.1.tgz","fileCount":10,"integrity":"sha512-1X4dvRfNcdoVAdsrppoVRyh02hTRc0eFBfXwwWF9/QCV2h0Yb0tbVn0GDihJQHUlAYJ4nLBpswmtcG2xQAYN0w==","signatures":[{"sig":"MEYCIQC/hBZiu9kNA5yPEpQLzFzNRqWPAhksf+BzSruWkDUm7AIhANLWZRo8id513hgY1Pzod35NydvZ0Ff00+gCluV3RsEc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30551},"main":"bin/index.js","type":"module","engines":{"node":">=24.0.0"},"gitHead":"3d1a61d6f0791ef0a59b6d9cc2c6463cb964b466","scripts":{"lint":"npx prettier . --check && eslint","release":"npm run prepare-release && release-it","prepare-release":"npm run lint"},"_npmUser":{"name":"sirpepe","email":"peter@peterkroener.de"},"_npmVersion":"11.3.0","description":"Render Code.Movie animations to videos or image sequences from your terminal","directories":{"example":"examples"},"_nodeVersion":"24.0.1","dependencies":{"zod":"^4.3.6","json5":"^2.2.3","yesno":"^0.4.0","puppeteer":"^25.0.0","cli-progress":"^3.12.0","@sirpepe/shed":"^4.9.0","command-line-args":"^6.0.2","command-line-usage":"^7.0.4","@codemovie/code-movie":"0.0.x"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^10.2.1","globals":"^17.5.0","prettier":"^3.8.3","@eslint/js":"^10.0.1","release-it":"^20.2.1","eslint-config-prettier":"^10.1.8"},"_npmOperationalInternal":{"tmp":"tmp/cli_0.0.1_1783498337581_0.468368332865988","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@codemovie/cli","version":"0.0.2","description":"Render Code.Movie animations to videos or image sequences from your terminal","type":"module","main":"bin/index.js","bin":{"code-movie":"bin/index.js"},"directories":{"example":"examples"},"scripts":{"lint":"npx prettier . --check && eslint","prepare-release":"npm run lint","release":"npm run prepare-release && release-it"},"author":{"name":"peter@peterkroener.de"},"license":"MIT","devDependencies":{"@eslint/js":"^10.0.1","eslint":"^10.2.1","eslint-config-prettier":"^10.1.8","globals":"^17.5.0","prettier":"^3.8.3","release-it":"^20.2.1"},"dependencies":{"@codemovie/code-movie":"^0.0.45","@sirpepe/shed":"^4.9.0","cli-progress":"^3.12.0","command-line-args":"^6.0.2","command-line-usage":"^7.0.4","json5":"^2.2.3","puppeteer":"^25.0.0","yesno":"^0.4.0","zod":"^4.3.6"},"engines":{"node":">=24.0.0"},"publishConfig":{"access":"public"},"_id":"@codemovie/cli@0.0.2","gitHead":"f69b6956129dae64e295f865911d1793b30597c3","_nodeVersion":"24.0.1","_npmVersion":"11.3.0","dist":{"integrity":"sha512-cX3yj0UDl6ubZIOsdRHbOhF9C3jRQ/xIHPrw6wo7HXWDEi4je/EhF7Y486a85YvcwjPgk1pGiMfKsVcrd58ZgQ==","shasum":"f6d01e665b22d83cb7100891e069d6574e9d51cc","tarball":"https://registry.npmjs.org/@codemovie/cli/-/cli-0.0.2.tgz","fileCount":10,"unpackedSize":36056,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA9uBlReYQ8nbQP44bIINayr6GpmfOSMWJdZdcp6NEXfAiBEPIVWllVEWLbwsfj1vG2yA/N9+8FPKItye4a2ZzGsTw=="}]},"_npmUser":{"name":"sirpepe","email":"peter@peterkroener.de"},"maintainers":[{"name":"sirpepe","email":"peter@peterkroener.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cli_0.0.2_1786435877721_0.15373750276424736"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T08:12:17.353Z","modified":"2026-08-11T08:11:18.067Z","0.0.1":"2026-07-08T08:12:17.724Z","0.0.2":"2026-08-11T08:11:17.847Z"},"author":{"name":"peter@peterkroener.de"},"license":"MIT","description":"Render Code.Movie animations to videos or image sequences from your terminal","maintainers":[{"name":"sirpepe","email":"peter@peterkroener.de"}],"readme":"# Code.Movie CLI\n\n⚠️ This package is very experimental. Do _not_ use yet. ⚠️\n\n**Command-line interface to render [Code.Movie](https://code.movie/) animations into image sequences.** The image sequences are ready to drop into your video editor of choice or can be piped straight into ffmpeg for instant video output:\n\n```bash\nnpm install -g @codemovie/cli\n\ncat > project.json5 <<EOL\n{\n  languageModule: \"ecmascript\",\n  width: 800,\n  height: 450,\n  frames: [{ code: \"// Hello World\" }, { code: \"console.log(42)\" }],\n}\nEOL\n\ncode-movie -p project.json5 |\n  ffmpeg -y -r 60 -f image2pipe -s 800x450 -vcodec png -i - -vcodec libx264 -pix_fmt yuv420p -vsync cfr -f ismv -movflags +faststart video.mp4\n```\n\nFor instant videos, pipe stdout into ffmpeg using the [image2pipe](https://ffmpeg.org/ffmpeg-formats.html#image2_002c-image2pipe) muxer. Otherwise use the `--out` argument to specify the directory to dump the image sequence into. The CLI runs Chrome via Puppeteer [in deterministic render mode](https://docs.google.com/document/d/1PppegrpXhOzKKAuNlP6XOEnviXFGUiX2hop00Cxcv4o/edit?tab=t.0#heading=h.nsyqrhhdvg8g) and saves (or pipes to stdout) a screenshot for each frame.\n\n## Arguments\n\n### Core arguments\n\n- **`-p`, `--project file`** _(path)_ Path to [JSON5](https://json5.org/)-encoded project file.\n- **`-d`, `--dump`** _(path, optional)_ Dump the generated HTML (scaffold + animation) into the file at the specified path (relative to the cwd).\n- **`-y`, `--yolo`** Confirm all prompts to create and/or delete directories and/or files. Defaults to false.\n- **`-h`, `--help`** Print help\n- **`-v`, `--version`** Print version information\n\n### Init command\n\nRun `code-movie init -p path/to/project.json5` to write a new config file to the\nspecified destination. The `-p` argument is optional and defaults to\n`project.json5` in the cwd.\n\n### Project file overrides (all optional)\n\nThe following options are all optional. If set, they override their equivalents in the project file. If neither the options nor their equivalents in the project file are set, the default values describes below take effect.\n\n- **`--out`** _(directory)_ Path to output directory for images, relative to the cwd. If not set either via this flag or in the project file, image buffers are sent to stdout.\n- **`--frames`** _(string)_ [JSON5](https://json5.org/)-encoded array of [`InputFrame`](https://code.movie/docs/reference/core.html#docs-inputframe) objects.\n- **`--scaffold`** _(file)_ Path to HTML scaffold file, relative to the cwd. Defaults to a built-in scaffold (see below).\n- **`--properties`** _(string)_ [JSON5](https://json5.org/)-encoded object of CSS properties to set on the scaffold's root element. Defaults to `{}`.\n- **`--languageModule`** _(string)_ [Language module](https://code.movie/docs/reference/languages.html) (eg. `\"ecmascript\"` or `\"php\"`).\n- **`--languageOptions`** _(string)_ [JSON5](https://json5.org/)-encoded object of language module options. Defaults to `{}`.\n- **`--baseTheme`** _(string)_ [Theme module](https://code.movie/docs/reference/themes.html). Defaults to `defaultTheme`.\n- **`--tabSize`** _(int)_ Tab size. Defaults to 2.\n- **`--minCols`** _(int)_ Minimum columns. Defaults to 0.\n- **`--width`** _(int)_ Output width in px.\n- **`--height`** _(int)_ Output height in px.\n- **`--fps`** _(int)_ Frames per second. Defaults to 30.\n- **`--frameTime`** _(int)_ Time at each frame (including the animation) in ms. Defaults to 2000. Can be overwritten with the `data.frameTime` property on each frame object\n- **`--format`** _(string)_ Output image format. Defaults to png.\n- **`--quality`** _(int)_ Compression quality from range \\[0..100\\]. Applied to output formats jpeg and webp only. Defaults to 100.\n- **`--transparent`** _(boolean)_ Transparent background. Defaults to `false`.\n\n## Project file format ([JSON5](https://json5.org/))\n\n**Note:** you can generate a conforming, basic project file with commented-out\nplaceholder values via `code-movie init -p path/to/project.json5`.\n\n```typescript\ntype ProjectFileFormat = {\n  // Path to the HTML file your animation gets embedded into, relative to the\n  // project file. Defaults to a built-in scaffold file (see below)\n  scaffold?: string;\n  // Path to output directory for images, relative to the project file. If not\n  // set either via this flag or in the project file, image buffers are sent to\n  // stdout.\n  out?: string;\n  // CSS properties and values to set on the scaffold's root element for\n  // customization purposes. Defaults to {}\n  properties?: Record<string, string>;\n  // List of code keyframes\n  // See the InputFrame type in https://code.movie/docs/reference/core.html\n  frames: Array<{\n    code: string;\n    ranges: Range[];\n    decorations: InputDecoration[];\n    // Additional per-frame metadata\n    data?:\n      | {\n          // How long to pause on this particular frame in ms. Overrides the\n          // main \"frameTime\" option on a per-frame basis\n          frameTime?: number | undefined;\n        }\n      | undefined;\n  }>;\n  // Module name of the language module to use (eg. \"ecmascript\" or \"php\").\n  // See https://code.movie/docs/reference/languages.html\n  languageModule: string;\n  // JSON-encoded options for the language module (eg. '{ \"ts\": true }' to\n  // enable TypeScript support in the \"ecmascript\" language module). Defaults\n  // to {}\n  // See https://code.movie/docs/reference/languages.html\n  languageOptions?: Record<string, any>;\n  // Module export for the built-in theme to use as a base (eg. \"monokaiDark\")\n  // Defaults to \"defaultTheme\"\n  // See https://code.movie/docs/reference/themes.html for available themes\n  baseTheme?: string;\n  // Defaults to 2\n  tabSize?: number;\n  // Defaults to 0\n  minCols?: number;\n  // Total dimensions\n  width: number;\n  height: number;\n  // Defaults to 30\n  fps?: number;\n  // How long to stay on a particular frame in ms. This time includes the\n  // (theme-dependent) transition time. Defaults to 2000. Can be overridden on\n  // a per-keyframe basis via a \"keyframe.data.frameTime\"\n  frameTime: number;\n  // Output image format. Defaults to \"png\"\n  format?: \"png\" | \"jpeg\" | \"webp\";\n  // Set the output image quality. Only applies when \"format\" is either \"jpeg\"\n  // or \"webp\". Defaults to 100.\n  quality?: number;\n  // Force transparent background. This not only disables the browser's default\n  // white page background but also sets --cm-scene-background to \"transparent\".\n  // Optional, defaults to false.\n  transparent?: boolean;\n};\n```\n\n## Default scaffold file\n\n**Every scaffold file _must_ contain a `<main>` element** into which the animation HTML gets injected. The CSS variable `--animation-scale` is added during rendering and contains the factor (as a floating-point number) by which the animation element needs to be scaled in order to fit inside `<main>`.\n\n```html\n<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title></title>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 100vw;\n        height: 100vh;\n        padding: 0;\n        margin: 0;\n        overflow: hidden;\n        font-size: 48px;\n      }\n      main {\n        position: absolute;\n        /* set --main-inset to tweak the margin from the edges */\n        inset: var(--main-inset, 0);\n      }\n      /*\n        This slightly strange method of scaling and aligning the animation\n        circumvents the use of transition properties. Setting a transition\n        establishes a stacking context, which prevents backdrop-filter,\n        mix-blend-mode and other effects from affecting the page background.\n        This may or may not be desirable depending on the use case\n      */\n      .cm-animation {\n        position: absolute;\n        --cm-font-size: calc(var(--animation-scale) * 1em);\n        top: calc(50% - var(--total-height) / 2);\n        left: calc(50% - var(--total-width) / 2);\n      }\n    </style>\n  </head>\n  <body>\n    <main>\n      <!-- Animation gets added here and is scaled to fit <main> -->\n    </main>\n  </body>\n</html>\n```\n\n## Troubleshooting\n\n### Crash on Linux with either no error message or error message \"No usable sandbox!\"\n\nSee [AppArmor User Namespace Restrictions vs. Chromium Developer Builds](https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md). An easy and safe workaround is to prefix the CLI command with `CHROME_DEVEL_SANDBOX=/opt/google/chrome/chrome-sandbox`.\n","readmeFilename":"Readme.md"}