hermes-mcp/videos/remotion-demo/src/Root.tsx

import "./index.css";
import { Composition } from "remotion";
import { SquareMCPLinkedIn } from "./SquareMCPLinkedIn";
import { SquareMCPHeroLoop } from "./SquareMCPHeroLoop";
import { YCAppVideo } from "./YCAppVideo";
import { SquareMCPBrokerDemo } from "./SquareMCPBrokerDemo";
import {
  SquareMCPTikTokCTA,
  SquareMCPTikTokDemo,
  SquareMCPTikTokFull,
  SquareMCPTikTokHook,
  SquareMCPTikTokProblem,
  SquareMCPTikTokProof,
} from "./SquareMCPTikTok";
import { SquareMCPWhatsApp } from "./SquareMCPWhatsApp";
import { SquareMCPWhatsAppTemplate } from "./SquareMCPWhatsAppTemplate";

export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="SquareMCPLinkedIn"
        component={SquareMCPLinkedIn}
        durationInFrames={90 * 30}
        fps={30}
        width={1080}
        height={1080}
      />
      <Composition
        id="SquareMCPHeroLoop"
        component={SquareMCPHeroLoop}
        durationInFrames={30 * 30}
        fps={30}
        width={1920}
        height={1080}
      />
      <Composition
        id="SquareMCPTikTokFull"
        component={SquareMCPTikTokFull}
        durationInFrames={30 * 30}
        fps={30}
        width={1080}
        height={1920}
      />
      <Composition
        id="SquareMCPTikTokHook"
        component={SquareMCPTikTokHook}
        durationInFrames={3 * 30}
        fps={30}
        width={1080}
        height={1920}
      />
      <Composition
        id="SquareMCPTikTokProblem"
        component={SquareMCPTikTokProblem}
        durationInFrames={5 * 30}
        fps={30}
        width={1080}
        height={1920}
      />
      <Composition
        id="SquareMCPTikTokDemo"
        component={SquareMCPTikTokDemo}
        durationInFrames={12 * 30}
        fps={30}
        width={1080}
        height={1920}
      />
      <Composition
        id="SquareMCPTikTokProof"
        component={SquareMCPTikTokProof}
        durationInFrames={5 * 30}
        fps={30}
        width={1080}
        height={1920}
      />
      <Composition
        id="SquareMCPTikTokCTA"
        component={SquareMCPTikTokCTA}
        durationInFrames={5 * 30}
        fps={30}
        width={1080}
        height={1920}
      />
      <Composition
        id="YCAppVideo"
        component={YCAppVideo}
        durationInFrames={60 * 30}
        fps={30}
        width={1920}
        height={1080}
      />
      <Composition
        id="SquareMCPWhatsApp"
        component={SquareMCPWhatsApp}
        durationInFrames={15 * 30}
        fps={30}
        width={1920}
        height={1080}
      />
      <Composition
        id="SquareMCPWhatsAppTemplate"
        component={SquareMCPWhatsAppTemplate}
        durationInFrames={16 * 30}
        fps={30}
        width={1920}
        height={1080}
      />
      <Composition
        id="SquareMCPBrokerDemo"
        component={SquareMCPBrokerDemo}
        durationInFrames={45 * 30}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};