Remotion Video

Video Generation with Remotion

Generate short videos by scaffolding a Remotion project, writing the composition in React/TypeScript, and rendering via GitHub Actions.

Workflow

1. Scaffold project (if not already present):

npx create-video@latest my-video --template blank
cd my-video && npm install

2. Write composition — create/edit src/Composition.tsx:

import { AbsoluteFill, useCurrentFrame, interpolate, Img } from "remotion";

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ backgroundColor: "#111", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ color: "white", fontSize: 80, opacity }}>Hello World</h1>
    </AbsoluteFill>
  );
};