framecode 1.0.0

package/src/cli/utils/logger.ts

@@ -0,0 +1,36 @@
+import chalk from "chalk";
+
+export const logger = {
+  info: (msg: string) => console.log(chalk.blue("ℹ"), msg),
+  success: (msg: string) => console.log(chalk.green("✔"), msg),
+  error: (msg: string) => console.error(chalk.red("✖"), msg),
+  warn: (msg: string) => console.warn(chalk.yellow("⚠"), msg),
+};
+
+export class ProgressBar {
+  private width = 30;
+  private label: string;
+  private lastPct = -1;
+
+  constructor(label: string) {
+    this.label = label;
+  }
+
+  update(progress: number) {
+    const pct = Math.round(progress * 100);
+    if (pct === this.lastPct) return;
+    this.lastPct = pct;
+
+    const filled = Math.round(this.width * progress);
+    const empty = this.width - filled;
+    const bar = chalk.blue("█").repeat(filled) + chalk.gray("░").repeat(empty);
+
+    process.stdout.write(`\r${chalk.blue("ℹ")} ${this.label} ${bar} ${pct}%`);
+
+    if (pct === 100) process.stdout.write("\n");
+  }
+
+  clear() {
+    process.stdout.write("\r" + " ".repeat(60) + "\r");
+  }
+}

package/src/cli/utils/process-code.ts

@@ -0,0 +1,196 @@
+import { highlight, HighlightedCode } from "codehike/code";
+import { createTwoslasher } from "twoslash";
+import type { z } from "zod";
+import type { StaticFile } from "../../calculate-metadata/get-files";
+import type {
+  animationSchema,
+  stepConfigSchema,
+} from "../../calculate-metadata/schema";
+import {
+  Theme,
+  loadTheme,
+  getThemeColors,
+  ThemeColors,
+} from "../../calculate-metadata/theme";
+import { tabSize, CHAR_WIDTH_RATIO } from "../../font";
+import {
+  calculateStepFontSize,
+  calculateStepDuration,
+} from "../../shared/calculations";
+import ts from "typescript";
+
+export type Animation = z.infer<typeof animationSchema>;
+export type StepConfig = z.infer<typeof stepConfigSchema>;
+
+export type CodeStep = {
+  code: HighlightedCode;
+  fontSize: number;
+  durationInFrames: number;
+  animation: Animation;
+  charsPerSecond: number;
+};
+
+export type ProcessedCode = {
+  steps: CodeStep[];
+  themeColors: ThemeColors;
+  codeWidth: number;
+  durationInFrames: number;
+};
+
+const compilerOptions = {
+  lib: ["dom", "es2023"],
+  jsx: ts.JsxEmit.React,
+  target: ts.ScriptTarget.ES2022,
+  module: ts.ModuleKind.ESNext,
+};
+
+let twoslasher: ReturnType<typeof createTwoslasher> | null = null;
+
+function getTwoslasher() {
+  if (!twoslasher) {
+    twoslasher = createTwoslasher({ compilerOptions });
+  }
+  return twoslasher;
+}
+
+function countChars(code: HighlightedCode): number {
+  let count = 0;
+  for (const token of code.tokens) {
+    if (typeof token === "string") {
+      count += token.length;
+    } else {
+      count += token[0].length;
+    }
+  }
+  return count;
+}
+
+async function processSnippet(
+  step: StaticFile,
+  shikiTheme: Awaited<ReturnType<typeof loadTheme>>,
+): Promise<HighlightedCode> {
+  const splitted = step.filename.split(".");
+  const extension = splitted[splitted.length - 1];
+
+  let code = step.value;
+  let twoslashResult = null;
+
+  if (extension === "ts" || extension === "tsx") {
+    try {
+      twoslashResult = getTwoslasher()(code, extension, { compilerOptions });
+      code = twoslashResult.code;
+    } catch {
+      // If twoslash fails, just use the original code
+    }
+  }
+
+  const highlighted = await highlight(
+    {
+      lang: extension,
+      meta: step.filename,
+      value: code,
+    },
+    shikiTheme,
+  );
+
+  if (!twoslashResult) {
+    return highlighted;
+  }
+
+  for (const { text, line, character, length } of twoslashResult.queries) {
+    const codeblock = await highlight(
+      { value: text, lang: "ts", meta: "callout" },
+      shikiTheme,
+    );
+    highlighted.annotations.push({
+      name: "callout",
+      query: text,
+      lineNumber: line + 1,
+      data: { character, codeblock },
+      fromColumn: character,
+      toColumn: character + length,
+    });
+  }
+
+  for (const { text, line, character, length } of twoslashResult.errors) {
+    highlighted.annotations.push({
+      name: "error",
+      query: text,
+      lineNumber: line + 1,
+      data: { character },
+      fromColumn: character,
+      toColumn: character + length,
+    });
+  }
+
+  return highlighted;
+}
+
+export async function processCode(
+  files: StaticFile[],
+  theme: Theme,
+  animation: Animation,
+  charsPerSecond: number,
+  width: number,
+  height: number,
+  stepConfigs?: StepConfig[],
+): Promise<ProcessedCode> {
+  const shikiTheme = await loadTheme(theme);
+  const themeColors = await getThemeColors(theme);
+
+  const stepConfigMap = new Map<string, StepConfig>();
+  if (stepConfigs) {
+    for (const config of stepConfigs) {
+      stepConfigMap.set(config.file, config);
+    }
+  }
+
+  const steps = await Promise.all(
+    files.map(async (file) => {
+      const code = await processSnippet(file, shikiTheme);
+      const fontSize = calculateStepFontSize(file.value, width, height);
+      const charCount = countChars(code);
+      const lineCount = file.value.split("\n").length;
+
+      const stepConfig = stepConfigMap.get(file.filename);
+      const stepAnimation = stepConfig?.animation ?? animation;
+      const stepCps = stepConfig?.charsPerSecond ?? charsPerSecond;
+
+      const durationInFrames = calculateStepDuration(
+        charCount,
+        lineCount,
+        stepAnimation,
+        stepCps,
+      );
+      return {
+        code,
+        fontSize,
+        durationInFrames,
+        animation: stepAnimation,
+        charsPerSecond: stepCps,
+      };
+    }),
+  );
+
+  const maxCharacters = Math.max(
+    ...files
+      .map(({ value }) => value.split("\n"))
+      .flat()
+      .map((value) => value.replaceAll("\t", " ".repeat(tabSize)).length),
+  );
+
+  const maxFontSize = Math.max(...steps.map((s) => s.fontSize));
+  const codeWidth = maxFontSize * CHAR_WIDTH_RATIO * maxCharacters;
+
+  const durationInFrames = steps.reduce(
+    (sum, step) => sum + step.durationInFrames,
+    0,
+  );
+
+  return {
+    steps,
+    themeColors,
+    codeWidth,
+    durationInFrames,
+  };
+}

package/src/cli/utils/prompts.ts

@@ -0,0 +1,338 @@
+import * as p from "@clack/prompts";
+import chalk from "chalk";
+import { basename } from "path";
+import { themeSchema } from "../../calculate-metadata/theme";
+import {
+  animationSchema,
+  presetSchema,
+  presetDimensions,
+} from "../../calculate-metadata/schema";
+import { saveConfig, type Config } from "./config";
+import type { StepConfig } from "./process-code";
+
+export interface InteractiveOptions {
+  files: string[];
+  theme?: string;
+  animation?: string;
+  preset?: string;
+  output?: string;
+  cps?: number;
+  fps?: number;
+  yes?: boolean;
+  config?: Config;
+}
+
+export interface InteractiveResult {
+  files: string[];
+  theme: string;
+  animation: string;
+  preset: string;
+  output: string;
+  cps: number;
+  fps: number;
+  stepConfigs?: StepConfig[];
+}
+
+const THEMES = themeSchema.options;
+const ANIMATIONS = animationSchema.options;
+const PRESETS = presetSchema.options;
+
+const POPULAR_THEMES = [
+  "vercel-dark",
+  "story-gradients",
+  "retro-terminal",
+  "github-dark",
+  "synthwave-84",
+  "dracula",
+  "tokyo-night",
+  "catppuccin-mocha",
+] as const;
+
+function getFileSize(filePath: string): string {
+  try {
+    const file = Bun.file(filePath);
+    const bytes = file.size;
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  } catch {
+    return "?";
+  }
+}
+
+export async function runInteractive(
+  opts: InteractiveOptions,
+): Promise<InteractiveResult> {
+  p.intro(chalk.bgCyan.black(" framecode "));
+
+  const needsFilePrompt = opts.files.length > 1;
+  const needsOutputPrompt = opts.output === "output.mp4";
+
+  const defaultTheme = opts.theme ?? opts.config?.theme ?? "vercel-dark";
+  const defaultAnimation = opts.animation ?? opts.config?.animation ?? "morph";
+  const defaultPreset = opts.preset ?? opts.config?.preset ?? "tutorial";
+
+  const group = await p.group(
+    {
+      files: () =>
+        needsFilePrompt
+          ? p.multiselect({
+              message: "Select files to render",
+              options: opts.files.map((file) => ({
+                value: file,
+                label: file,
+                hint: getFileSize(file),
+              })),
+              required: true,
+            })
+          : Promise.resolve(opts.files),
+
+      theme: () => promptThemeSelect(defaultTheme),
+
+      animation: () =>
+        p.select({
+          message: "Pick an animation",
+          initialValue: defaultAnimation,
+          options: ANIMATIONS.map((a) => ({
+            value: a as string,
+            label: a,
+            hint:
+              a === "morph"
+                ? "smooth transitions"
+                : a === "typewriter"
+                  ? "character reveal"
+                  : "line-by-line",
+          })),
+        }),
+
+      preset: () =>
+        p.select({
+          message: "Pick a preset",
+          initialValue: defaultPreset,
+          options: PRESETS.map((pr) => {
+            const dims = presetDimensions[pr];
+            return {
+              value: pr as string,
+              label: pr,
+              hint: `${dims.width}x${dims.height}`,
+            };
+          }),
+        }),
+
+      output: ({ results }) =>
+        needsOutputPrompt
+          ? p.text({
+              message: "Output file",
+              initialValue: `${(results.files as string[])[0].replace(/\.[^/.]+$/, "")}.mp4`,
+              validate: (value) => {
+                if (!value) return "Output path required";
+                if (!value.endsWith(".mp4")) return "Must end with .mp4";
+              },
+            })
+          : Promise.resolve(null),
+    },
+    {
+      onCancel: () => {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+      },
+    },
+  );
+
+  const selectedFiles = group.files as string[];
+  const theme = group.theme as string;
+  const animation = group.animation as string;
+  const preset = group.preset as string;
+  const output = (group.output as string | null) ?? opts.output ?? "output.mp4";
+  const cps = opts.cps ?? opts.config?.charsPerSecond ?? 30;
+  const fps = opts.fps ?? opts.config?.fps ?? 30;
+
+  const result: InteractiveResult = {
+    files: selectedFiles,
+    theme,
+    animation,
+    preset,
+    output,
+    cps,
+    fps,
+  };
+
+  const dims = presetDimensions[preset as keyof typeof presetDimensions];
+
+  let stepConfigs: StepConfig[] | undefined;
+
+  if (selectedFiles.length > 1) {
+    const configurePerStep = await p.confirm({
+      message: "Configure animation per file?",
+      initialValue: false,
+    });
+
+    if (p.isCancel(configurePerStep)) {
+      p.cancel("Operation cancelled.");
+      process.exit(0);
+    }
+
+    if (configurePerStep) {
+      stepConfigs = await promptPerStepConfig(selectedFiles, animation, cps);
+    }
+  }
+
+  if (!opts.yes) {
+    const summaryLines = [
+      `${chalk.dim("Files:")}     ${selectedFiles.join(", ")}`,
+      `${chalk.dim("Theme:")}     ${theme}`,
+      `${chalk.dim("Animation:")} ${animation}`,
+      `${chalk.dim("Preset:")}    ${preset} (${dims.width}x${dims.height})`,
+      `${chalk.dim("Output:")}    ${output}`,
+      `${chalk.dim("CPS:")}       ${cps}`,
+      `${chalk.dim("FPS:")}       ${fps}`,
+    ];
+
+    if (stepConfigs && stepConfigs.length > 0) {
+      summaryLines.push("");
+      summaryLines.push(chalk.dim("Per-file overrides:"));
+      for (const sc of stepConfigs) {
+        const parts = [`  ${sc.file}:`];
+        if (sc.animation) parts.push(`animation=${sc.animation}`);
+        if (sc.charsPerSecond) parts.push(`cps=${sc.charsPerSecond}`);
+        summaryLines.push(parts.join(" "));
+      }
+    }
+
+    p.note(summaryLines.join("\n"), "Summary");
+
+    const confirmed = await p.confirm({
+      message: "Proceed with render?",
+      initialValue: true,
+    });
+
+    if (p.isCancel(confirmed) || !confirmed) {
+      p.cancel("Render cancelled");
+      process.exit(0);
+    }
+  }
+
+  const configChanged =
+    theme !== opts.config?.theme ||
+    animation !== opts.config?.animation ||
+    preset !== opts.config?.preset;
+
+  if (configChanged) {
+    const saved = await saveConfig({
+      theme: theme as Config["theme"],
+      animation: animation as Config["animation"],
+      preset: preset as Config["preset"],
+    });
+    if (saved) {
+      p.log.info(chalk.dim("Settings saved to config"));
+    }
+  }
+
+  return { ...result, stepConfigs };
+}
+
+async function promptPerStepConfig(
+  files: string[],
+  defaultAnimation: string,
+  defaultCps: number,
+): Promise<StepConfig[]> {
+  const stepConfigs: StepConfig[] = [];
+
+  for (const filePath of files) {
+    const filename = basename(filePath);
+
+    p.log.step(`Configure ${chalk.cyan(filename)}`);
+
+    const stepAnimation = await p.select({
+      message: `Animation for ${filename}`,
+      options: [
+        { value: "__default__", label: `Use default (${defaultAnimation})` },
+        ...ANIMATIONS.map((a) => ({
+          value: a as string,
+          label: a,
+          hint:
+            a === "morph"
+              ? "smooth transitions"
+              : a === "typewriter"
+                ? "character reveal"
+                : a === "cascade"
+                  ? "line-by-line"
+                  : "spotlight effect",
+        })),
+      ],
+    });
+
+    if (p.isCancel(stepAnimation)) {
+      p.cancel("Operation cancelled.");
+      process.exit(0);
+    }
+
+    const animationValue =
+      stepAnimation === "__default__" ? undefined : (stepAnimation as string);
+
+    let cpsValue: number | undefined;
+
+    if (animationValue === "typewriter") {
+      const stepCps = await p.text({
+        message: `Chars per second for ${filename}`,
+        initialValue: String(defaultCps),
+        validate: (value) => {
+          const num = Number(value);
+          if (isNaN(num) || num <= 0) return "Must be a positive number";
+        },
+      });
+
+      if (p.isCancel(stepCps)) {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+      }
+
+      cpsValue = Number(stepCps);
+      if (cpsValue === defaultCps) cpsValue = undefined;
+    }
+
+    if (animationValue || cpsValue) {
+      stepConfigs.push({
+        file: filename,
+        animation: animationValue as StepConfig["animation"],
+        charsPerSecond: cpsValue,
+      });
+    }
+  }
+
+  return stepConfigs;
+}
+
+async function promptThemeSelect(defaultTheme: string): Promise<string> {
+  const isPopular = POPULAR_THEMES.includes(
+    defaultTheme as (typeof POPULAR_THEMES)[number],
+  );
+
+  const theme = await p.select({
+    message: "Pick a theme",
+    initialValue: isPopular ? defaultTheme : "__more__",
+    options: [
+      ...POPULAR_THEMES.map((t) => ({ value: t as string, label: t })),
+      { value: "__more__", label: chalk.dim("More themes...") },
+    ],
+  });
+
+  if (theme === "__more__") {
+    const allTheme = await p.autocomplete({
+      message: "Pick a theme (all)",
+      options: THEMES.map((t) => ({ value: t as string, label: t })),
+      initialValue: defaultTheme,
+    });
+    return allTheme as string;
+  }
+
+  return theme as string;
+}
+
+export function createRenderSpinner() {
+  return p.spinner();
+}
+
+export function renderOutro(output: string) {
+  p.outro(chalk.green(`Video saved to ${output}`));
+}

package/src/font.ts

@@ -0,0 +1,13 @@
+import { loadFont } from "@remotion/google-fonts/RobotoMono";
+
+export const { fontFamily, waitUntilDone } = loadFont("normal", {
+  subsets: ["latin"],
+  weights: ["400", "700"],
+});
+export const fontSize = 40;
+export const minFontSize = 20;
+export const tabSize = 3;
+export const horizontalPadding = 60;
+export const verticalPadding = 84;
+export const CHAR_WIDTH_RATIO = 0.6;
+export const LINE_HEIGHT = 1.5;

package/src/index.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-black: #000000;
+  --color-brand-indigo: #6366f1;
+  --color-brand-pink: #ec4899;
+
+  --color-primary: var(--color-brand-indigo);
+  --color-secondary: var(--color-brand-pink);
+  --color-background: var(--color-brand-black);
+
+  --font-sans: "Geist Variable", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+}

package/src/index.ts

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

package/src/shared/calculations.ts

@@ -0,0 +1,58 @@
+import {
+  fontSize as baseFontSize,
+  minFontSize,
+  horizontalPadding,
+  verticalPadding,
+  tabSize,
+  CHAR_WIDTH_RATIO,
+  LINE_HEIGHT,
+} from "../font";
+
+const FPS = 30;
+const BASE_STEP_DURATION = 90;
+const CASCADE_STAGGER_DELAY = 3;
+
+export function calculateStepFontSize(
+  content: string,
+  width: number,
+  height: number,
+): number {
+  const lines = content.split("\n");
+  const lineCount = lines.length;
+  const maxChars = Math.max(
+    ...lines.map((line) => line.replaceAll("\t", " ".repeat(tabSize)).length),
+  );
+
+  const availableHeight = height - verticalPadding * 2;
+  const availableWidth = width - horizontalPadding * 2;
+
+  const maxFontSizeByLines = availableHeight / (lineCount * LINE_HEIGHT);
+  const maxFontSizeByWidth =
+    maxChars > 0
+      ? availableWidth / (maxChars * CHAR_WIDTH_RATIO)
+      : baseFontSize;
+
+  return Math.max(
+    minFontSize,
+    Math.min(
+      baseFontSize,
+      Math.floor(Math.min(maxFontSizeByLines, maxFontSizeByWidth)),
+    ),
+  );
+}
+
+export function calculateStepDuration(
+  charCount: number,
+  lineCount: number,
+  animation: string,
+  charsPerSecond: number,
+): number {
+  switch (animation) {
+    case "typewriter":
+      return Math.ceil((charCount / charsPerSecond) * FPS) + FPS;
+    case "cascade":
+      return lineCount * CASCADE_STAGGER_DELAY + FPS;
+    default:
+      return BASE_STEP_DURATION;
+  }
+}

package/src/utils.ts

@@ -0,0 +1,28 @@
+import { TokenTransition } from "codehike/utils/token-transitions";
+import { interpolate, interpolateColors } from "remotion";
+
+export function applyStyle({
+  element,
+  keyframes,
+  progress,
+  linearProgress,
+}: {
+  element: HTMLElement;
+  keyframes: TokenTransition["keyframes"];
+  progress: number;
+  linearProgress: number;
+}) {
+  const { translateX, translateY, color, opacity } = keyframes;
+
+  if (opacity) {
+    element.style.opacity = linearProgress.toString();
+  }
+  if (color && color[0].length && color[1].length) {
+    element.style.color = interpolateColors(progress, [0, 1], color);
+  }
+  const hasValidX = translateX && translateX.every((v) => Number.isFinite(v));
+  const hasValidY = translateY && translateY.every((v) => Number.isFinite(v));
+  const x = hasValidX ? interpolate(progress, [0, 1], translateX) : 0;
+  const y = hasValidY ? interpolate(progress, [0, 1], translateY) : 0;
+  element.style.translate = `${x}px ${y}px`;
+}