@devmotion/cli 0.0.1

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@devmotion/cli",
+  "version": "0.0.1",
+  "description": "HTML-first, agent-friendly video tooling. Write HTML. Render video.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "bin": {
+    "devmotion": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "scripts",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "postinstall": "node ./scripts/postinstall.mjs",
+    "prepublishOnly": "pnpm build",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@devmotion/studio": "workspace:*",
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "citty": "^0.1.6",
+    "nanoid": "^5.1.5",
+    "playwright": "1.50.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsup": "^8.3.5",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "keywords": [
+    "video",
+    "animation",
+    "html",
+    "agent",
+    "mcp",
+    "ffmpeg",
+    "playwright",
+    "lottie",
+    "gsap"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devmotion/devmotion",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://devmotion.com",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/postinstall.mjs

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+/**
+ * postinstall — download the Chromium browser Playwright needs for rendering.
+ *
+ * Best-effort: if the install fails (CI, restricted network, etc.) we log a
+ * notice and keep going. The user can re-run it manually via
+ *   npx playwright install chromium
+ * `devmotion doctor` will surface the missing browser if it ever happens.
+ *
+ * Skipped automatically when:
+ *   - DEVMOTION_SKIP_POSTINSTALL=1 is set
+ *   - CI=true (most CIs cache browsers separately or don't need them)
+ *   - PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD is set (Playwright's own convention)
+ */
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+
+if (
+  process.env.DEVMOTION_SKIP_POSTINSTALL === '1' ||
+  process.env.PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD === '1' ||
+  process.env.CI === 'true'
+) {
+  console.log('[devmotion] postinstall skipped (env flag set)');
+  process.exit(0);
+}
+
+// Playwright doesn't export a `playwright/cli` subpath, so resolve the package
+// root and run its `cli.js` binary directly.
+let playwrightCli;
+try {
+  playwrightCli = join(dirname(require.resolve('playwright/package.json')), 'cli.js');
+} catch {
+  playwrightCli = undefined;
+}
+
+if (!playwrightCli || !existsSync(playwrightCli)) {
+  console.warn(
+    '\n[devmotion] Playwright not found — skipping Chromium download.\n' +
+      '  Run manually before `devmotion render`: npx playwright install chromium\n'
+  );
+  process.exit(0);
+}
+
+console.log('[devmotion] downloading Playwright Chromium (~150 MB, one-time)...');
+const res = spawnSync(process.execPath, [playwrightCli, 'install', 'chromium'], {
+  stdio: 'inherit'
+});
+
+if (res.status !== 0) {
+  console.warn(
+    '\n[devmotion] Could not auto-install Chromium. Run this manually before `devmotion render`:\n' +
+      '  npx playwright install chromium\n'
+  );
+  // Do NOT fail the overall install — `devmotion preview` works without it,
+  // and `devmotion doctor` will flag it later.
+  process.exit(0);
+}

package/templates/bare.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <!-- data-dm-* elements become timeline layers -->
+  </body>
+</html>

package/templates/default.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div
+      data-dm-id="title"
+      data-dm-enter="fade-in"
+      data-dm-enter-time="0.5"
+      data-dm-duration="0.8"
+      data-dm-easing="ease-out"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        color: #fff;
+        font-size: 48px;
+        font-family: system-ui, sans-serif;
+      "
+    >
+      New Scene
+    </div>
+  </body>
+</html>

package/templates/gsap.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+  </head>
+  <body>
+    <div
+      data-dm-id="animated-box"
+      data-dm-enter-time="0"
+      data-dm-duration="3"
+      style="width: 100px; height: 100px; background: #3b82f6; border-radius: 8px"
+    ></div>
+    <script>
+      // GSAP animations are captured frame-by-frame by the virtualized clock
+      gsap.to('[data-dm-id="animated-box"]', {
+        x: 300,
+        rotation: 360,
+        duration: 2,
+        ease: 'power2.out'
+      });
+    </script>
+  </body>
+</html>

package/templates/lottie.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+  </head>
+  <body>
+    <div
+      data-dm-id="lottie-animation"
+      data-dm-enter-time="0"
+      data-dm-duration="3"
+      style="width: 300px; height: 300px"
+    ></div>
+    <script>
+      // DevMotion auto-detects Lottie and drives every loaded animation
+      // frame-by-frame from the timeline — no DevMotion hooks needed.
+      lottie.loadAnimation({
+        container: document.querySelector('[data-dm-id="lottie-animation"]'),
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+        path: './assets/animation.json'
+      });
+    </script>
+  </body>
+</html>