npm - create-anima - Versions diffs - 0.1.0 - Mend

create-anima 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ #!/usr/bin/env node
2	+ export {};

package/dist/index.js ADDED Viewed

@@ -0,0 +1,252 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import readline from 'node:readline';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES = {
+    'package.json': (name) => `{
+  "name": "${name}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@it-compiles/anima": "^0.1.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4"
+  }
+}
+`,
+    'vite.config.ts': () => `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { animaPlugin } from '@it-compiles/anima/vite';
+export default defineConfig({
+  plugins: [react(), tailwindcss(), animaPlugin()],
+});
+`,
+    'tsconfig.json': () => `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
+`,
+    'index.html': (name) => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+    'src/main.tsx': () => `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+`,
+    'src/index.css': () => `@import "tailwindcss";
+html, body, #root {
+  @apply h-full flex flex-col overflow-hidden bg-zinc-900 text-zinc-50;
+}
+`,
+    'src/vite-env.d.ts': () => `/// <reference types="vite/client" />
+`,
+    'src/App.tsx': () => `import { useState } from 'react';
+import { AnimaPlayer, RenderDialog } from '@it-compiles/anima/react';
+import animation from './animation';
+export default function App() {
+  const [renderOpen, setRenderOpen] = useState(false);
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center justify-between p-4 border-b border-neutral-700">
+        <h1 className="text-lg font-medium">My Animation</h1>
+        <button
+          onClick={() => setRenderOpen(true)}
+          className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded transition-colors"
+        >
+          Render Video
+        </button>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <AnimaPlayer animation={animation} controls autoPlay />
+      </div>
+      <RenderDialog
+        open={renderOpen}
+        onOpenChange={setRenderOpen}
+        animation={animation}
+      />
+    </div>
+  );
+}
+`,
+    'src/animation.ts': () => `import { defineAnimation, easeOut, easeBack, Screen } from '@it-compiles/anima';
+export default defineAnimation((scene) => {
+  // Set background
+  scene.bg('#1a1a2e');
+  // Create objects
+  const title = scene.text('Hello, Anima!', {
+    size: 72,
+    color: '#ffffff',
+    font: 'system-ui',
+  });
+  const subtitle = scene.text('Edit src/animation.ts to get started', {
+    size: 24,
+    color: '#888888',
+    font: 'system-ui',
+  });
+  // Build timeline
+  return (t) => {
+    // Animate title
+    t.tween(800, easeBack, (ctx, u) => {
+      ctx.pin(title, 'center').to(Screen.at(0.5, 0.4), u);
+      ctx.scale(title).from(0).to(1, u);
+      ctx.opacity(title).from(0).to(1, u);
+    });
+    // Animate subtitle after title
+    t.tween(600, easeOut, (ctx, u) => {
+      ctx.pin(subtitle, 'center').to(Screen.at(0.5, 0.55), u);
+      ctx.opacity(subtitle).from(0).to(1, u);
+    });
+    // Hold for a moment
+    t.wait(1000);
+    // Fade out
+    t.tween(500, easeOut, (ctx, u) => {
+      ctx.opacity(title).to(0, u);
+      ctx.opacity(subtitle).to(0, u);
+    });
+  };
+});
+`,
+};
+async function prompt(question) {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        });
+    });
+}
+function isValidPackageName(name) {
+    return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
+}
+function toValidPackageName(name) {
+    return name
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/[^a-z0-9-~._]/g, '-')
+        .replace(/^[._-]+/, '')
+        .replace(/[._-]+$/, '');
+}
+async function main() {
+    console.log();
+    console.log('  \x1b[36m@it-compiles/anima\x1b[0m - Create Animation Project');
+    console.log();
+    let projectName = process.argv[2];
+    if (!projectName) {
+        projectName = await prompt('  Project name: ');
+    }
+    if (!projectName) {
+        console.log('  \x1b[31mProject name is required\x1b[0m');
+        process.exit(1);
+    }
+    const targetDir = path.resolve(process.cwd(), projectName);
+    const packageName = toValidPackageName(path.basename(targetDir));
+    if (!isValidPackageName(packageName)) {
+        console.log(`  \x1b[31mInvalid package name: ${packageName}\x1b[0m`);
+        process.exit(1);
+    }
+    if (fs.existsSync(targetDir)) {
+        const files = fs.readdirSync(targetDir);
+        if (files.length > 0) {
+            console.log(`  \x1b[31mDirectory ${projectName} is not empty\x1b[0m`);
+            process.exit(1);
+        }
+    }
+    else {
+        fs.mkdirSync(targetDir, { recursive: true });
+    }
+    console.log();
+    console.log(`  Creating project in \x1b[32m${targetDir}\x1b[0m`);
+    console.log();
+    // Create src directory
+    fs.mkdirSync(path.join(targetDir, 'src'), { recursive: true });
+    // Write all template files
+    for (const [filePath, template] of Object.entries(TEMPLATES)) {
+        const content = typeof template === 'function'
+            ? template(packageName)
+            : template;
+        const fullPath = path.join(targetDir, filePath);
+        fs.writeFileSync(fullPath, content);
+        console.log(`  \x1b[32m+\x1b[0m ${filePath}`);
+    }
+    console.log();
+    console.log('  \x1b[32mDone!\x1b[0m Now run:');
+    console.log();
+    console.log(`    cd ${projectName}`);
+    console.log('    npm install');
+    console.log('    npm run dev');
+    console.log();
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "create-anima",
+  "version": "0.1.0",
+  "type": "module",
+  "bin": {
+    "create-anima": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "typescript": "~5.9.3"
+  }
+}