create-rendiv 0.1.0

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import chalk from 'chalk';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createInterface } from 'node:readline';
+import { execSync } from 'node:child_process';
+const thisDir = path.dirname(fileURLToPath(import.meta.url));
+const templateDir = path.resolve(thisDir, 'template');
+function detectPackageManager() {
+    const agent = process.env.npm_config_user_agent ?? '';
+    if (agent.startsWith('pnpm'))
+        return 'pnpm';
+    if (agent.startsWith('yarn'))
+        return 'yarn';
+    if (agent.startsWith('bun'))
+        return 'bun';
+    return 'npm';
+}
+function prompt(question) {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+    for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            copyDir(srcPath, destPath);
+        }
+        else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+async function create(projectName) {
+    const targetDir = path.resolve(process.cwd(), projectName);
+    const dirName = path.basename(targetDir);
+    if (fs.existsSync(targetDir)) {
+        console.error(chalk.red(`Error: Directory "${dirName}" already exists.`));
+        process.exit(1);
+    }
+    console.log();
+    console.log(chalk.bold(`Creating a new Rendiv project in ${chalk.cyan(targetDir)}`));
+    console.log();
+    // Copy template files
+    copyDir(templateDir, targetDir);
+    // Process package.json template
+    const tmplPath = path.join(targetDir, 'package.json.tmpl');
+    const pkgContent = fs.readFileSync(tmplPath, 'utf-8').replace(/\{\{PROJECT_NAME\}\}/g, dirName);
+    fs.writeFileSync(path.join(targetDir, 'package.json'), pkgContent);
+    fs.unlinkSync(tmplPath);
+    // Install dependencies
+    const pm = detectPackageManager();
+    console.log(chalk.gray(`Installing dependencies with ${pm}...`));
+    console.log();
+    try {
+        execSync(`${pm} install`, { cwd: targetDir, stdio: 'inherit' });
+    }
+    catch {
+        console.log();
+        console.log(chalk.yellow('Could not install dependencies automatically.'));
+        console.log(chalk.yellow(`Run ${chalk.bold(`cd ${dirName} && ${pm} install`)} manually.`));
+        console.log();
+    }
+    // Success message
+    console.log();
+    console.log(chalk.green('Done!') + ' Your Rendiv project is ready.');
+    console.log();
+    console.log('  Next steps:');
+    console.log();
+    console.log(chalk.cyan(`  cd ${dirName}`));
+    console.log(chalk.cyan(`  ${pm === 'npm' ? 'npx' : pm} rendiv studio src/index.tsx`));
+    console.log();
+    console.log('  Other commands:');
+    console.log();
+    console.log(`  ${chalk.gray(`${pm} run preview`)}      Preview in browser`);
+    console.log(`  ${chalk.gray(`${pm} run render`)}       Render to MP4`);
+    console.log(`  ${chalk.gray(`${pm} run still`)}        Export a single frame`);
+    console.log();
+}
+const program = new Command();
+program
+    .name('create-rendiv')
+    .description('Create a new Rendiv video project')
+    .version('0.1.0')
+    .argument('[project-name]', 'Name for the new project')
+    .action(async (name) => {
+    let projectName = name;
+    if (!projectName) {
+        projectName = await prompt('Project name: ');
+    }
+    if (!projectName) {
+        console.error(chalk.red('Error: Project name is required.'));
+        process.exit(1);
+    }
+    await create(projectName);
+});
+program.parse();
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7D,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;AAEtD,SAAS,oBAAoB;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,qBAAqB,IAAI,EAAE,CAAC;IACtD,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;QAAE,OAAO,MAAM,CAAC;IAC5C,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;QAAE,OAAO,MAAM,CAAC;IAC5C,IAAI,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAC1C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,MAAM,CAAC,QAAgB;IAC9B,MAAM,EAAE,GAAG,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7E,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;YAC/B,EAAE,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,OAAO,CAAC,GAAW,EAAE,IAAY;IACxC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxC,KAAK,MAAM,KAAK,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QACjE,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YACxB,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;AACH,CAAC;AAED,KAAK,UAAU,MAAM,CAAC,WAAmB;IACvC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,WAAW,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEzC,IAAI,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,qBAAqB,OAAO,mBAAmB,CAAC,CAAC,CAAC;QAC1E,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,CAAC,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,oCAAoC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;IACrF,OAAO,CAAC,GAAG,EAAE,CAAC;IAEd,sBAAsB;IACtB,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAEhC,gCAAgC;IAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAAC;IAChG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;IACnE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAExB,uBAAuB;IACvB,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAClC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC,CAAC;IACjE,OAAO,CAAC,GAAG,EAAE,CAAC;IAEd,IAAI,CAAC;QACH,QAAQ,CAAC,GAAG,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAClE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,CAAC,GAAG,EAAE,CAAC;QACd,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,+CAA+C,CAAC,CAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,OAAO,OAAO,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;QAC3F,OAAO,CAAC,GAAG,EAAE,CAAC;IAChB,CAAC;IAED,kBAAkB;IAClB,OAAO,CAAC,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,gCAAgC,CAAC,CAAC;IACrE,OAAO,CAAC,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,OAAO,CAAC,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,OAAO,EAAE,CAAC,CAAC,CAAC;IAC3C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,8BAA8B,CAAC,CAAC,CAAC;IACtF,OAAO,CAAC,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACjC,OAAO,CAAC,GAAG,EAAE,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,0BAA0B,CAAC,CAAC;IAC5E,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACvE,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,+BAA+B,CAAC,CAAC;IAC/E,OAAO,CAAC,GAAG,EAAE,CAAC;AAChB,CAAC;AAED,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,eAAe,CAAC;KACrB,WAAW,CAAC,mCAAmC,CAAC;KAChD,OAAO,CAAC,OAAO,CAAC;KAChB,QAAQ,CAAC,gBAAgB,EAAE,0BAA0B,CAAC;KACtD,MAAM,CAAC,KAAK,EAAE,IAAa,EAAE,EAAE;IAC9B,IAAI,WAAW,GAAG,IAAI,CAAC;IAEvB,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,WAAW,GAAG,MAAM,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC,CAAC;QAC7D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/template/package.json.tmpl

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "preview": "vite dev",
+    "studio": "rendiv studio src/index.tsx",
+    "render": "rendiv render src/index.tsx MyVideo out/my-video.mp4",
+    "still": "rendiv still src/index.tsx MyVideo out/still.png",
+    "compositions": "rendiv compositions src/index.tsx"
+  },
+  "dependencies": {
+    "@rendiv/core": "^0.1.0",
+    "@rendiv/player": "^0.1.0",
+    "@rendiv/cli": "^0.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^6.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/dist/template/src/MyVideo.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useFrame, useCompositionConfig, Fill, interpolate, spring } from '@rendiv/core';
+
+export const MyVideo: React.FC = () => {
+  const frame = useFrame();
+  const { fps, durationInFrames } = useCompositionConfig();
+
+  const opacity = interpolate(frame, [0, 30], [0, 1]);
+  const scale = spring({ frame, fps, config: { damping: 12 } });
+  const progress = frame / durationInFrames;
+
+  return (
+    <Fill
+      style={{
+        background: `linear-gradient(135deg, #0f0f0f ${(1 - progress) * 100}%, #1a1a2e 100%)`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <h1
+        style={{
+          color: 'white',
+          fontSize: 80,
+          fontFamily: 'system-ui, sans-serif',
+          opacity,
+          transform: `scale(${scale})`,
+        }}
+      >
+        Hello, Rendiv!
+      </h1>
+    </Fill>
+  );
+};

package/dist/template/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { setRootComponent, Composition } from '@rendiv/core';
+import { MyVideo } from './MyVideo';
+
+const Root: React.FC = () => (
+  <Composition
+    id="MyVideo"
+    component={MyVideo}
+    durationInFrames={150}
+    fps={30}
+    width={1920}
+    height={1080}
+  />
+);
+
+setRootComponent(Root);

package/dist/template/template/package.json.tmpl

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "preview": "vite dev",
+    "studio": "rendiv studio src/index.tsx",
+    "render": "rendiv render src/index.tsx MyVideo out/my-video.mp4",
+    "still": "rendiv still src/index.tsx MyVideo out/still.png",
+    "compositions": "rendiv compositions src/index.tsx"
+  },
+  "dependencies": {
+    "@rendiv/core": "^0.1.0",
+    "@rendiv/player": "^0.1.0",
+    "@rendiv/cli": "^0.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^6.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/dist/template/template/src/MyVideo.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useFrame, useCompositionConfig, Fill, interpolate, spring } from '@rendiv/core';
+
+export const MyVideo: React.FC = () => {
+  const frame = useFrame();
+  const { fps, durationInFrames } = useCompositionConfig();
+
+  const opacity = interpolate(frame, [0, 30], [0, 1]);
+  const scale = spring({ frame, fps, config: { damping: 12 } });
+  const progress = frame / durationInFrames;
+
+  return (
+    <Fill
+      style={{
+        background: `linear-gradient(135deg, #0f0f0f ${(1 - progress) * 100}%, #1a1a2e 100%)`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <h1
+        style={{
+          color: 'white',
+          fontSize: 80,
+          fontFamily: 'system-ui, sans-serif',
+          opacity,
+          transform: `scale(${scale})`,
+        }}
+      >
+        Hello, Rendiv!
+      </h1>
+    </Fill>
+  );
+};

package/dist/template/template/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { setRootComponent, Composition } from '@rendiv/core';
+import { MyVideo } from './MyVideo';
+
+const Root: React.FC = () => (
+  <Composition
+    id="MyVideo"
+    component={MyVideo}
+    durationInFrames={150}
+    fps={30}
+    width={1920}
+    height={1080}
+  />
+);
+
+setRootComponent(Root);

package/dist/template/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/dist/template/template/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/dist/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/dist/template/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-rendiv",
+  "version": "0.1.0",
+  "description": "Create a new Rendiv video project",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-rendiv": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "dependencies": {
+    "commander": "^12.1.0",
+    "chalk": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@rendiv/tsconfig": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc && cp -r src/template dist/template",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}