Create new Remotion video

src/HelloWorld.tsx

@@ -0,0 +1,65 @@
+import {spring} from 'remotion';
+import {
+	AbsoluteFill,
+	interpolate,
+	Sequence,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+import {Logo} from './HelloWorld/Logo';
+import {Subtitle} from './HelloWorld/Subtitle';
+import {Title} from './HelloWorld/Title';
+
+export const HelloWorld: React.FC<{
+	titleText: string;
+	titleColor: string;
+}> = ({titleText, titleColor}) => {
+	const frame = useCurrentFrame();
+	const {durationInFrames, fps} = useVideoConfig();
+
+	// Animate from 0 to 1 after 25 frames
+	const logoTranslationProgress = spring({
+		frame: frame - 25,
+		fps,
+		config: {
+			damping: 100,
+		},
+	});
+
+	// Move the logo up by 150 pixels once the transition starts
+	const logoTranslation = interpolate(
+		logoTranslationProgress,
+		[0, 1],
+		[0, -150]
+	);
+
+	// Fade out the animation at the end
+	const opacity = interpolate(
+		frame,
+		[durationInFrames - 25, durationInFrames - 15],
+		[1, 0],
+		{
+			extrapolateLeft: 'clamp',
+			extrapolateRight: 'clamp',
+		}
+	);
+
+	// A <AbsoluteFill> is just a absolutely positioned <div>!
+	return (
+		<AbsoluteFill style={{backgroundColor: 'white'}}>
+			<AbsoluteFill style={{opacity}}>
+				<AbsoluteFill style={{transform: `translateY(${logoTranslation}px)`}}>
+					<Logo />
+				</AbsoluteFill>
+				{/* Sequences can shift the time for its children! */}
+				<Sequence from={35}>
+					<Title titleText={titleText} titleColor={titleColor} />
+				</Sequence>
+				{/* The subtitle will only enter on the 75th frame. */}
+				<Sequence from={75}>
+					<Subtitle />
+				</Sequence>
+			</AbsoluteFill>
+		</AbsoluteFill>
+	);
+};

src/HelloWorld/Arc.tsx

@@ -0,0 +1,54 @@
+import {useState} from 'react';
+import {random, useVideoConfig} from 'remotion';
+import {COLOR_1, COLOR_2} from './constants';
+
+const getCircumferenceOfArc = (rx: number, ry: number) => {
+	return Math.PI * 2 * Math.sqrt((rx * rx + ry * ry) / 2);
+};
+
+const rx = 135;
+const ry = 300;
+const cx = 960;
+const cy = 540;
+const arcLength = getCircumferenceOfArc(rx, ry);
+const strokeWidth = 30;
+
+export const Arc: React.FC<{
+	progress: number;
+	rotation: number;
+	rotateProgress: number;
+}> = ({progress, rotation, rotateProgress}) => {
+	const {width, height} = useVideoConfig();
+
+	// Each svg Id must be unique to not conflict with each other
+	const [gradientId] = useState(() => String(random(null)));
+
+	return (
+		<svg
+			viewBox={`0 0 ${width} ${height}`}
+			style={{
+				position: 'absolute',
+				transform: `rotate(${rotation * rotateProgress}deg)`,
+			}}
+		>
+			<defs>
+				<linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+					<stop offset="0%" stopColor={COLOR_1} />
+					<stop offset="100%" stopColor={COLOR_2} />
+				</linearGradient>
+			</defs>
+			<ellipse
+				cx={cx}
+				cy={cy}
+				rx={rx}
+				ry={ry}
+				fill="none"
+				stroke={`url(#${gradientId})`}
+				strokeDasharray={arcLength}
+				strokeDashoffset={arcLength - arcLength * progress}
+				strokeLinecap="round"
+				strokeWidth={strokeWidth}
+			/>
+		</svg>
+	);
+};

src/HelloWorld/Atom.tsx

@@ -0,0 +1,35 @@
+import {useState} from 'react';
+import {random, useVideoConfig} from 'remotion';
+import {COLOR_1, COLOR_2} from './constants';
+
+export const Atom: React.FC<{
+	scale: number;
+}> = ({scale}) => {
+	const config = useVideoConfig();
+
+	// Each SVG ID must be unique to not conflict with each other
+	const [gradientId] = useState(() => String(random(null)));
+
+	return (
+		<svg
+			viewBox={`0 0 ${config.width} ${config.height}`}
+			style={{
+				position: 'absolute',
+				transform: `scale(${scale})`,
+			}}
+		>
+			<defs>
+				<linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+					<stop offset="0%" stopColor={COLOR_1} />
+					<stop offset="100%" stopColor={COLOR_2} />
+				</linearGradient>
+			</defs>
+			<circle
+				r={70}
+				cx={config.width / 2}
+				cy={config.height / 2}
+				fill={`url(#${gradientId})`}
+			/>
+		</svg>
+	);
+};

src/HelloWorld/Logo.tsx

@@ -0,0 +1,71 @@
+import {
+	AbsoluteFill,
+	interpolate,
+	spring,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+import {Arc} from './Arc';
+import {Atom} from './Atom';
+
+export const Logo: React.FC = () => {
+	const videoConfig = useVideoConfig();
+	const frame = useCurrentFrame();
+
+	const development = spring({
+		config: {
+			damping: 100,
+			mass: 0.5,
+		},
+		fps: videoConfig.fps,
+		frame,
+	});
+
+	const rotationDevelopment = spring({
+		config: {
+			damping: 100,
+			mass: 0.5,
+		},
+		fps: videoConfig.fps,
+		frame,
+	});
+
+	const scale = spring({
+		frame,
+		config: {
+			mass: 0.5,
+		},
+		fps: videoConfig.fps,
+	});
+
+	const logoRotation = interpolate(
+		frame,
+		[0, videoConfig.durationInFrames],
+		[0, 360]
+	);
+
+	return (
+		<AbsoluteFill
+			style={{
+				transform: `scale(${scale}) rotate(${logoRotation}deg)`,
+			}}
+		>
+			<Arc
+				rotateProgress={rotationDevelopment}
+				progress={development}
+				rotation={30}
+			/>
+			<Arc
+				rotateProgress={rotationDevelopment}
+				rotation={90}
+				progress={development}
+			/>
+			<Arc
+				rotateProgress={rotationDevelopment}
+				rotation={-30}
+				progress={development}
+			/>
+			<Atom scale={rotationDevelopment} />
+		</AbsoluteFill>
+	);
+};

src/HelloWorld/Subtitle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {interpolate, useCurrentFrame} from 'remotion';
+import {COLOR_1, FONT_FAMILY} from './constants';
+
+const subtitle: React.CSSProperties = {
+	fontFamily: FONT_FAMILY,
+	fontSize: 40,
+	textAlign: 'center',
+	position: 'absolute',
+	bottom: 140,
+	width: '100%',
+};
+
+const codeStyle: React.CSSProperties = {
+	color: COLOR_1,
+};
+
+export const Subtitle: React.FC = () => {
+	const frame = useCurrentFrame();
+	const opacity = interpolate(frame, [0, 30], [0, 1]);
+	return (
+		<div style={{...subtitle, opacity}}>
+			Edit <code style={codeStyle}>src/Root.tsx</code> and save to reload.
+		</div>
+	);
+};

src/HelloWorld/Title.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
+import {FONT_FAMILY} from './constants';
+
+const title: React.CSSProperties = {
+	fontFamily: FONT_FAMILY,
+	fontWeight: 'bold',
+	fontSize: 100,
+	textAlign: 'center',
+	position: 'absolute',
+	bottom: 160,
+	width: '100%',
+};
+
+const word: React.CSSProperties = {
+	marginLeft: 10,
+	marginRight: 10,
+	display: 'inline-block',
+};
+
+export const Title: React.FC<{
+	titleText: string;
+	titleColor: string;
+}> = ({titleText, titleColor}) => {
+	const videoConfig = useVideoConfig();
+	const frame = useCurrentFrame();
+
+	const words = titleText.split(' ');
+
+	return (
+		<h1 style={title}>
+			{words.map((t, i) => {
+				const delay = i * 5;
+
+				const scale = spring({
+					fps: videoConfig.fps,
+					frame: frame - delay,
+					config: {
+						damping: 200,
+					},
+				});
+
+				return (
+					<span
+						key={t}
+						style={{
+							...word,
+							color: titleColor,
+							transform: `scale(${scale})`,
+						}}
+					>
+						{t}
+					</span>
+				);
+			})}
+		</h1>
+	);
+};

src/HelloWorld/constants.ts

@@ -0,0 +1,6 @@
+// Change any of these to update your video live.
+
+export const COLOR_1 = '#86A8E7';
+export const COLOR_2 = '#91EAE4';
+
+export const FONT_FAMILY = 'SF Pro Text, Helvetica, Arial, sans-serif';

src/Root.tsx

@@ -0,0 +1,37 @@
+import {Composition} from 'remotion';
+import {HelloWorld} from './HelloWorld';
+import {Logo} from './HelloWorld/Logo';
+
+// Each <Composition> is an entry in the sidebar!
+
+export const RemotionRoot: React.FC = () => {
+	return (
+		<>
+			<Composition
+				// You can take the "id" to render a video:
+				// npx remotion render src/index.ts <id> out/video.mp4
+				id="HelloWorld"
+				component={HelloWorld}
+				durationInFrames={150}
+				fps={30}
+				width={1920}
+				height={1080}
+				// You can override these props for each render:
+				// https://www.remotion.dev/docs/parametrized-rendering
+				defaultProps={{
+					titleText: 'Welcome to Remotion',
+					titleColor: 'black',
+				}}
+			/>
+			{/* Mount any React component to make it show up in the sidebar and work on it individually! */}
+			<Composition
+				id="OnlyLogo"
+				component={Logo}
+				durationInFrames={150}
+				fps={30}
+				width={1920}
+				height={1080}
+			/>
+		</>
+	);
+};

src/index.ts

@@ -0,0 +1,7 @@
+// This is your entry file! Refer to it when you render:
+// npx remotion render <entry-file> HelloWorld out/video.mp4
+
+import {registerRoot} from 'remotion';
+import {RemotionRoot} from './Root';
+
+registerRoot(RemotionRoot);