@codellyson/create-framely 0.1.0

package/index.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const templateDir = path.join(__dirname, 'template');
+
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.error('Usage: create-framely <project-name>');
+  console.error('Example: npx create-framely my-video');
+  process.exit(1);
+}
+
+const targetDir = path.resolve(process.cwd(), projectName);
+
+if (fs.existsSync(targetDir)) {
+  console.error(`Error: Directory "${projectName}" already exists.`);
+  process.exit(1);
+}
+
+/**
+ * Recursively copy a directory, replacing {{PROJECT_NAME}} in file contents.
+ */
+function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      let content = fs.readFileSync(srcPath, 'utf-8');
+      content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+      fs.writeFileSync(destPath, content);
+    }
+  }
+}
+
+console.log(`\nCreating a new Framely project in ${targetDir}\n`);
+
+copyDir(templateDir, targetDir);
+
+console.log('Done! To get started:\n');
+console.log(`  cd ${projectName}`);
+console.log('  npm install');
+console.log('  npx framely preview\n');

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@codellyson/create-framely",
+  "version": "0.1.0",
+  "description": "Create a new Framely video project",
+  "type": "module",
+  "bin": {
+    "create-framely": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codellyson/framely.git",
+    "directory": "packages/create-framely"
+  },
+  "homepage": "https://github.com/codellyson/framely#readme",
+  "author": "codellyson",
+  "keywords": [
+    "framely",
+    "video",
+    "react",
+    "create",
+    "scaffold"
+  ],
+  "license": "MIT"
+}

package/template/framely.config.js

@@ -0,0 +1,19 @@
+/**
+ * Framely Configuration
+ *
+ * Uncomment and modify settings as needed.
+ * See https://github.com/codellyson/framely#readme for documentation.
+ */
+
+export default {
+  // Rendering
+  // codec: 'h264',
+  // crf: 18,
+  // fps: 30,
+
+  // Output
+  // outputDir: './outputs',
+
+  // Studio
+  // studioPort: 3000,
+};

package/template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "framely preview",
+    "studio": "framely preview",
+    "render": "framely render",
+    "still": "framely still"
+  },
+  "dependencies": {
+    "@codellyson/framely": "^0.1.0",
+    "@codellyson/framely-cli": "^0.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/template/src/Root.jsx

@@ -0,0 +1,18 @@
+import { Composition } from '@codellyson/framely';
+import { HelloWorld } from './compositions/HelloWorld';
+
+export function Root() {
+  return (
+    <>
+      <Composition
+        id="hello-world"
+        component={HelloWorld}
+        width={1920}
+        height={1080}
+        fps={30}
+        durationInFrames={150}
+        defaultProps={{}}
+      />
+    </>
+  );
+}

package/template/src/compositions/HelloWorld.jsx

@@ -0,0 +1,52 @@
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  AbsoluteFill,
+} from '@codellyson/framely';
+
+export function HelloWorld() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 30], [0, 1], {
+    extrapolateRight: 'clamp',
+  });
+
+  const scale = spring({ frame, fps, from: 0.8, to: 1 });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: '#0f0f0f',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <div style={{ opacity, transform: `scale(${scale})`, textAlign: 'center' }}>
+        <h1
+          style={{
+            color: 'white',
+            fontSize: 80,
+            fontFamily: 'system-ui, sans-serif',
+            fontWeight: 700,
+            margin: 0,
+          }}
+        >
+          Hello, Framely!
+        </h1>
+        <p
+          style={{
+            color: '#888',
+            fontSize: 24,
+            fontFamily: 'system-ui, sans-serif',
+            marginTop: 16,
+          }}
+        >
+          Edit src/compositions/HelloWorld.jsx to get started
+        </p>
+      </div>
+    </AbsoluteFill>
+  );
+}

package/template/src/index.jsx

@@ -0,0 +1,4 @@
+import { registerRoot } from '@codellyson/framely';
+import { Root } from './Root';
+
+registerRoot(Root);