@thinkable-labs/lower-third-generator 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { renderLowerThird, renderBatch } from "./renderer";
+export type { RenderOptions, RenderResult, BatchOptions, BatchResult, BatchProgressCallback, } from "./renderer";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderBatch = exports.renderLowerThird = void 0;
+var renderer_1 = require("./renderer");
+Object.defineProperty(exports, "renderLowerThird", { enumerable: true, get: function () { return renderer_1.renderLowerThird; } });
+Object.defineProperty(exports, "renderBatch", { enumerable: true, get: function () { return renderer_1.renderBatch; } });
+//# sourceMappingURL=index.js.map

package/dist/renderer.d.ts

@@ -0,0 +1,43 @@
+export interface RenderOptions {
+    text: string;
+    outputDir: string;
+    fileName?: string;
+    fps?: number;
+    durationInFrames?: number;
+    width?: number;
+    height?: number;
+}
+export interface RenderResult {
+    text: string;
+    outputPath: string;
+    durationSeconds: number;
+}
+export interface BatchOptions {
+    texts: string[];
+    outputDir: string;
+    fps?: number;
+    durationInFrames?: number;
+    width?: number;
+    height?: number;
+}
+export interface BatchResult {
+    results: RenderResult[];
+    totalCount: number;
+    successCount: number;
+    errorCount: number;
+    errors: {
+        text: string;
+        error: string;
+    }[];
+}
+export type BatchProgressCallback = (update: {
+    current: number;
+    total: number;
+    text: string;
+    status: "rendering" | "success" | "error";
+    outputPath?: string;
+    error?: string;
+}) => void;
+export declare function renderLowerThird(options: RenderOptions): Promise<RenderResult>;
+export declare function renderBatch(options: BatchOptions, onProgress?: BatchProgressCallback): Promise<BatchResult>;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderLowerThird = renderLowerThird;
+exports.renderBatch = renderBatch;
+const path_1 = __importDefault(require("path"));
+const bundler_1 = require("@remotion/bundler");
+const renderer_1 = require("@remotion/renderer");
+// ─── Sanitize filename ──────────────────────────────────────────────────────
+function sanitizeFileName(text) {
+    return text
+        .replace(/[<>:"/\\|?*]/g, "")
+        .replace(/\s+/g, "_")
+        .substring(0, 60);
+}
+// ─── Bundle cache ───────────────────────────────────────────────────────────
+let bundlePromise = null;
+async function getBundled() {
+    if (!bundlePromise) {
+        const remotionEntry = path_1.default.resolve(__dirname, "..", "remotion", "index.ts");
+        bundlePromise = (0, bundler_1.bundle)({ entryPoint: remotionEntry });
+    }
+    return bundlePromise;
+}
+// ─── Render a single lower third ────────────────────────────────────────────
+async function renderLowerThird(options) {
+    const fps = options.fps ?? 60;
+    const durationInFrames = options.durationInFrames ?? 210;
+    const width = options.width ?? 3840;
+    const height = options.height ?? 2160;
+    const fileName = options.fileName ?? `${sanitizeFileName(options.text)}.mov`;
+    const outputPath = path_1.default.join(options.outputDir, fileName);
+    const bundled = await getBundled();
+    const composition = await (0, renderer_1.selectComposition)({
+        serveUrl: bundled,
+        id: "LowerThird",
+        inputProps: { text: options.text },
+    });
+    // Override composition settings
+    composition.fps = fps;
+    composition.durationInFrames = durationInFrames;
+    composition.width = width;
+    composition.height = height;
+    await (0, renderer_1.renderMedia)({
+        composition,
+        serveUrl: bundled,
+        codec: "prores",
+        proResProfile: "4444",
+        pixelFormat: "yuva444p10le",
+        imageFormat: "png",
+        outputLocation: outputPath,
+        inputProps: { text: options.text },
+    });
+    return {
+        text: options.text,
+        outputPath,
+        durationSeconds: durationInFrames / fps,
+    };
+}
+// ─── Render a batch of lower thirds ─────────────────────────────────────────
+async function renderBatch(options, onProgress) {
+    const results = [];
+    const errors = [];
+    let successCount = 0;
+    // Pre-bundle once for all renders
+    await getBundled();
+    for (let i = 0; i < options.texts.length; i++) {
+        const text = options.texts[i];
+        onProgress?.({
+            current: i + 1,
+            total: options.texts.length,
+            text,
+            status: "rendering",
+        });
+        try {
+            const result = await renderLowerThird({
+                text,
+                outputDir: options.outputDir,
+                fps: options.fps,
+                durationInFrames: options.durationInFrames,
+                width: options.width,
+                height: options.height,
+            });
+            results.push(result);
+            successCount++;
+            onProgress?.({
+                current: i + 1,
+                total: options.texts.length,
+                text,
+                status: "success",
+                outputPath: result.outputPath,
+            });
+        }
+        catch (err) {
+            errors.push({ text, error: err?.message || String(err) });
+            onProgress?.({
+                current: i + 1,
+                total: options.texts.length,
+                text,
+                status: "error",
+                error: err?.message || String(err),
+            });
+        }
+    }
+    return {
+        results,
+        totalCount: options.texts.length,
+        successCount,
+        errorCount: errors.length,
+        errors,
+    };
+}
+//# sourceMappingURL=renderer.js.map

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@thinkable-labs/lower-third-generator",
+  "version": "1.0.0",
+  "description": "Generate lower third videos with alpha channel using Remotion",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "remotion/**/*",
+    "public/**/*",
+    "assets/**/*"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc",
+    "preview": "remotion preview remotion/index.ts",
+    "test-render": "remotion render remotion/index.ts LowerThird --output test-output.mov --codec prores --prores-profile 4444 --scale 2"
+  },
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@remotion/bundler": "^4.0.0",
+    "@remotion/cli": "^4.0.0",
+    "@remotion/renderer": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "^18.3.0",
+    "typescript": "^5.9.3"
+  }
+}

package/remotion/LowerThird.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from "react";
+import {
+  AbsoluteFill,
+  continueRender,
+  delayRender,
+  Img,
+  interpolate,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  Easing,
+} from "remotion";
+
+const FONT_FAMILY = "WoodBlockCG";
+const fontUrl = staticFile("WoodBlockCG.otf");
+
+const fontFace = `
+@font-face {
+  font-family: '${FONT_FAMILY}';
+  src: url('${fontUrl}') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+`;
+
+export interface LowerThirdProps {
+  text: string;
+}
+
+export const LowerThird: React.FC<LowerThirdProps> = ({ text }) => {
+  const [handle] = useState(() => delayRender("Loading font"));
+
+  useEffect(() => {
+    const font = new FontFace(FONT_FAMILY, `url('${fontUrl}') format('opentype')`);
+    font.load().then(() => {
+      document.fonts.add(font);
+      continueRender(handle);
+    }).catch(() => continueRender(handle));
+  }, [handle]);
+
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+
+  // ─── Animation timeline (3.5 seconds total at 60fps = 210 frames) ───
+  // 0.0s - 0.2s: Logo badge fades in
+  // 0.2s - 0.5s: Text rectangle unfolds from left to right
+  // 0.4s - 0.6s: Text fades in
+  // 0.6s - 2.5s: Hold
+  // 2.5s - 3.5s: Everything fades out
+
+  const logoFadeIn = interpolate(frame, [0, fps * 0.2], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.ease),
+  });
+
+  const barUnfold = interpolate(frame, [fps * 0.2, fps * 0.7], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const textFadeIn = interpolate(frame, [fps * 0.4, fps * 0.6], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const fadeOut = interpolate(frame, [fps * 2.5, fps * 3.5], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.in(Easing.ease),
+  });
+
+  // ─── Dimensions (4K) ───────────────────────────────────
+  // PART 1: Logo badge — circle on left, square on right
+  // The badge is a square with the left half rounded into a circle
+  const badgeSize = 300;
+  const borderWidth = badgeSize * 0.035;
+
+  // PART 2: Text rectangle — same height as badge, width fits text
+  const textBoxHeight = badgeSize;
+  const fontSize = 137;
+
+  const margin = width * 0.03;
+  const bottomMargin = height * 0.08;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "transparent" }}>
+      <style dangerouslySetInnerHTML={{ __html: fontFace }} />
+      <div
+        style={{
+          position: "absolute",
+          bottom: bottomMargin,
+          left: margin,
+          display: "flex",
+          alignItems: "center",
+          opacity: fadeOut,
+          height: badgeSize,
+        }}
+      >
+        {/* PART 1: Logo badge (circle left + square right) */}
+        <div
+          style={{
+            width: badgeSize,
+            height: badgeSize,
+            flexShrink: 0,
+            opacity: logoFadeIn,
+            zIndex: 2,
+            position: "relative",
+          }}
+        >
+          {/* Brown background: left half rounded, right half square */}
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "#B36231",
+              borderRadius: `${badgeSize / 2}px 0 0 ${badgeSize / 2}px`,
+              boxShadow: `inset 0 0 0 ${borderWidth}px #C67F2C`,
+            }}
+          />
+          {/* Circular logo on top with stroke */}
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: badgeSize * 0.75,
+              height: badgeSize * 0.75,
+              borderRadius: "50%",
+              overflow: "hidden",
+              zIndex: 3,
+              boxShadow: `0 0 0 ${borderWidth * 1.5}px #C67F2C, 0 ${badgeSize * 0.02}px ${badgeSize * 0.06}px rgba(0,0,0,0.4)`,
+            }}
+          >
+            <Img
+              src={staticFile("logo.png")}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+              }}
+            />
+          </div>
+        </div>
+
+        {/* PART 2: Text rectangle — unfolds from left to right */}
+        <div
+          style={{
+            height: textBoxHeight,
+            zIndex: 1,
+            clipPath: `inset(0 ${(1 - barUnfold) * 100}% 0 0)`,
+            marginLeft: 0,
+          }}
+        >
+          <div
+            style={{
+              height: textBoxHeight,
+              backgroundColor: "#B36231",
+              boxShadow: `inset 0 0 0 ${borderWidth}px #C67F2C`,
+              borderRadius: `0 ${borderWidth * 2}px ${borderWidth * 2}px 0`,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: fontSize * 0.6,
+              paddingRight: fontSize * 0.6,
+            }}
+          >
+            <span
+              style={{
+                color: "#FFFFFF",
+                fontSize,
+                fontWeight: "normal",
+                fontFamily: `'${FONT_FAMILY}', Arial, sans-serif`,
+                letterSpacing: fontSize * 0.02,
+                whiteSpace: "nowrap",
+                opacity: textFadeIn,
+              }}
+            >
+              {text}
+            </span>
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/remotion/Root.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Composition } from "remotion";
+import { LowerThird } from "./LowerThird";
+
+export const Root: React.FC = () => {
+  return (
+    <Composition
+      id="LowerThird"
+      // @ts-expect-error Remotion Composition typing mismatch with delayRender hooks
+      component={LowerThird}
+      durationInFrames={210}
+      fps={60}
+      width={3840}
+      height={2160}
+      defaultProps={{
+        text: "JESUS - MATTHEW 26:38",
+      }}
+    />
+  );
+};

package/remotion/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { Root } from "./Root";
+
+registerRoot(Root);