Generate videos using Remotion with codegen and GitHub Actions. Use when the user asks to create a video, animation, motion graphic, slideshow, or render an MP4.
Generate short videos by scaffolding a Remotion project, writing the composition in React/TypeScript, and rendering via GitHub Actions.
npx create-video@latest my-video --template blank
cd my-video && npm install
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>
);
};
src/Root.tsx:import { Composition } from "remotion";
import { MyVideo } from "./Composition";
export const RemotionRoot: React.FC = () => (
<Composition id="MyVideo" component={MyVideo}
durationInFrames={90} fps={30} width={1920} height={1080} />
);
npx remotion render MyVideo out/video.mp4
Create .github/workflows/render.yml: