Render with Remotion CLI
npx remotion render remotion/index.tsx TeamGrid output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const TEAM = [
{ initials: "AK", name: "Alex Kim", role: "CEO & Founder", color: "#6366f1" },
{ initials: "SL", name: "Sarah Lin", role: "Head of Design", color: "#ec4899" },
{ initials: "MT", name: "Marco Torres", role: "Lead Engineer", color: "#22c55e" },
{ initials: "YC", name: "Yuki Chen", role: "Product Manager", color: "#f59e0b" },
{ initials: "RB", name: "Ryan Blake", role: "Marketing Lead", color: "#06b6d4" },
{ initials: "NP", name: "Nina Park", role: "Data Scientist", color: "#a855f7" },
];
export const TeamGrid: React.FC = () => {Team Grid
Staggered team member card grid with avatar initials, role info, and per-member color accents.
Duration8s
Resolution1920 × 1080
Frame rate30 fps
Frames240
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
