framecode 1.0.0

package/src/Main.tsx

@@ -0,0 +1,192 @@
+import { AbsoluteFill, Series } from "remotion";
+import { ProgressBar } from "./ProgressBar";
+import { CodeTransition } from "./CodeTransition";
+import { TypewriterTransition } from "./TypewriterTransition";
+import { CascadeTransition } from "./CascadeTransition";
+import { HighlightedCode } from "codehike/code";
+import {
+  ThemeColors,
+  ThemeProvider,
+  getThemeVisuals,
+} from "./calculate-metadata/theme";
+import { useMemo } from "react";
+import { RefreshOnCodeChange } from "./ReloadOnCodeChange";
+import { verticalPadding, horizontalPadding } from "./font";
+import { BrandOverlay } from "./BrandOverlay";
+
+import type { animationSchema, schema } from "./calculate-metadata/schema";
+import type { z } from "zod";
+
+export type Animation = z.infer<typeof animationSchema>;
+
+export type CodeStep = {
+  code: HighlightedCode;
+  fontSize: number;
+  durationInFrames: number;
+  animation: Animation;
+  charsPerSecond: number;
+};
+
+export type Props = {
+  steps: CodeStep[] | null;
+  themeColors: ThemeColors | null;
+  codeWidth: number | null;
+} & Omit<z.infer<typeof schema>, "steps">;
+
+export const Main: React.FC<Props> = ({
+  steps,
+  theme,
+  themeColors,
+  codeWidth,
+  brand,
+}) => {
+  if (!steps) {
+    throw new Error("Steps are not defined");
+  }
+
+  const transitionDuration = 30;
+
+  if (!themeColors) {
+    throw new Error("Theme colors are not defined");
+  }
+
+  const themeVisuals = useMemo(() => {
+    return getThemeVisuals(theme, themeColors);
+  }, [theme, themeColors]);
+
+  const backgroundStyle: React.CSSProperties = useMemo(() => {
+    return {
+      backgroundColor: themeVisuals.canvasBackground,
+      backgroundImage: themeVisuals.canvasBackgroundImage,
+      overflow: "hidden",
+    };
+  }, [themeVisuals]);
+
+  const overlayStyle: React.CSSProperties | null = useMemo(() => {
+    if (themeVisuals.overlayKind === "none") {
+      return null;
+    }
+
+    if (themeVisuals.overlayKind === "grid") {
+      return {
+        pointerEvents: "none",
+        opacity: themeVisuals.overlayOpacity,
+        backgroundImage:
+          "linear-gradient(to right, rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 1px, transparent 1px)",
+        backgroundSize: "28px 28px",
+      };
+    }
+
+    if (themeVisuals.overlayKind === "guides") {
+      return {
+        pointerEvents: "none",
+        opacity: themeVisuals.overlayOpacity,
+        backgroundImage:
+          "linear-gradient(to right, transparent 11.9%, rgba(255, 255, 255, 0.14) 11.9%, rgba(255, 255, 255, 0.14) 12.1%, transparent 12.1%, transparent 49.9%, rgba(255, 255, 255, 0.18) 49.9%, rgba(255, 255, 255, 0.18) 50.1%, transparent 50.1%, transparent 87.9%, rgba(255, 255, 255, 0.14) 87.9%, rgba(255, 255, 255, 0.14) 88.1%, transparent 88.1%), linear-gradient(to bottom, transparent 17.9%, rgba(255, 255, 255, 0.12) 17.9%, rgba(255, 255, 255, 0.12) 18.1%, transparent 18.1%, transparent 49.9%, rgba(255, 255, 255, 0.15) 49.9%, rgba(255, 255, 255, 0.15) 50.1%, transparent 50.1%, transparent 81.9%, rgba(255, 255, 255, 0.12) 81.9%, rgba(255, 255, 255, 0.12) 82.1%, transparent 82.1%), radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0.95) 0 3px, transparent 3.5px), radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.95) 0 3px, transparent 3.5px)",
+      };
+    }
+
+    return {
+      pointerEvents: "none",
+      opacity: themeVisuals.overlayOpacity,
+      backgroundImage:
+        "repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(158, 255, 182, 0.25) 3px, rgba(0, 0, 0, 0) 4px)",
+    };
+  }, [themeVisuals]);
+
+  const codeWindowStyle: React.CSSProperties = useMemo(() => {
+    return {
+      width: codeWidth || "100%",
+      maxWidth: "100%",
+      padding: `${verticalPadding}px ${horizontalPadding}px`,
+      backgroundColor: themeVisuals.codeSurface,
+      border: `1px solid ${themeVisuals.codeBorder}`,
+      borderRadius: themeVisuals.codeRadius,
+      boxShadow: themeVisuals.codeShadow,
+      overflow: "hidden",
+    };
+  }, [codeWidth, themeVisuals]);
+
+  const sequenceStyle: React.CSSProperties = useMemo(() => {
+    return {
+      display: "flex",
+      flexDirection: "column",
+      gap: themeVisuals.showFilename ? 24 : 0,
+      height: "100%",
+    };
+  }, [themeVisuals.showFilename]);
+
+  const filenameStyle: React.CSSProperties = useMemo(() => {
+    return {
+      color: themeVisuals.filenameColor,
+      fontSize: 22,
+      fontWeight: 600,
+      letterSpacing: 0.4,
+      textTransform: "lowercase",
+      opacity: 0.9,
+    };
+  }, [themeVisuals.filenameColor]);
+
+  return (
+    <ThemeProvider themeColors={themeColors}>
+      <AbsoluteFill style={backgroundStyle}>
+        {overlayStyle ? <AbsoluteFill style={overlayStyle} /> : null}
+        <ProgressBar
+          steps={steps}
+          trackColor={themeVisuals.progressTrack}
+          fillColor={brand?.accent ?? themeVisuals.accent}
+          top={themeVisuals.progressTop}
+          height={themeVisuals.progressHeight}
+          gap={themeVisuals.progressGap}
+        />
+        <AbsoluteFill
+          style={{
+            justifyContent: "center",
+            alignItems: "center",
+            padding: `${verticalPadding}px ${horizontalPadding}px`,
+          }}
+        >
+          <div style={codeWindowStyle}>
+            <Series>
+              {steps.map((step, index) => (
+                <Series.Sequence
+                  key={index}
+                  layout="none"
+                  durationInFrames={step.durationInFrames}
+                  name={step.code.meta}
+                >
+                  <div style={sequenceStyle}>
+                    {themeVisuals.showFilename ? (
+                      <div style={filenameStyle}>{step.code.meta}</div>
+                    ) : null}
+                    {step.animation === "typewriter" ? (
+                      <TypewriterTransition
+                        code={step.code}
+                        charsPerSecond={step.charsPerSecond}
+                        fontSize={step.fontSize}
+                      />
+                    ) : step.animation === "cascade" ? (
+                      <CascadeTransition
+                        code={step.code}
+                        fontSize={step.fontSize}
+                      />
+                    ) : (
+                      <CodeTransition
+                        oldCode={steps[index - 1]?.code ?? null}
+                        newCode={step.code}
+                        durationInFrames={transitionDuration}
+                        fontSize={step.fontSize}
+                      />
+                    )}
+                  </div>
+                </Series.Sequence>
+              ))}
+            </Series>
+          </div>
+        </AbsoluteFill>
+        <BrandOverlay brand={brand} />
+      </AbsoluteFill>
+      <RefreshOnCodeChange />
+    </ThemeProvider>
+  );
+};

package/src/ProgressBar.tsx

@@ -0,0 +1,112 @@
+import { useMemo } from "react";
+import { useCurrentFrame } from "remotion";
+import { useThemeColors } from "./calculate-metadata/theme";
+import { horizontalPadding } from "./font";
+import { CodeStep } from "./Main";
+import React from "react";
+
+const Step: React.FC<{
+  readonly index: number;
+  readonly currentStep: number;
+  readonly currentStepProgress: number;
+  readonly trackColor?: string;
+  readonly fillColor?: string;
+}> = ({
+  index,
+  currentStep,
+  currentStepProgress,
+  trackColor,
+  fillColor,
+}) => {
+  const themeColors = useThemeColors();
+
+  const outer: React.CSSProperties = useMemo(() => {
+    return {
+      backgroundColor:
+        trackColor ??
+        themeColors.editor.lineHighlightBackground ??
+        themeColors.editor.rangeHighlightBackground,
+      borderRadius: 6,
+      overflow: "hidden",
+      height: "100%",
+      flex: 1,
+    };
+  }, [themeColors, trackColor]);
+
+  const inner: React.CSSProperties = useMemo(() => {
+    return {
+      height: "100%",
+      backgroundColor: fillColor ?? themeColors.icon.foreground,
+      width:
+        index > currentStep
+          ? 0
+          : index === currentStep
+            ? currentStepProgress * 100 + "%"
+            : "100%",
+    };
+  }, [fillColor, themeColors.icon.foreground, index, currentStep, currentStepProgress]);
+
+  return (
+    <div style={outer}>
+      <div style={inner} />
+    </div>
+  );
+};
+
+export function ProgressBar({
+  steps,
+  trackColor,
+  fillColor,
+  top = 48,
+  height = 6,
+  gap = 12,
+}: {
+  readonly steps: CodeStep[];
+  readonly trackColor?: string;
+  readonly fillColor?: string;
+  readonly top?: number;
+  readonly height?: number;
+  readonly gap?: number;
+}) {
+  const frame = useCurrentFrame();
+
+  const { currentStep, currentStepProgress } = useMemo(() => {
+    let accumulated = 0;
+    for (let i = 0; i < steps.length; i++) {
+      const stepEnd = accumulated + steps[i].durationInFrames;
+      if (frame < stepEnd) {
+        const progress = (frame - accumulated) / steps[i].durationInFrames;
+        return { currentStep: i, currentStepProgress: progress };
+      }
+      accumulated = stepEnd;
+    }
+    return { currentStep: steps.length - 1, currentStepProgress: 1 };
+  }, [frame, steps]);
+
+  const container: React.CSSProperties = useMemo(() => {
+    return {
+      position: "absolute",
+      top,
+      height,
+      left: horizontalPadding,
+      right: horizontalPadding,
+      display: "flex",
+      gap,
+    };
+  }, [gap, height, top]);
+
+  return (
+    <div style={container}>
+      {steps.map((_, index) => (
+        <Step
+          key={index}
+          trackColor={trackColor}
+          fillColor={fillColor}
+          currentStep={currentStep}
+          currentStepProgress={currentStepProgress}
+          index={index}
+        />
+      ))}
+    </div>
+  );
+}

package/src/ReloadOnCodeChange.tsx

@@ -0,0 +1,40 @@
+import { getStaticFiles, reevaluateComposition } from "@remotion/studio";
+import { useState } from "react";
+import React, { useEffect } from "react";
+import { watchPublicFolder } from "@remotion/studio";
+import { useRemotionEnvironment } from "remotion";
+
+const getCurrentHash = () => {
+  const files = getStaticFiles();
+  const codeFiles = files.filter((file) => file.name.startsWith("code"));
+  const contents = codeFiles.map((file) => file.src + file.lastModified);
+  return contents.join("");
+};
+
+export const RefreshOnCodeChange: React.FC = () => {
+  const [files, setFiles] = useState(getCurrentHash());
+  const env = useRemotionEnvironment();
+
+  useEffect(() => {
+    if (env.isReadOnlyStudio) {
+      return;
+    }
+    if (!env.isStudio) {
+      return;
+    }
+    const { cancel } = watchPublicFolder(() => {
+      const hash = getCurrentHash();
+      if (hash !== files) {
+        setFiles(hash);
+        reevaluateComposition();
+      }
+    });
+
+    return () => {
+      cancel();
+    };
+    // oxlint-disable-next-line
+  }, [files, env.isReadOnlyStudio]);
+
+  return null;
+};

package/src/Root.tsx

@@ -0,0 +1,89 @@
+import { Composition, Folder } from "remotion";
+import { Main } from "./Main";
+import "./index.css";
+
+import { calculateMetadata } from "./calculate-metadata/calculate-metadata";
+import { schema } from "./calculate-metadata/schema";
+
+export const RemotionRoot = () => {
+  return (
+    <>
+      <Composition
+        id="Main"
+        component={Main}
+        defaultProps={{
+          steps: null,
+          themeColors: null,
+          codeWidth: null,
+          theme: "vercel-dark" as const,
+          preset: "tutorial" as const,
+          animation: "morph" as const,
+          charsPerSecond: 30,
+        }}
+        fps={30}
+        height={1080}
+        calculateMetadata={calculateMetadata}
+        schema={schema}
+      />
+      <Folder name="Presets">
+        <Composition
+          id="Preset-Post"
+          component={Main}
+          width={720}
+          height={1280}
+          fps={30}
+          durationInFrames={150}
+          defaultProps={{
+            steps: null,
+            themeColors: null,
+            codeWidth: null,
+            theme: "vercel-dark" as const,
+            preset: "post" as const,
+            animation: "morph" as const,
+            charsPerSecond: 30,
+          }}
+          calculateMetadata={calculateMetadata}
+          schema={schema}
+        />
+        <Composition
+          id="Preset-Tutorial"
+          component={Main}
+          width={1920}
+          height={1080}
+          fps={30}
+          durationInFrames={300}
+          defaultProps={{
+            steps: null,
+            themeColors: null,
+            codeWidth: null,
+            theme: "vercel-dark" as const,
+            preset: "tutorial" as const,
+            animation: "morph" as const,
+            charsPerSecond: 30,
+          }}
+          calculateMetadata={calculateMetadata}
+          schema={schema}
+        />
+        <Composition
+          id="Preset-Square"
+          component={Main}
+          width={1080}
+          height={1080}
+          fps={30}
+          durationInFrames={150}
+          defaultProps={{
+            steps: null,
+            themeColors: null,
+            codeWidth: null,
+            theme: "vercel-dark" as const,
+            preset: "square" as const,
+            animation: "morph" as const,
+            charsPerSecond: 30,
+          }}
+          calculateMetadata={calculateMetadata}
+          schema={schema}
+        />
+      </Folder>
+    </>
+  );
+};

package/src/TypewriterTransition.tsx

@@ -0,0 +1,167 @@
+import { useMemo } from "react";
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { HighlightedCode } from "codehike/code";
+import { fontFamily, fontSize as baseFontSize, tabSize } from "./font";
+import { useThemeColors } from "./calculate-metadata/theme";
+
+interface CharInfo {
+  char: string;
+  style: React.CSSProperties;
+}
+
+export function flattenCode(code: HighlightedCode): CharInfo[] {
+  const chars: CharInfo[] = [];
+
+  for (const token of code.tokens) {
+    if (typeof token === "string") {
+      for (const char of token) {
+        chars.push({ char, style: {} });
+      }
+    } else {
+      const [content, color, style] = token;
+      const tokenStyle: React.CSSProperties = {
+        ...style,
+        color: color ?? style?.color,
+      };
+      for (const char of content) {
+        chars.push({ char, style: tokenStyle });
+      }
+    }
+  }
+
+  while (chars.length > 0 && chars[chars.length - 1].char === "\n") {
+    chars.pop();
+  }
+
+  return chars;
+}
+
+interface Segment {
+  text: string;
+  style: React.CSSProperties;
+  startIndex: number;
+  isNewline: boolean;
+}
+
+function groupCharsIntoSegments(chars: CharInfo[]): Segment[] {
+  const segments: Segment[] = [];
+  let i = 0;
+
+  while (i < chars.length) {
+    const { char, style } = chars[i];
+
+    if (char === "\n") {
+      segments.push({ text: "\n", style: {}, startIndex: i, isNewline: true });
+      i++;
+      continue;
+    }
+
+    let text = char;
+    const startIndex = i;
+    i++;
+
+    while (
+      i < chars.length &&
+      chars[i].char !== "\n" &&
+      chars[i].style.color === style.color
+    ) {
+      text += chars[i].char;
+      i++;
+    }
+
+    segments.push({ text, style, startIndex, isNewline: false });
+  }
+
+  return segments;
+}
+
+export function TypewriterTransition({
+  code,
+  charsPerSecond = 30,
+  fontSize,
+}: {
+  readonly code: HighlightedCode;
+  readonly charsPerSecond?: number;
+  readonly fontSize?: number;
+}) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const themeColors = useThemeColors();
+
+  const chars = useMemo(() => flattenCode(code), [code]);
+  const segments = useMemo(() => groupCharsIntoSegments(chars), [chars]);
+  const totalChars = chars.length;
+
+  const typingDuration = (totalChars / charsPerSecond) * fps;
+
+  const charsShown = Math.floor(
+    interpolate(frame, [0, typingDuration], [0, totalChars], {
+      extrapolateRight: "clamp",
+      extrapolateLeft: "clamp",
+    }),
+  );
+
+  const isComplete = charsShown >= totalChars;
+  const blinkInterval = Math.round(fps / 2);
+  const cursorVisible = isComplete
+    ? Math.floor(frame / blinkInterval) % 2 === 0
+    : true;
+
+  return (
+    <pre
+      style={{
+        fontSize: fontSize ?? baseFontSize,
+        lineHeight: 1.5,
+        fontFamily,
+        tabSize,
+        margin: 0,
+        whiteSpace: "pre",
+      }}
+    >
+      <code>
+        {segments.map((segment, idx) => {
+          const segmentEnd = segment.startIndex + segment.text.length;
+
+          if (segment.startIndex >= charsShown) {
+            return null;
+          }
+
+          if (segment.isNewline) {
+            return <br key={idx} />;
+          }
+
+          const visibleLength = Math.min(
+            segment.text.length,
+            charsShown - segment.startIndex,
+          );
+
+          if (segmentEnd <= charsShown) {
+            return (
+              <span key={idx} style={segment.style}>
+                {segment.text}
+              </span>
+            );
+          }
+
+          return (
+            <span key={idx} style={segment.style}>
+              {segment.text.slice(0, visibleLength)}
+            </span>
+          );
+        })}
+        <span
+          key="cursor"
+          style={{
+            display: "inline-block",
+            width: "0.6em",
+            height: "1.2em",
+            backgroundColor: themeColors?.foreground ?? "currentColor",
+            opacity: cursorVisible ? 0.8 : 0,
+            verticalAlign: "text-bottom",
+            marginLeft: 2,
+          }}
+        />
+      </code>
+    </pre>
+  );
+}

package/src/annotations/Callout.tsx

@@ -0,0 +1,78 @@
+import {
+  InlineAnnotation,
+  AnnotationHandler,
+  InnerLine,
+  Pre,
+} from "codehike/code";
+import { interpolate, useCurrentFrame } from "remotion";
+import { useThemeColors } from "../calculate-metadata/theme";
+import { mix, readableColor } from "polished";
+
+export const callout: AnnotationHandler = {
+  name: "callout",
+  transform: (annotation: InlineAnnotation) => {
+    const { name, query, lineNumber, fromColumn, toColumn, data } = annotation;
+    return {
+      name,
+      query,
+      fromLineNumber: lineNumber,
+      toLineNumber: lineNumber,
+      data: { ...data, column: (fromColumn + toColumn) / 2 },
+    };
+  },
+  AnnotatedLine: ({ annotation, ...props }) => {
+    const { column, codeblock } = annotation.data;
+    const { indentation } = props;
+    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 (
+      <>
+        <InnerLine merge={props} />
+        <div
+          style={{
+            opacity,
+            minWidth: `${column + 4}ch`,
+            marginLeft: `${indentation}ch`,
+            width: "fit-content",
+            backgroundColor: calloutColor,
+            padding: "1rem 2rem",
+            position: "relative",
+            marginTop: "0.25rem",
+            whiteSpace: "pre-wrap",
+            color: themeColors.editor.foreground,
+          }}
+        >
+          <div
+            style={{
+              left: `${column - indentation - 1}ch`,
+              position: "absolute",
+              width: "1rem",
+              height: "1rem",
+              transform: "rotate(45deg) translateY(-50%)",
+              top: "-2px",
+              backgroundColor: calloutColor,
+            }}
+          />
+          {codeblock ? (
+            <Pre
+              code={codeblock}
+              style={{ margin: 0, fontFamily: "inherit" }}
+            />
+          ) : (
+            annotation.data.children || annotation.query
+          )}
+        </div>
+      </>
+    );
+  },
+};