feat(showcase): implement video template for devfest nantes (#586)

Co-authored-by: CruuzAzul <[email protected]>

app/showcases/conferences/[conferenceName]/page.tsx

@@ -8,6 +8,7 @@ import locale from 'react-json-editor-ajrm/locale/en';
 
 import {AlpesCraft} from '../../../../remotion/compositions/showcases/alpescraft/AlpesCraft';
 import {CampingDesSpeakers} from '../../../../remotion/compositions/showcases/campingDesSpeakers/CampingDesSpeakers';
+import {DevfestNantes} from '../../../../remotion/compositions/showcases/devfestNantes/DevfestNantes';
 import {Devoxx2023} from '../../../../remotion/compositions/showcases/devoxx/Devoxx2023';
 import {MixitIntroTalk} from '../../../../remotion/compositions/showcases/mixit/MixitIntroTalk';
 import {Snowcamp} from '../../../../remotion/compositions/showcases/snowcamp/Snowcamp';
@@ -110,6 +111,13 @@ const Template: Record<string, TalkTemplate> = {
 			defaultTalkValues,
 		),
 	},
+	DevfestNantes: {
+		compositionName: 'DevfestNantes',
+		component: DevfestNantes,
+		width: 1280,
+		height: 720,
+		durationInFrames: 300,
+	},
 };
 export default function ConferencePage({
 	params,

remotion/compositions/showcases/Showcases.composition.tsx

@@ -4,6 +4,7 @@ import {Folder} from 'remotion';
 import {AlpesCraftComposition} from './alpescraft/AlpesCraft.composition';
 import {CampingDesSpeakersComposition} from './campingDesSpeakers/CampingDesSpeakers.composition';
 import {CodeInTheDarkComposition} from './codeInTheDark/CodeInTheDark.composition';
+import {DevfestNantesComposition} from './devfestNantes/DevfestNantes.composition';
 import {DevoxxComposition} from './devoxx/Devoxx.composition';
 import {LyonJSComposition} from './lyonJS/LyonJS.composition';
 import {MixitComposition} from './mixit/Mixit.composition';
@@ -25,6 +26,7 @@ export const ShowcasesComposition: React.FC = () => {
 			<CampingDesSpeakersComposition />
 			<CodeInTheDarkComposition />
 			<VolcampComposition />
+			<DevfestNantesComposition />
 		</Folder>
 	);
 };

remotion/compositions/showcases/campingDesSpeakers/components/TalkTitle.tsx

@@ -1,4 +1,4 @@
-import {loadFont} from '@remotion/google-fonts/YanoneKaffeesatz';
+import {loadFont} from '@remotion/google-fonts/LeagueSpartan';
 import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
 
 import {Title} from '../../../../design/atoms/Title';

remotion/compositions/showcases/devfestNantes/Android.tsx

@@ -0,0 +1,28 @@
+import {Easing, Img, interpolate, staticFile, useCurrentFrame} from 'remotion';
+
+export const Android = () => {
+	const frame = useCurrentFrame();
+	const logoWidth = 200;
+
+	const fall = interpolate(frame, [0, 200], [-100, 250], {
+		extrapolateRight: 'clamp',
+	});
+	const rotate = interpolate(frame, [0, 50, 150, 200], [-45, 45, -45, 45], {
+		extrapolateRight: 'clamp',
+		easing: Easing.inOut(Easing.sin),
+	});
+
+	return (
+		<Img
+			src={staticFile('/images/showcases/devfestNantes/android.png')}
+			width={logoWidth}
+			height="auto"
+			style={{
+				position: 'absolute',
+				right: 100,
+				top: fall,
+				transform: `rotate(${rotate}deg)`,
+			}}
+		/>
+	);
+};

remotion/compositions/showcases/devfestNantes/DevfestNantes.composition.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Composition, Folder} from 'remotion';
+
+import {defaultTalkValues} from '../../../../src/data/defaultValues';
+
+import {DevfestNantes} from './DevfestNantes';
+
+export const DevfestNantesComposition = () => {
+	return (
+		<Folder name="DevfestNantesComposition">
+			<Composition
+				id="DevfestNantesComposition"
+				component={DevfestNantes}
+				durationInFrames={300}
+				fps={30}
+				width={1280}
+				height={720}
+				defaultProps={defaultTalkValues}
+			/>
+		</Folder>
+	);
+};

remotion/compositions/showcases/devfestNantes/DevfestNantes.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {loadFont} from '@remotion/google-fonts/CrimsonText';
+import {AbsoluteFill, Sequence, staticFile} from 'remotion';
+
+import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
+import {DefaultProps} from '../../../types/defaultProps.types';
+import {TalkTitle} from '../campingDesSpeakers/components/TalkTitle';
+
+import {Android} from './Android';
+import {Dino} from './Dino';
+import {Logo} from './Logo';
+import {Speakers} from './Speakers';
+
+const {fontFamily} = loadFont();
+export const DevfestNantes = ({title, speakers}: DefaultProps) => {
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: 'white',
+				overflow: 'hidden',
+				fontFamily,
+				textTransform: 'uppercase',
+			}}
+		>
+			<Sequence>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/fond-visuel-etoiles.png',
+					)}
+					style={{
+						position: 'absolute',
+						width: '100%',
+						height: '100%',
+					}}
+				/>
+			</Sequence>
+			<Sequence from={30}>
+				<Dino />
+			</Sequence>
+			<Sequence from={110}>
+				<Android />
+			</Sequence>
+			<Sequence>
+				<Logo />
+			</Sequence>
+			<Sequence name="Speakers" from={30}>
+				<Speakers speakers={speakers} />
+				<TalkTitle title={title} style={{}} />
+			</Sequence>
+		</AbsoluteFill>
+	);
+};

remotion/compositions/showcases/devfestNantes/Dino.tsx

@@ -0,0 +1,24 @@
+import {Easing, Img, interpolate, staticFile, useCurrentFrame} from 'remotion';
+
+export const Dino = () => {
+	const frame = useCurrentFrame();
+	const logoWidth = 400;
+
+	const pictureDrop = interpolate(frame, [0, 20], [-logoWidth, 0], {
+		extrapolateRight: 'clamp',
+		easing: Easing.out(Easing.ease),
+	});
+
+	return (
+		<Img
+			src={staticFile('/images/showcases/devfestNantes/dino.png')}
+			width={logoWidth}
+			height="auto"
+			style={{
+				position: 'absolute',
+				left: pictureDrop,
+				bottom: 0,
+			}}
+		/>
+	);
+};

remotion/compositions/showcases/devfestNantes/Logo.tsx

@@ -0,0 +1,36 @@
+import {
+	Img,
+	spring,
+	staticFile,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+
+export const Logo = () => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+	const logoWidth = 250;
+
+	const pictureDrop = spring({
+		frame,
+		fps,
+		from: -logoWidth,
+		to: 30,
+		durationInFrames: 30,
+	});
+
+	return (
+		<Img
+			src={staticFile(
+				'/images/showcases/devfestNantes/logo-devfest-mgm_transparent.svg',
+			)}
+			width={logoWidth}
+			height="auto"
+			style={{
+				position: 'absolute',
+				right: pictureDrop,
+				top: 20,
+			}}
+		/>
+	);
+};

remotion/compositions/showcases/devfestNantes/Speakers.tsx

@@ -0,0 +1,104 @@
+import {loadFont} from '@remotion/google-fonts/YanoneKaffeesatz';
+import {
+	AbsoluteFill,
+	interpolate,
+	spring,
+	staticFile,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+
+import {Text} from '../../../design/atoms/Text';
+import {AvatarWithCaption} from '../../../design/molecules/AvatarWithCaption';
+import {Speaker} from '../../../types/defaultProps.types';
+
+const {fontFamily} = loadFont();
+
+export const Speakers: React.FC<{speakers: Speaker[]}> = ({speakers}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+
+	const pictureDrop = spring({
+		frame: frame,
+		fps,
+		from: -600,
+		to: 80,
+		durationInFrames: 60,
+	});
+
+	const nameOpacity = spring({
+		frame: frame - 40,
+		fps,
+		from: 0,
+		to: 1,
+		durationInFrames: 60,
+	});
+
+	const nameUnblur = interpolate(frame - 40, [0, 20], [5, 0], {
+		extrapolateRight: 'clamp',
+	});
+
+	return (
+		<AbsoluteFill
+			style={{
+				width: '100%',
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'center',
+				gap: 100,
+			}}
+		>
+			{speakers.map((speaker) => {
+				return (
+					<div
+						key={speaker.name}
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+						}}
+					>
+						<AvatarWithCaption
+							avatarPictureUrl={
+								speaker.picture ||
+								staticFile(
+									'images/showcases/campingDesSpeakers/campingDesSpeakersLogo.png',
+								)
+							}
+							avatarStyle={{
+								width: 180,
+								height: 180,
+								border: 'none',
+								boxShadow: '0 0 0 5px white, 0 0 0 8px #e7804d',
+								top: pictureDrop,
+							}}
+							style={{
+								gap: 0,
+							}}
+						>
+							<>
+								<Text
+									style={{
+										fontFamily,
+										textShadow:
+											'-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black',
+										letterSpacing: '0.1rem',
+										position: 'relative',
+										bottom: '-40%',
+										width: 320,
+										height: 100,
+										fontSize: 35,
+										fontWeight: 700,
+										opacity: nameOpacity,
+										filter: `blur(${nameUnblur}px)`,
+									}}
+								>
+									{speaker.name}
+								</Text>
+							</>
+						</AvatarWithCaption>
+					</div>
+				);
+			})}
+		</AbsoluteFill>
+	);
+};

remotion/compositions/showcases/devfestNantes/TalkTitle.tsx

@@ -0,0 +1,51 @@
+import {loadFont} from '@remotion/google-fonts/LeagueSpartan';
+import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+import {Title} from '../../../design/atoms/Title';
+
+const {fontFamily} = loadFont();
+
+export const TalkTitle: React.FC<{
+	title: string;
+	style?: React.CSSProperties;
+	delay?: number;
+}> = ({title, style, delay = 0}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+
+	const titleOpacity = spring({
+		frame: frame - delay,
+		fps,
+		from: 0,
+		to: 1,
+		durationInFrames: 60,
+	});
+
+	const titleDeblur = interpolate(frame - delay, [0, 20], [5, 0], {
+		extrapolateRight: 'clamp',
+	});
+
+	return (
+		<Title
+			style={{
+				fontFamily,
+				width: '75%',
+				left: '50%',
+				transform: 'translateX(-50%)',
+				fontSize: '50px',
+				lineHeight: '1.5',
+				letterSpacing: '0.1rem',
+				textAlign: 'center',
+				textShadow: '-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black',
+				position: 'absolute',
+				minHeight: 150,
+				bottom: '130px',
+				opacity: titleOpacity,
+				filter: `blur(${titleDeblur}px)`,
+				...style,
+			}}
+		>
+			{title}
+		</Title>
+	);
+};

src/data/config/compositionsConfig.ts

@@ -5,6 +5,7 @@ import {TemplateTypes} from '../../app/types/template.types';
 
 import {AlpesCraftConfig} from './showcases/alpesCraftConfig';
 import {CampingDesSpeakersConfig} from './showcases/campingDesSpeakersConfig';
+import {DevfestNantesConfig} from './showcases/devfestNantesConfig';
 import {DevoxxConfig} from './showcases/devoxxConfig';
 import {MixitConfig} from './showcases/mixitConfig';
 import {SnowcampConfig} from './showcases/snowcampConfig';
@@ -62,5 +63,6 @@ export const CompositionsConfig: CompositionsConfigProps = {
 		AlpesCraft: AlpesCraftConfig,
 		CampingDesSpeakers: CampingDesSpeakersConfig,
 		Volcamp2023: VolcampConfig,
+		DevfestNantes: DevfestNantesConfig,
 	},
 };

src/data/config/showcases/devfestNantesConfig.ts

@@ -0,0 +1,12 @@
+import {DevfestNantes} from '../../../../remotion/compositions/showcases/devfestNantes/DevfestNantes';
+import {defaultTalkValues} from '../../defaultValues';
+import {CompositionProps} from '../compositionsConfig';
+
+export const DevfestNantesConfig: CompositionProps = {
+	compositionName: 'DevfestNantes',
+	component: DevfestNantes,
+	width: 1280,
+	height: 720,
+	durationInFrames: 150,
+	defaultProps: defaultTalkValues,
+};