feat(templates): add new template for Devfest nantes 2024 (#1235)

Co-authored-by: Julien Landuré <[email protected]>

.gitignore

@@ -11,7 +11,7 @@ dist/
 
 # next.js
 /.next/
-/out/
+/out*/
 
 # production
 /build

remotion/compositions/showcases/devfestNantes/2024/Details.tsx

@@ -0,0 +1,62 @@
+import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+import {loadLocalFont} from '../../../../../src/app/utils/loadFont';
+import {TalkDetails} from '../../../../design/molecules/TalkDetails';
+
+loadLocalFont('HigherJump', 'font/HigherJump.ttf', 'truetype');
+
+export const Details: React.FC<{
+	date: string;
+	time: string;
+	location?: string;
+	isTotemDisplayMode?: boolean;
+}> = ({date, time, location, isTotemDisplayMode}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+
+	const drop = spring({
+		frame: frame,
+		from: -40,
+		to: isTotemDisplayMode ? 180 : 20,
+		fps,
+		durationInFrames: 40,
+	});
+	const opacity = spring({
+		frame: frame,
+		from: 0,
+		to: 1,
+		fps,
+		durationInFrames: 40,
+	});
+	const textUnblur = interpolate(frame, [0, 18], [5, 0], {
+		extrapolateRight: 'clamp',
+	});
+
+	return (
+		<TalkDetails
+			items={{
+				date,
+				time,
+				location,
+			}}
+			style={{
+				fontFamily: 'HigherJump',
+				opacity,
+				paddingLeft: isTotemDisplayMode ? '10px' : 0,
+				bottom: `${drop}px`,
+				left: '50%',
+				width: isTotemDisplayMode ? '96%' : '90%',
+				fontSize: isTotemDisplayMode ? '15px' : '20px',
+				letterSpacing: '0.3rem',
+				color: '#FFF8F0',
+				textShadow:
+					'-2px 0 #1B2C2C, 0 2px #1B2C2C, 2px 0 #1B2C2C, 0 -2px #1B2C2C',
+				transform: 'translateX(-50%)',
+				filter: `blur(${textUnblur}px)`,
+			}}
+			iconStyle={{
+				display: 'none',
+			}}
+		/>
+	);
+};

remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {loadFont} from '@remotion/google-fonts/CrimsonText';
+import {AbsoluteFill, Sequence} from 'remotion';
+import {z} from 'zod';
+
+import {ShowcaseDevfestNantes2024Schema} from '../types/types';
+
+import {Details} from './Details';
+import {GhostBackground} from './GhostBackground';
+import {Logo} from './Logo';
+import {Moon} from './Moon';
+import {Speakers} from './Speakers';
+import {TalkTitle} from './TalkTitle';
+import {Trees} from './Trees';
+
+const {fontFamily} = loadFont();
+export const DevfestNantes2024 = ({
+	title,
+	speakers,
+	date,
+	time,
+	location,
+	titleFontSize,
+}: z.infer<typeof ShowcaseDevfestNantes2024Schema>) => {
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: '#e4595c',
+				overflow: 'hidden',
+				fontFamily,
+				textTransform: 'uppercase',
+				boxShadow:
+					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
+			}}
+		>
+			<Sequence from={30}>
+				<GhostBackground />
+			</Sequence>
+			<Sequence from={110}>
+				<Moon />
+			</Sequence>
+			<Sequence from={30}>
+				<Trees />
+			</Sequence>
+			<Sequence name="Speakers" from={30}>
+				<Speakers speakers={speakers} />
+				<TalkTitle
+					title={title}
+					style={{
+						fontSize: titleFontSize ?? 35,
+					}}
+				/>
+			</Sequence>
+			<Sequence from={70}>
+				<Details date={date} time={time} location={location} />
+			</Sequence>
+			<Sequence>
+				<Logo />
+			</Sequence>
+		</AbsoluteFill>
+	);
+};

remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {loadFont} from '@remotion/google-fonts/CrimsonText';
+import {
+	AbsoluteFill,
+	Easing,
+	interpolate,
+	Sequence,
+	useCurrentFrame,
+} from 'remotion';
+import {z} from 'zod';
+
+import {ShowcaseDevfestNantes2024Schema} from '../types/types';
+
+import {GhostBackground} from './GhostBackground';
+import {Logo} from './Logo';
+import {Moon} from './Moon';
+import {Screens} from './Screens';
+import {TalkTitle} from './TalkTitle';
+import {Trees} from './Trees';
+
+const {fontFamily} = loadFont();
+
+export const DevfestNantesPhrase2024 = ({
+	title,
+	titleFontSize,
+}: z.infer<typeof ShowcaseDevfestNantes2024Schema>) => {
+	const frame = useCurrentFrame();
+
+	const SlideDown = interpolate(frame, [300, 330], [0, 650], {
+		extrapolateRight: 'clamp',
+		extrapolateLeft: 'clamp',
+		easing: Easing.bezier(0.51, -0.75, 0.99, 0.75),
+	});
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: '#e4595c',
+				overflow: 'hidden',
+				fontFamily,
+				textTransform: 'uppercase',
+				boxShadow:
+					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
+			}}
+		>
+			<Sequence from={30}>
+				<GhostBackground />
+			</Sequence>
+			<Sequence from={30}>
+				<Screens />
+			</Sequence>
+			<Sequence from={110}>
+				<Moon />
+			</Sequence>
+			<Sequence from={30}>
+				<Trees />
+			</Sequence>
+			<div
+				style={{
+					height: '100%',
+					transform: `translateY(${SlideDown}px)`,
+				}}
+			>
+				<Sequence name="Speakers" from={30}>
+					<TalkTitle
+						title={title}
+						style={{
+							fontSize: titleFontSize ?? 45,
+							bottom: '40%',
+							WebkitLineClamp: '10',
+						}}
+					/>
+				</Sequence>
+			</div>
+			<Sequence>
+				<Logo />
+			</Sequence>
+		</AbsoluteFill>
+	);
+};

remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {loadFont} from '@remotion/google-fonts/CrimsonText';
+import {
+	AbsoluteFill,
+	Easing,
+	interpolate,
+	Sequence,
+	useCurrentFrame,
+} from 'remotion';
+import {z} from 'zod';
+
+import {ShowcaseDevfestNantes2024Schema} from '../types/types';
+
+import {Details} from './Details';
+import {GhostBackground} from './GhostBackground';
+import {Logo} from './Logo';
+import {Moon} from './Moon';
+import {Speakers} from './Speakers';
+import {TalkTitle} from './TalkTitle';
+import {Trees} from './Trees';
+
+const {fontFamily} = loadFont();
+export const DevfestNantesLoop2024 = ({
+	title,
+	speakers,
+	date,
+	time,
+	location,
+	titleFontSize,
+}: z.infer<typeof ShowcaseDevfestNantes2024Schema>) => {
+	const frame = useCurrentFrame();
+
+	const SlideDown = interpolate(frame, [300, 330], [0, 650], {
+		extrapolateRight: 'clamp',
+		extrapolateLeft: 'clamp',
+		easing: Easing.bezier(0.51, -0.75, 0.99, 0.75),
+	});
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: '#e4595c',
+				overflow: 'hidden',
+				fontFamily,
+				textTransform: 'uppercase',
+				boxShadow:
+					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
+			}}
+		>
+			<Sequence from={30}>
+				<GhostBackground />
+			</Sequence>
+			<Sequence from={110}>
+				<Moon />
+			</Sequence>
+			<Sequence from={30}>
+				<Trees />
+			</Sequence>
+			<div
+				style={{
+					height: '100%',
+					transform: `translateY(${SlideDown}px)`,
+				}}
+			>
+				<Sequence name="Speakers" from={30}>
+					<Speakers speakers={speakers} />
+					<TalkTitle
+						title={title}
+						style={{
+							fontSize: titleFontSize ?? 35,
+						}}
+					/>
+				</Sequence>
+				<Sequence from={70}>
+					<Details date={date} time={time} location={location} />
+				</Sequence>
+			</div>
+			<Sequence>
+				<Logo />
+			</Sequence>
+		</AbsoluteFill>
+	);
+};

remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {loadFont} from '@remotion/google-fonts/CrimsonText';
+import {
+	AbsoluteFill,
+	Easing,
+	interpolate,
+	Sequence,
+	useCurrentFrame,
+} from 'remotion';
+import {z} from 'zod';
+
+import {ShowcaseDevfestNantes2024Schema} from '../types/types';
+
+import {Details} from './Details';
+import {GhostBackground} from './GhostBackground';
+import {Logo} from './Logo';
+import {Moon} from './Moon';
+import {Speakers} from './Speakers';
+import {TalkTitle} from './TalkTitle';
+import {Trees} from './Trees';
+
+const {fontFamily} = loadFont();
+
+export const DevfestNantesLoopTotem2024 = ({
+	title,
+	speakers,
+	date,
+	time,
+	location,
+	titleFontSize,
+}: z.infer<typeof ShowcaseDevfestNantes2024Schema>) => {
+	const frame = useCurrentFrame();
+
+	const SlideDown = interpolate(frame, [300, 330], [0, 1300], {
+		extrapolateRight: 'clamp',
+		extrapolateLeft: 'clamp',
+		easing: Easing.bezier(0.51, -0.75, 0.99, 0.75),
+	});
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: '#e4595c',
+				overflow: 'hidden',
+				fontFamily,
+				textTransform: 'uppercase',
+				boxShadow:
+					'inset 0 0px 200px rgba(0, 0, 0, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.5)',
+			}}
+		>
+			<Sequence>
+				<Logo isTotemDisplayMode />
+			</Sequence>
+			<Sequence from={30}>
+				<GhostBackground />
+			</Sequence>
+			<Sequence from={30}>
+				<Trees />
+			</Sequence>
+			<Sequence from={110}>
+				<Moon isTotemDisplayMode />
+			</Sequence>
+			<div
+				style={{
+					height: '100%',
+					transform: `translateY(${SlideDown}px)`,
+				}}
+			>
+				<Sequence name="Speakers" from={30}>
+					<Speakers speakers={speakers} isTotemDisplayMode />
+					<TalkTitle
+						title={title}
+						style={{
+							fontSize: titleFontSize ?? 35,
+						}}
+						isTotemDisplayMode
+					/>
+				</Sequence>
+				<Sequence from={70}>
+					<Details
+						date={date}
+						time={time}
+						location={location}
+						isTotemDisplayMode
+					/>
+				</Sequence>
+			</div>
+		</AbsoluteFill>
+	);
+};