>Remotion | Make videos programmatically

# About Remotion Remotion is a framework that can create videos programmatically. It is based on React.js. All output should be valid React code and be written in TypeScript. # Project structure A Remotion Project consists of an entry file, a Root file and any number of React component files. A project can be scaffolded using the "npx create-video@latest --blank" command. The entry file is usually named "src/index.ts" and looks like this: ```ts import {registerRoot} from 'remotion'; import {Root} from './Root'; registerRoot(Root); ``` The Root file is usually named "src/Root.tsx" and looks like this: ```tsx import {Composition} from 'remotion'; import {MyComp} from './MyComp'; export const Root: React.FC = () => { return ( <> <Composition id="MyComp" component={MyComp} durationInFrames={120} width={1920} height={1080} fps={30} defaultProps={{}} /> </> ); }; ``` A `<Composition>` defines a video that can be rendered. It consists of a React "component", an "id", a "durationInFrames", a "width", a "height" and a frame rate "fps". The default frame rate should be 30. The default height should be 1080 and the default width should be 1920. The default "id" should be "MyComp". The "defaultProps" must be in the shape of the React props the "component" expects. Inside a React "component", one can use the "useCurrentFrame()" hook to get the current frame number. Frame numbers start at 0. ```tsx export const MyComp: React.FC = () => { const frame = useCurrentFrame(); return <div>Frame {frame}</div>; }; ``` # Component Rules Inside a component, regular HTML and SVG tags can be returned. There are special tags for video and audio. Those special tags accept regular CSS styles. If a video is included in the component it should use the "<Video>" tag. ```tsx import {Video} from '@remotion/media'; export const MyComp: React.FC = () => { return ( <div> <Video src="https://remotion.dev/bbb.mp4" style={{width: '100%