agentreel 0.1.0 → 0.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 Turn your Claude Code sessions into viral demo videos.
 
-https://github.com/user-attachments/assets/070ee610-298c-4989-8d7e-369ca495469e
+https://github.com/user-attachments/assets/474fd85d-3b35-48f4-82b8-1b337840fb51
 
 ## Install
 

package/bin/agentreel.mjs

@@ -258,7 +258,7 @@ function extractBrowserHighlights(videoPath, task) {
 
 // ── Render ──────────────────────────────────────────────────
 
-function renderVideo(props, output, musicPath) {
+async function renderVideo(props, output, musicPath) {
   const publicDir = join(ROOT, "public");
   if (!existsSync(publicDir)) mkdirSync(publicDir, { recursive: true });
   if (musicPath && existsSync(musicPath)) {
@@ -267,11 +267,33 @@ function renderVideo(props, output, musicPath) {
 
   const absOutput = resolve(output);
   const propsJSON = JSON.stringify(props);
-  const remotion = join(ROOT, "node_modules", ".bin", "remotion");
 
-  execFileSync(remotion, ["render", "CastVideo", absOutput, "--props", propsJSON], {
-    cwd: ROOT,
-    stdio: ["ignore", "inherit", "inherit"],
+  // Render using Remotion's Node.js API — no CLI binary needed
+  const { bundle } = await import("@remotion/bundler");
+  const { renderMedia, selectComposition } = await import("@remotion/renderer");
+
+  const entryPoint = join(ROOT, "src", "index.ts");
+
+  console.error("  Bundling...");
+  const serveUrl = await bundle({
+    entryPoint,
+    webpackOverride: (config) => config,
+  });
+
+  console.error("  Selecting composition...");
+  const composition = await selectComposition({
+    serveUrl,
+    id: "CastVideo",
+    inputProps: props,
+  });
+
+  console.error("  Rendering...");
+  await renderMedia({
+    composition,
+    serveUrl,
+    codec: "h264",
+    outputLocation: absOutput,
+    inputProps: props,
   });
 
   const size = statSync(absOutput).size;
@@ -413,7 +435,7 @@ async function main() {
     console.error(`  ${highlights.length} highlights extracted`);
 
     console.error("Step 3/3: Rendering video...");
-    renderVideo({
+    await renderVideo({
       title: videoTitle,
       subtitle: prompt,
       highlights,
@@ -443,7 +465,7 @@ async function main() {
     console.error(`  ${highlights.length} highlights extracted`);
 
     console.error("Step 3/3: Rendering video...");
-    renderVideo({
+    await renderVideo({
       title: videoTitle,
       subtitle: prompt,
       highlights,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentreel",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Turn Claude Code sessions into viral demo videos",
   "bin": {
     "agentreel": "./bin/agentreel.mjs"
@@ -10,6 +10,8 @@
     "render": "remotion render CastVideo out/cast.mp4"
   },
   "dependencies": {
+    "@remotion/bundler": "^4",
+    "@remotion/renderer": "^4",
     "@remotion/cli": "^4",
     "remotion": "^4",
     "react": "^18",
@@ -32,5 +34,12 @@
     "type": "git",
     "url": "git+https://github.com/islo-labs/agentreel.git"
   },
-  "keywords": ["cli", "demo", "video", "claude", "agent", "remotion"]
+  "keywords": [
+    "cli",
+    "demo",
+    "video",
+    "claude",
+    "agent",
+    "remotion"
+  ]
 }

package/src/CastVideo.tsx

@@ -101,6 +101,23 @@ export const CastVideo: React.FC<CastProps> = ({
       {/* Subtle animated glow blobs in background */}
       <AnimatedBackground frame={frame} duration={durationInFrames} />
 
+      {/* Global watermark — always visible */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 28,
+          width: "100%",
+          textAlign: "center",
+          zIndex: 5,
+          fontFamily: MONO,
+          fontSize: 12,
+          color: "rgba(255,255,255,0.18)",
+          letterSpacing: 2,
+        }}
+      >
+        made with ♥ by agentreel
+      </div>
+
       <MusicTrack />
 
       <Sequence durationInFrames={titleFrames}>
@@ -993,7 +1010,7 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
           letterSpacing: 3,
         }}
       >
-        MADE WITH AGENTREEL
+        made with ♥ by agentreel
       </div>
     </AbsoluteFill>
   );