Render CLI
npx remotion render remotion/index.tsx Timeline output.mp4 --codec=h264
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
import { Milestone, Flag, Star, Rocket, Building2 } from "lucide-react";
const STEPS = [
{ year: "2021", title: "Founded", desc: "Started in a San Francisco garage", color: "#34c759", icon: Building2 },
{ year: "2022", title: "First Launch", desc: "10K users in the first month", color: "#5856d6", icon: Rocket },
{ year: "2023", title: "Series A", desc: "$12M raised from top VCs", color: "#ff9500", icon: Milestone },
{ year: "2024", title: "1M Users", desc: "Reached a global milestone", color: "#ff2d55", icon: Star },
{ year: "2025", title: "Enterprise", desc: "500+ companies onboard", color: "#007aff", icon: Flag },
];
export const Timeline: React.FC = () => {Timeline
Alternating card timeline with staggered reveal animations for company history or roadmaps.
Duration9s
Resolution1920 × 1080
Frame rate30 fps
Frames270
This is a free, open-source template. Copy the code and drop it into your Remotion project.
