@lxgicstudios/ai-animation 1.0.0

package/README.md

@@ -0,0 +1,32 @@
+# ai-animation
+
+Generate CSS and Framer Motion animations from plain English.
+
+## Install
+
+```bash
+npm install -g ai-animation
+```
+
+## Usage
+
+```bash
+npx ai-animation "fade in from left with bounce"
+npx ai-animation "pulse glow effect" -f css
+npx ai-animation "staggered list entrance" -f framer -o animations.ts
+```
+
+## Options
+
+- `-f, --format <format>` - css, framer, or both (default: both)
+- `-o, --output <file>` - Write to file
+
+## Setup
+
+```bash
+export OPENAI_API_KEY=sk-...
+```
+
+## License
+
+MIT

package/dist/cli.d.ts

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

package/dist/cli.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const ora_1 = __importDefault(require("ora"));
+const fs = __importStar(require("fs"));
+const index_1 = require("./index");
+const program = new commander_1.Command();
+program
+    .name("ai-animation")
+    .description("Generate CSS and Framer Motion animations from descriptions")
+    .version("1.0.0")
+    .argument("<description>", "Describe the animation you want")
+    .option("-f, --format <format>", "Output format: css, framer, or both", "both")
+    .option("-o, --output <file>", "Write to file")
+    .action(async (description, opts) => {
+    const spinner = (0, ora_1.default)("Generating animation...").start();
+    try {
+        const code = await (0, index_1.generateAnimation)(description, opts);
+        spinner.stop();
+        if (opts.output) {
+            fs.writeFileSync(opts.output, code);
+            console.log(`Animation written to ${opts.output}`);
+        }
+        else {
+            console.log("\n" + code + "\n");
+        }
+    }
+    catch (err) {
+        spinner.fail(err.message);
+        process.exit(1);
+    }
+});
+program.parse();

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export declare function generateAnimation(description: string, options: {
+    format?: string;
+}): Promise<string>;

package/dist/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAnimation = generateAnimation;
+const openai_1 = __importDefault(require("openai"));
+const openai = new openai_1.default({ apiKey: process.env.OPENAI_API_KEY });
+async function generateAnimation(description, options) {
+    const format = options.format || "both";
+    let outputInstructions = "";
+    if (format === "css")
+        outputInstructions = "Generate CSS @keyframes animation only.";
+    else if (format === "framer")
+        outputInstructions = "Generate Framer Motion animation config only (motion component props).";
+    else
+        outputInstructions = "Generate both CSS @keyframes and Framer Motion equivalent.";
+    const res = await openai.chat.completions.create({
+        model: "gpt-4o-mini",
+        messages: [
+            {
+                role: "system",
+                content: `You are a frontend animation expert. ${outputInstructions} Include proper easing, timing, and clean code. Return ONLY the code, no explanation.`,
+            },
+            {
+                role: "user",
+                content: `Create animation: ${description}`,
+            },
+        ],
+        temperature: 0.4,
+    });
+    return res.choices[0].message.content || "";
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@lxgicstudios/ai-animation",
+  "version": "1.0.0",
+  "description": "Generate CSS and Framer Motion animations from descriptions",
+  "main": "dist/index.js",
+  "bin": { "ai-animation": "dist/cli.js" },
+  "scripts": { "build": "tsc" },
+  "keywords": ["css", "animation", "framer-motion", "ai", "generator"],
+  "license": "MIT",
+  "dependencies": { "commander": "^12.1.0", "openai": "^4.73.0", "ora": "^5.4.1" },
+  "devDependencies": { "typescript": "^5.6.0", "@types/node": "^22.0.0" },
+  "author": "LXGIC Studios",
+  "repository": { "type": "git", "url": "https://github.com/lxgicstudios/ai-animation" }
+}

package/src/cli.ts

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+import { Command } from "commander";
+import ora from "ora";
+import * as fs from "fs";
+import { generateAnimation } from "./index";
+
+const program = new Command();
+
+program
+  .name("ai-animation")
+  .description("Generate CSS and Framer Motion animations from descriptions")
+  .version("1.0.0")
+  .argument("<description>", "Describe the animation you want")
+  .option("-f, --format <format>", "Output format: css, framer, or both", "both")
+  .option("-o, --output <file>", "Write to file")
+  .action(async (description, opts) => {
+    const spinner = ora("Generating animation...").start();
+    try {
+      const code = await generateAnimation(description, opts);
+      spinner.stop();
+      if (opts.output) {
+        fs.writeFileSync(opts.output, code);
+        console.log(`Animation written to ${opts.output}`);
+      } else {
+        console.log("\n" + code + "\n");
+      }
+    } catch (err: any) {
+      spinner.fail(err.message);
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/src/index.ts

@@ -0,0 +1,27 @@
+import OpenAI from "openai";
+
+const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+
+export async function generateAnimation(description: string, options: { format?: string }): Promise<string> {
+  const format = options.format || "both";
+  let outputInstructions = "";
+  if (format === "css") outputInstructions = "Generate CSS @keyframes animation only.";
+  else if (format === "framer") outputInstructions = "Generate Framer Motion animation config only (motion component props).";
+  else outputInstructions = "Generate both CSS @keyframes and Framer Motion equivalent.";
+
+  const res = await openai.chat.completions.create({
+    model: "gpt-4o-mini",
+    messages: [
+      {
+        role: "system",
+        content: `You are a frontend animation expert. ${outputInstructions} Include proper easing, timing, and clean code. Return ONLY the code, no explanation.`,
+      },
+      {
+        role: "user",
+        content: `Create animation: ${description}`,
+      },
+    ],
+    temperature: 0.4,
+  });
+  return res.choices[0].message.content || "";
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "declaration": true
+  },
+  "include": ["src"]
+}