@remotion/promo-pages 5.0.0-canary.3 → 5.0.1-canary

package/src/components/homepage/Demo/DigitWheel.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import type {SpringConfig} from 'remotion';
+import {
+	AbsoluteFill,
+	interpolate,
+	spring,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+import {Minus} from './Minus';
+
+const DURATION = 25;
+
+const items = 10;
+
+export const NUM_WIDTH = 36;
+
+export const Wheel: React.FC<{
+	readonly delay: number;
+	readonly digits: number[];
+	readonly renderDigit: (i: number) => React.ReactNode;
+	readonly isLeadingDigit: boolean;
+	readonly isNegative: boolean[];
+}> = ({delay, digits, renderDigit, isLeadingDigit, isNegative}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+
+	const singleDur = DURATION;
+
+	const progressesMaker = (
+		springConfig: Partial<SpringConfig>,
+		durationInFrames: number,
+	) =>
+		new Array(digits.length - 1).fill(true).map((_, i) => {
+			const current = digits[i];
+			const next = digits[i + 1];
+			if (current === next) {
+				return 1;
+			}
+
+			return spring({
+				fps,
+				frame,
+				config: springConfig,
+				durationInFrames,
+				delay: i * 50 + delay,
+			});
+		});
+
+	const progresses = progressesMaker(
+		{
+			mass: 0.7,
+			damping: 12,
+		},
+		singleDur,
+	);
+	const softProgresses = progressesMaker(
+		{
+			damping: 200,
+		},
+		singleDur / 2,
+	);
+
+	const rotations = digits.map((d) => 1 / items + d / 10);
+
+	const offsets = rotations.map((r, i) => {
+		const next = rotations[i + 1];
+		if (next === undefined) {
+			return 0;
+		}
+
+		return next - r;
+	});
+
+	const opacity = isLeadingDigit
+		? interpolate(
+				softProgresses.reduce((a, b) => a + b, 0),
+				new Array(digits.length).fill(true).map((_, i) => i),
+				digits.map((digit) => (digit === 0 ? 0 : 1)),
+			)
+		: 1;
+
+	const minusSignOpacity = isLeadingDigit
+		? interpolate(
+				softProgresses.reduce((a, b) => a + b, 0),
+				new Array(digits.length).fill(true).map((_, i) => i),
+				isNegative.map((negative) => (negative ? 1 : 0)),
+			)
+		: 1;
+
+	const minusSignMarginLeft = interpolate(minusSignOpacity, [0, 1], [10, 0]);
+
+	const shiftLeft = isLeadingDigit
+		? interpolate(
+				softProgresses.reduce((a, b) => a + b, 0),
+				new Array(digits.length).fill(true).map((_, i) => i),
+				digits.map((digit) => (digit === 0 ? -40 : 0)),
+			)
+		: 1;
+
+	const rotation =
+		progresses
+			.map((p, i) => {
+				return p * offsets[i];
+			})
+			.reduce((a, b) => a + b, 0) + rotations[0];
+
+	return (
+		<div
+			style={{
+				position: 'relative',
+				width: NUM_WIDTH,
+				display: 'inline-block',
+				height: 80,
+				marginLeft: shiftLeft,
+			}}
+		>
+			{isLeadingDigit ? (
+				<Minus
+					minusSignOpacity={minusSignOpacity}
+					leftOffset={shiftLeft + minusSignMarginLeft}
+				/>
+			) : null}
+			<AbsoluteFill
+				style={{
+					perspective: 5000,
+					maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
+					WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
+				}}
+			>
+				{new Array(items).fill(true).map((_, i) => {
+					const index = i / items + rotation;
+
+					const z = Math.cos(index * -Math.PI * 2) * 120;
+					const y = Math.sin(index * Math.PI * 2) * -120;
+					const r = interpolate(index, [0, 1], [0, Math.PI * 2]);
+
+					return (
+						<AbsoluteFill
+							// eslint-disable-next-line react/no-array-index-key
+							key={i}
+							style={{
+								justifyContent: 'center',
+								alignItems: 'center',
+								fontSize: 60,
+								fontVariationSettings: `"wght" 400`,
+								transform: `translateZ(${z}px) translateY(${y}px) rotateX(${r}deg)`,
+								backfaceVisibility: 'hidden',
+								perspective: 1000,
+							}}
+						>
+							<div
+								style={{
+									transform: `rotateX(-${r}rad)`,
+									backfaceVisibility: 'hidden',
+									display: 'flex',
+									flexDirection: 'row',
+									alignItems: 'center',
+									justifyContent: 'center',
+									opacity,
+								}}
+							>
+								<div
+									style={{
+										lineHeight: 1,
+										display: 'inline',
+										fontFeatureSettings: "'ss03' on",
+									}}
+								>
+									{renderDigit(i)}
+								</div>
+							</div>
+						</AbsoluteFill>
+					);
+				})}
+			</AbsoluteFill>
+		</div>
+	);
+};

package/src/components/homepage/Demo/DisplayedEmoji.tsx

@@ -0,0 +1,81 @@
+import type {EmojiName} from '@remotion/animated-emoji';
+import type {Lottie, LottieAnimationData} from '@remotion/lottie';
+import React, {useEffect, useMemo, useState} from 'react';
+import {
+	cancelRender,
+	continueRender,
+	delayRender,
+	useVideoConfig,
+} from 'remotion';
+
+type Data = {
+	Lottie: typeof Lottie;
+	duration: number;
+	data: LottieAnimationData;
+};
+
+export const DisplayedEmoji: React.FC<{
+	readonly emoji: EmojiName;
+}> = ({emoji}) => {
+	const [data, setData] = useState<Data | null>(null);
+	const {durationInFrames, fps} = useVideoConfig();
+
+	const src = useMemo(() => {
+		if (emoji === 'melting') {
+			return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
+		}
+
+		if (emoji === 'partying-face') {
+			return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json';
+		}
+
+		if (emoji === 'fire') {
+			return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json';
+		}
+
+		throw new Error('Unknown emoji');
+	}, [emoji]);
+
+	const [handle] = useState(() => delayRender());
+
+	useEffect(() => {
+		Promise.all([
+			import('@remotion/lottie'),
+			fetch(src).then((res) => res.json()),
+		])
+			.then(([{Lottie, getLottieMetadata}, json]) => {
+				setData({
+					Lottie,
+					duration: getLottieMetadata(json)?.durationInSeconds as number,
+					data: json,
+				});
+				continueRender(handle);
+			})
+			.catch((err) => {
+				cancelRender(err);
+			});
+	}, [handle, src]);
+
+	if (!data) {
+		return null;
+	}
+
+	const animDurtion = data.duration;
+	const ratio = durationInFrames / fps / animDurtion;
+	const closestInteger = ratio;
+	const closestRatio = closestInteger / ratio;
+
+	return (
+		<data.Lottie
+			style={{
+				height: 100,
+				width: '100%',
+				display: 'flex',
+				justifyContent: 'center',
+			}}
+			loop
+			animationData={data.data}
+			playbackRate={closestRatio}
+		/>
+	);
+};

package/src/components/homepage/Demo/DoneCheckmark.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {PALETTE} from '../layout/colors';
+
+export const DoneCheckmark: React.FC = () => {
+	return (
+		<div
+			style={{
+				backgroundColor: PALETTE.BRAND,
+				height: 26,
+				width: 26,
+				borderRadius: 13,
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				animation: 'jump 0.2s ease-out',
+			}}
+		>
+			<svg
+				viewBox="0 0 20 20"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				style={{
+					flexShrink: 0,
+					width: 26,
+				}}
+			>
+				<circle cx="10" cy="10" r="10" fill="#0B84F3" />
+				<path
+					d="M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z"
+					fill="white"
+					style={{
+						transform: 'scale(1.2)',
+						transformOrigin: 'center',
+					}}
+				/>
+			</svg>
+		</div>
+	);
+};

package/src/components/homepage/Demo/DownloadNudge.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {FONTS} from '../layout/colors';
+
+const origWidth = 77;
+const scale = 0.4;
+
+const Icon: React.FC = () => {
+	return (
+		<svg
+			style={{
+				width: origWidth * scale,
+			}}
+			viewBox="0 0 77 160"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M5 154.5C51 121 79 81 69 5"
+				stroke="currentColor"
+				strokeWidth="8"
+				strokeLinecap="round"
+			/>
+		</svg>
+	);
+};
+
+export const DownloadNudge: React.FC = () => {
+	return (
+		<div
+			style={{
+				position: 'relative',
+				flexDirection: 'row',
+				display: 'flex',
+				justifyContent: 'flex-end',
+				textAlign: 'right',
+				paddingRight: 22,
+				paddingTop: 20,
+			}}
+		>
+			<div>
+				<Icon />
+				<div
+					style={{
+						fontFamily: FONTS.GTPLANAR,
+						fontSize: 15,
+						width: 280,
+						position: 'absolute',
+						right: 70,
+						top: 60,
+					}}
+				>
+					Export the video using
+					<br />{' '}
+					<a href="/lambda" className="bluelink">
+						Remotion Lambda
+					</a>
+					.
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/components/homepage/Demo/DragAndDropNudge.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {FONTS, PALETTE} from '../layout/colors';
+
+const origWidth = 37;
+const scale = 0.4;
+
+export const Icon: React.FC = () => {
+	return (
+		<svg
+			style={{
+				width: origWidth * scale,
+				overflow: 'visible',
+			}}
+			viewBox="0 0 37 59"
+			fill="none"
+		>
+			<path
+				d="M5.00003 5C5.00002 36.5 16 44 32.0002 54"
+				stroke={PALETTE.TEXT_COLOR}
+				strokeWidth="8"
+				strokeLinecap="round"
+			/>
+		</svg>
+	);
+};
+
+export const DragAndDropNudge: React.FC = () => {
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				flexDirection: 'row',
+				display: 'flex',
+				justifyContent: 'flex-start',
+				paddingBottom: 5,
+				marginTop: 50,
+			}}
+			className={'ml-4 lg:-ml-5'}
+		>
+			<div>
+				<div
+					style={{
+						fontFamily: FONTS.GTPLANAR,
+						fontSize: 15,
+						width: 280,
+						paddingBottom: 8,
+						textWrap: 'balance',
+					}}
+					className={'-ml-3 lg:-ml-5'}
+				>
+					Drag and drop the cards to reorder them.
+				</div>
+				<Icon />
+			</div>
+		</div>
+	);
+};

package/src/components/homepage/Demo/EmojiCard.tsx

@@ -0,0 +1,198 @@
+import type {EmojiName} from '@remotion/animated-emoji';
+import React, {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from 'react';
+import {AbsoluteFill, getRemotionEnvironment} from 'remotion';
+import {DisplayedEmoji} from './DisplayedEmoji';
+
+export type EmojiCardRef = {
+	onLeft: () => void;
+	onRight: () => void;
+};
+
+type Transforms = [number, number, number];
+
+type Anim = {
+	ref1: HTMLDivElement;
+	ref2: HTMLDivElement;
+	ref3: HTMLDivElement;
+	transforms: Transforms;
+};
+
+const applyTransforms = ({ref1, ref2, ref3, transforms}: Anim) => {
+	ref1.style.transform = `translateX(${transforms[0]}%)`;
+	ref2.style.transform = `translateX(${transforms[1]}%)`;
+	ref3.style.transform = `translateX(${transforms[2]}%)`;
+};
+
+const waitForRaq = async () => {
+	await new Promise((resolve) => {
+		requestAnimationFrame(resolve);
+	});
+};
+
+const moveLeft = async ({ref1, ref2, ref3, transforms}: Anim) => {
+	for (let i = 0; i < 20; i++) {
+		for (const idx in transforms) {
+			transforms[idx] -= 5;
+			if (transforms[idx] <= -200) {
+				transforms[idx] += 300;
+			}
+		}
+
+		applyTransforms({ref1, ref2, ref3, transforms});
+		await waitForRaq();
+	}
+};
+
+const moveRight = async ({ref1, ref2, ref3, transforms}: Anim) => {
+	for (let i = 0; i < 20; i++) {
+		for (const idx in transforms) {
+			transforms[idx] += 5;
+			if (transforms[idx] >= 100) {
+				transforms[idx] -= 300;
+			}
+		}
+
+		applyTransforms({ref1, ref2, ref3, transforms});
+		await waitForRaq();
+	}
+};
+
+const emojiStyle: React.CSSProperties = {
+	width: '100%',
+	position: 'absolute',
+	top: 'calc(50% - 50px)',
+};
+
+export type EmojiCardProps = {
+	readonly emojiIndex: EmojiName;
+};
+
+const EmojiCardRefFn: React.ForwardRefRenderFunction<
+	EmojiCardRef,
+	EmojiCardProps
+> = ({emojiIndex}, ref) => {
+	const ref1 = useRef<HTMLDivElement>(null);
+	const ref2 = useRef<HTMLDivElement>(null);
+	const ref3 = useRef<HTMLDivElement>(null);
+	const transforms = useRef<Transforms>([-100, 0, 100]);
+
+	const onLeft = useCallback(() => {
+		if (!ref1.current || !ref2.current || !ref3.current) {
+			return;
+		}
+
+		moveLeft({
+			ref1: ref1.current,
+			ref2: ref2.current,
+			ref3: ref3.current,
+			transforms: transforms.current,
+		});
+	}, []);
+
+	const onRight = useCallback(() => {
+		if (!ref1.current || !ref2.current || !ref3.current) {
+			return;
+		}
+
+		moveRight({
+			ref1: ref1.current,
+			ref2: ref2.current,
+			ref3: ref3.current,
+			transforms: transforms.current,
+		});
+	}, []);
+
+	useEffect(() => {
+		if (!ref1.current || !ref2.current || !ref3.current) {
+			return;
+		}
+
+		applyTransforms({
+			ref1: ref1.current,
+			ref2: ref2.current,
+			ref3: ref3.current,
+			transforms: transforms.current,
+		});
+	}, []);
+
+	useImperativeHandle(ref, () => {
+		return {
+			onLeft,
+			onRight,
+		};
+	}, [onLeft, onRight]);
+
+	useEffect(() => {
+		if (!ref1.current || !ref2.current || !ref3.current) {
+			return;
+		}
+
+		applyTransforms({
+			ref1: ref1.current,
+			ref2: ref2.current,
+			ref3: ref3.current,
+			transforms: transforms.current,
+		});
+	}, []);
+
+	return (
+		<AbsoluteFill
+			style={{
+				justifyContent: 'center',
+				alignItems: 'center',
+				overflow: 'hidden',
+			}}
+		>
+			<div
+				style={{
+					color: '#0b84f3',
+					fontFamily: 'GTPlanar',
+					fontWeight: '500',
+					fontSize: 13,
+					textAlign: 'center',
+					position: 'absolute',
+					marginTop: -90,
+				}}
+			>
+				Choose an emoji
+			</div>
+			<div
+				style={{
+					position: 'absolute',
+					width: '100%',
+					display: 'flex',
+					whiteSpace: 'nowrap',
+					height: '100%',
+				}}
+			>
+				{getRemotionEnvironment().isRendering ? (
+					<div style={emojiStyle}>
+						<DisplayedEmoji emoji={emojiIndex} />
+					</div>
+				) : (
+					<>
+						<div ref={ref1} style={emojiStyle}>
+							<DisplayedEmoji emoji={'melting'} />
+						</div>
+						<div ref={ref2} style={emojiStyle}>
+							<DisplayedEmoji emoji={'partying-face'} />
+						</div>
+						<div ref={ref3} style={emojiStyle}>
+							<DisplayedEmoji emoji={'fire'} />
+						</div>
+					</>
+				)}
+			</div>
+		</AbsoluteFill>
+	);
+};
+
+export const EmojiCard = forwardRef<EmojiCardRef, EmojiCardProps>(
+	EmojiCardRefFn,
+);

package/src/components/homepage/Demo/Minus.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Minus: React.FC<{
+	readonly leftOffset: number;
+	readonly minusSignOpacity: number;
+}> = ({leftOffset, minusSignOpacity}) => {
+	return (
+		<div
+			style={{
+				position: 'relative',
+				marginLeft: -40 - leftOffset,
+				marginTop: 5,
+				width: 40,
+				opacity: minusSignOpacity,
+				textAlign: 'right',
+			}}
+		>
+			-
+		</div>
+	);
+};

package/src/components/homepage/Demo/PlayPauseButton.tsx

@@ -0,0 +1,66 @@
+import type {PlayerRef} from '@remotion/player';
+import React, {useCallback, useEffect} from 'react';
+import {PALETTE} from '../layout/colors';
+import {PausedIcon, PlayingIcon} from './icons';
+
+const playerButtonStyle: React.CSSProperties = {
+	appearance: 'none',
+	border: 'none',
+	borderRadius: 0,
+	background: 'none',
+	display: 'flex',
+	justifyContent: 'center',
+	alignItems: 'center',
+	paddingRight: 20,
+	paddingLeft: 20,
+	cursor: 'pointer',
+	height: 50,
+	color: PALETTE.TEXT_COLOR,
+};
+
+export const PlayPauseButton: React.FC<{
+	readonly playerRef: React.RefObject<PlayerRef | null>;
+}> = ({playerRef}) => {
+	const [playing, setPlaying] = React.useState(true);
+
+	useEffect(() => {
+		const {current} = playerRef;
+		if (!current) {
+			return;
+		}
+
+		const onPlay = () => {
+			setPlaying(true);
+		};
+
+		const onPause = () => {
+			setPlaying(false);
+		};
+
+		current.addEventListener('play', onPlay);
+		current.addEventListener('pause', onPause);
+
+		return () => {
+			current.removeEventListener('play', onPlay);
+			current.removeEventListener('pause', onPause);
+		};
+	}, [playerRef]);
+
+	const onToggle = useCallback(() => {
+		playerRef.current?.toggle();
+	}, [playerRef]);
+
+	const playPauseIconStyle: React.CSSProperties = {
+		width: 15,
+	};
+
+	return (
+		<button type="button" style={playerButtonStyle} onClick={onToggle}>
+			{playing ? (
+				<PlayingIcon style={playPauseIconStyle} />
+			) : (
+				<PausedIcon style={playPauseIconStyle} />
+			)}
+		</button>
+	);
+};