framecode 1.0.0

package/src/annotations/Error.tsx

@@ -0,0 +1,76 @@
+import { InlineAnnotation, AnnotationHandler, InnerToken } from "codehike/code";
+import { interpolate, useCurrentFrame } from "remotion";
+import { useThemeColors } from "../calculate-metadata/theme";
+import { mix, readableColor } from "polished";
+
+export const errorInline: AnnotationHandler = {
+  name: "error",
+  transform: (annotation: InlineAnnotation) => {
+    const { query, lineNumber, data } = annotation;
+    return [
+      annotation,
+      {
+        name: "error-message",
+        query,
+        fromLineNumber: lineNumber,
+        toLineNumber: lineNumber,
+        data,
+      },
+    ];
+  },
+  Inline: ({ children }) => (
+    <span
+      style={{
+        // @ts-expect-error - React types
+        "--decoration": "underline wavy red",
+      }}
+    >
+      {children}
+    </span>
+  ),
+  Token: (props) => {
+    return (
+      <InnerToken
+        merge={props}
+        style={{
+          textDecoration: "var(--decoration)",
+        }}
+      />
+    );
+  },
+};
+
+export const errorMessage: AnnotationHandler = {
+  name: "error-message",
+  Block: ({ annotation, children }) => {
+    const frame = useCurrentFrame();
+    const opacity = interpolate(frame, [25, 35], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    });
+    const themeColors = useThemeColors();
+
+    const color = readableColor(themeColors.background);
+    const calloutColor = mix(0.08, color, themeColors.background);
+
+    return (
+      <>
+        {children}
+        <div
+          style={{
+            opacity,
+            borderLeft: "4px solid red",
+            marginLeft: "-1rem",
+            backgroundColor: calloutColor,
+            padding: "1rem 2rem",
+            marginTop: "0.5rem",
+            whiteSpace: "pre-wrap",
+            color: themeColors.editor.foreground,
+          }}
+        >
+          {annotation.data?.children || annotation.query}
+        </div>
+      </>
+    );
+  },
+};

package/src/annotations/Focus.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { AnnotationHandler, InnerLine, HighlightedCode } from "codehike/code";
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+function buildFocusedLines(
+  annotations: HighlightedCode["annotations"],
+): Set<number> {
+  const lines = new Set<number>();
+  for (const ann of annotations) {
+    if (ann.name === "focus" && "fromLineNumber" in ann) {
+      const from = ann.fromLineNumber as number;
+      const to = (ann.toLineNumber as number) ?? from;
+      for (let i = from; i <= to; i++) lines.add(i);
+    }
+  }
+  return lines;
+}
+
+export function useFocusHandler(code: HighlightedCode): AnnotationHandler {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const focusedLines = useMemo(
+    () => buildFocusedLines(code.annotations),
+    [code.annotations],
+  );
+
+  const hasFocus = focusedLines.size > 0;
+
+  const progress = hasFocus
+    ? spring({ frame, fps, config: { damping: 20, stiffness: 100 } })
+    : 0;
+  const blur = interpolate(progress, [0, 1], [0, 3]);
+  const dimOpacity = interpolate(progress, [0, 1], [1, 0.4]);
+
+  return useMemo(
+    () => ({
+      name: "focus",
+      Line: hasFocus
+        ? (props) => (
+            <InnerLine
+              merge={props}
+              style={{
+                filter: focusedLines.has(props.lineNumber)
+                  ? "none"
+                  : `blur(${blur}px)`,
+                opacity: focusedLines.has(props.lineNumber) ? 1 : dimOpacity,
+                display: "block",
+              }}
+            />
+          )
+        : undefined,
+    }),
+    [hasFocus, focusedLines, blur, dimOpacity],
+  );
+}

package/src/annotations/InlineToken.tsx

@@ -0,0 +1,8 @@
+import { AnnotationHandler, InnerToken } from "codehike/code";
+
+export const tokenTransitions: AnnotationHandler = {
+  name: "token-transitions",
+  Token: ({ ...props }) => (
+    <InnerToken merge={props} style={{ display: "inline-block" }} />
+  ),
+};

package/src/annotations/Mark.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from "react";
+import { AnnotationHandler, InnerLine } from "codehike/code";
+import { interpolate, useCurrentFrame } from "remotion";
+import { useThemeColors } from "../calculate-metadata/theme";
+
+const DEFAULT_MARK_COLOR = "rgb(14, 165, 233)";
+
+function withAlpha(color: string, percent: number): string {
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}
+
+function stripAlpha(color: string): string {
+  if (color.startsWith("#")) {
+    if (color.length === 9) return color.slice(0, 7);
+    if (color.length === 5) return color.slice(0, 4);
+  }
+  return color;
+}
+
+export type GetLineProgress = (lineNumber: number) => number;
+
+export function useMarkHandler(
+  getLineProgress: GetLineProgress,
+): AnnotationHandler {
+  const themeColors = useThemeColors();
+  const themeSelectionBg = themeColors.editor.selectionBackground;
+
+  const defaultColors = useMemo(
+    () => ({
+      border: stripAlpha(themeSelectionBg) || DEFAULT_MARK_COLOR,
+      background: themeSelectionBg || withAlpha(DEFAULT_MARK_COLOR, 15),
+      inlineBackground: themeSelectionBg || withAlpha(DEFAULT_MARK_COLOR, 20),
+    }),
+    [themeSelectionBg],
+  );
+
+  return useMemo(
+    () => ({
+      name: "mark",
+      AnnotatedLine: ({ annotation, ...props }) => {
+        const progress = getLineProgress(props.lineNumber);
+        const queryColor = annotation.query;
+
+        const borderColor = queryColor || defaultColors.border;
+        const backgroundColor = queryColor
+          ? withAlpha(queryColor, 15)
+          : defaultColors.background;
+
+        return (
+          <div
+            style={{
+              opacity: progress,
+              borderLeft: `solid 2px ${borderColor}`,
+              backgroundColor,
+            }}
+          >
+            <InnerLine merge={props} style={{ padding: "0 0.5ch" }} />
+          </div>
+        );
+      },
+      Inline: ({ annotation, children }) => {
+        const queryColor = annotation?.query;
+        const background = queryColor
+          ? withAlpha(queryColor, 20)
+          : defaultColors.inlineBackground;
+
+        return (
+          <span style={{ background, borderRadius: "2px", padding: "1px 3px" }}>
+            {children}
+          </span>
+        );
+      },
+    }),
+    [getLineProgress, defaultColors],
+  );
+}
+
+const MARK_FADE_START = 20;
+const MARK_FADE_END = 30;
+
+export function useMorphMarkHandler(): AnnotationHandler {
+  const frame = useCurrentFrame();
+  const progress = interpolate(
+    frame,
+    [MARK_FADE_START, MARK_FADE_END],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    },
+  );
+
+  return useMarkHandler(() => progress);
+}

package/src/calculate-metadata/calculate-metadata.tsx

@@ -0,0 +1,119 @@
+import { z } from "zod";
+import { CalculateMetadataFunction } from "remotion";
+import { getThemeColors } from "./theme";
+import { Props, CodeStep, Animation } from "../Main";
+import { schema, presetDimensions, stepConfigSchema } from "./schema";
+import { processSnippetSimple } from "./process-snippet";
+import { getFilesFromStudio } from "./get-files";
+import { tabSize, CHAR_WIDTH_RATIO } from "../font";
+import { flattenCode } from "../TypewriterTransition";
+import {
+  calculateStepFontSize,
+  calculateStepDuration,
+} from "../shared/calculations";
+
+type StepConfig = z.infer<typeof stepConfigSchema>;
+
+export const calculateMetadata: CalculateMetadataFunction<
+  z.infer<typeof schema> & Props
+> = async ({ props }) => {
+  const preset = presetDimensions[props.preset];
+  const finalWidth = preset.width;
+  const finalHeight = preset.height;
+
+  // If steps are already provided (from CLI processing), use them directly
+  if (props.steps && props.themeColors && props.codeWidth !== null) {
+    const durationInFrames = props.steps.reduce(
+      (sum, step) => sum + step.durationInFrames,
+      0,
+    );
+
+    return {
+      durationInFrames,
+      width: finalWidth,
+      height: finalHeight,
+      props: {
+        theme: props.theme,
+        preset: props.preset,
+        animation: props.animation,
+        charsPerSecond: props.charsPerSecond,
+        brand: props.brand,
+        steps: props.steps,
+        themeColors: props.themeColors,
+        codeWidth: props.codeWidth,
+      },
+    };
+  }
+
+  // Studio dev mode: process files without twoslash (browser context)
+  const contents = props.files ?? (await getFilesFromStudio());
+  const themeColors = await getThemeColors(props.theme);
+
+  const stepConfigMap = new Map<string, StepConfig>();
+  if (props.stepConfigs) {
+    for (const config of props.stepConfigs) {
+      stepConfigMap.set(config.file, config);
+    }
+  }
+
+  const steps: CodeStep[] = [];
+  for (const snippet of contents) {
+    const code = await processSnippetSimple(snippet, props.theme);
+    const fontSize = calculateStepFontSize(
+      snippet.value,
+      finalWidth,
+      finalHeight,
+    );
+    const charCount = flattenCode(code).length;
+    const lineCount = snippet.value.split("\n").length;
+
+    const stepConfig = stepConfigMap.get(snippet.filename);
+    const stepAnimation: Animation = stepConfig?.animation ?? props.animation;
+    const stepCps = stepConfig?.charsPerSecond ?? props.charsPerSecond;
+
+    const durationInFrames = calculateStepDuration(
+      charCount,
+      lineCount,
+      stepAnimation,
+      stepCps,
+    );
+    steps.push({
+      code,
+      fontSize,
+      durationInFrames,
+      animation: stepAnimation,
+      charsPerSecond: stepCps,
+    });
+  }
+
+  const maxCharacters = Math.max(
+    ...contents
+      .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 {
+    durationInFrames,
+    width: finalWidth,
+    height: finalHeight,
+    props: {
+      theme: props.theme,
+      preset: props.preset,
+      animation: props.animation,
+      charsPerSecond: props.charsPerSecond,
+      brand: props.brand,
+      steps,
+      themeColors,
+      codeWidth,
+    },
+  };
+};

package/src/calculate-metadata/get-files.ts

@@ -0,0 +1,18 @@
+import { getStaticFiles } from "@remotion/studio";
+
+export type StaticFile = {
+  filename: string;
+  value: string;
+};
+
+export const getFilesFromStudio = async (): Promise<StaticFile[]> => {
+  const files = getStaticFiles();
+
+  const contents = files.map(async (file): Promise<StaticFile> => {
+    const res = await fetch(file.src);
+    const text = await res.text();
+    return { filename: file.name, value: text };
+  });
+
+  return Promise.all(contents);
+};

package/src/calculate-metadata/process-snippet.ts

@@ -0,0 +1,21 @@
+import { highlight } from "codehike/code";
+import { StaticFile } from "./get-files";
+import { Theme, loadTheme } from "./theme";
+
+export const processSnippetSimple = async (step: StaticFile, theme: Theme) => {
+  const splitted = step.filename.split(".");
+  const extension = splitted[splitted.length - 1];
+
+  const shikiTheme = await loadTheme(theme);
+
+  const highlighted = await highlight(
+    {
+      lang: extension,
+      meta: step.filename,
+      value: step.value,
+    },
+    shikiTheme,
+  );
+
+  return highlighted;
+};

package/src/calculate-metadata/schema.ts

@@ -0,0 +1,47 @@
+import { z } from "zod";
+import { themeSchema } from "./theme";
+
+export { themeSchema };
+
+export const presetSchema = z.enum(["post", "tutorial", "square"]);
+
+export const presetDimensions = {
+  post: { width: 720, height: 1280 },
+  tutorial: { width: 1920, height: 1080 },
+  square: { width: 1080, height: 1080 },
+} as const;
+
+export const animationSchema = z.enum(["morph", "typewriter", "cascade"]);
+
+export const fileSchema = z.object({
+  filename: z.string(),
+  value: z.string(),
+});
+
+export const brandSchema = z.object({
+  logo: z.string().min(1).optional(),
+  twitter: z.string().min(1).optional(),
+  website: z.string().min(1).optional(),
+  accent: z
+    .string()
+    .regex(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)
+    .optional(),
+});
+
+export type BrandConfig = z.infer<typeof brandSchema>;
+
+export const stepConfigSchema = z.object({
+  file: z.string(),
+  animation: animationSchema.optional(),
+  charsPerSecond: z.number().int().positive().optional(),
+});
+
+export const schema = z.object({
+  theme: themeSchema,
+  preset: presetSchema.default("tutorial"),
+  animation: animationSchema.default("morph"),
+  charsPerSecond: z.number().int().positive().default(30),
+  brand: brandSchema.optional(),
+  files: z.array(fileSchema).optional(),
+  stepConfigs: z.array(stepConfigSchema).optional(),
+});