import {ExamplePage} from '@site/src/components/Examples/ExamplePage'; import { ExampleComponent, durationInFrames, fps, height, width, } from './example';

Example title

One short paragraph explaining what this example demonstrates and when to use it.

<ExamplePage component={ExampleComponent} durationInFrames={durationInFrames} fps={fps} height={height} width={width}

tsx

import React from 'react';
import {AbsoluteFill, Composition} from 'remotion';

export const width = 1920;
export const height = 1080;
export const fps = 30;
export const durationInFrames = 120;

export const ExampleComponent: React.FC = () => {
	return (
		<AbsoluteFill
			style={{
				alignItems: 'center',
				backgroundColor: '#111827',
				color: 'white',
				display: 'flex',
				fontFamily: 'Inter, system-ui, sans-serif',
				fontSize: 96,
				fontWeight: 700,
				justifyContent: 'center',
			}}
		>
			Example
		</AbsoluteFill>
	);
};

export const RemotionRoot: React.FC = () => {
	return (
		<Composition
			id="Example"
			component={ExampleComponent}
			durationInFrames={durationInFrames}
			fps={fps}
			height={height}
			width={width}
		/>
	);
};

</ExamplePage>