A Remotion component to display a library of other components

remotion.library.tsx

import {getInputProps, Composition, Sequence, Img } from 'remotion';
import React from 'react';

import { Arid } from './components/arid/Arid'
import { BlurSwipe } from './components/blur-swipe/BlurSwipe'
import { CSSAnim } from './components/CSSAnim/CSSAnim'

import chrome from "./assets/chrome.png"

const props = getInputProps()

const scale = props.scale || 1
const duration = props.duration || 300
const fps = props.fps || 60

const width = 1920 * scale;
const height = 1080 * scale;

export const Library: React.FC = () => {

  const library = [
    { id: "Arid", component: Arid, props: { color: "lime" } },
    { id: "BlurSwipe", component: BlurSwipe, props: { direction: "right", children: <Img src={chrome} /> } },
    { id: "CSSAnim", component: CSSAnim, props: {} }
  ]

  return (
    <>
    {
      library.map((component)=>{

        const comp = React.createElement(component.component as any, component.props);

        return (
          <Composition
          id={component.id}
          component={()=>(<Sequence from={0} durationInFrames={duration}>{comp}</Sequence>)}
          durationInFrames={duration}
          fps={fps}
          width={width}
          height={height}
        />

        )
      })
    }
    </>
  );
};