feat(template): add template cinema for LyonJS 100 (#1267)

remotion/compositions/showcases/lyonJS/LyonJS.composition.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import {Composition, Folder} from 'remotion';
 
+import {AnimatedScene} from './LyonJS100/AnimatedScene';
+import {LyonJS100Sponsor, Sponsor} from './LyonJS100/Sponsor';
+import {LyonJS100Talk, Talk} from './LyonJS100/Talk';
 import {ReplayLyonJS} from './Replay';
 
 export const LyonJSComposition: React.FC = () => {
@@ -27,6 +30,52 @@ export const LyonJSComposition: React.FC = () => {
 						'https://s3.eu-west-3.amazonaws.com/moovijob.prod/1494438/Horizontal_Black_Logo-Zenika.png',
 				}}
 			/>
+			<Folder name="LyonJS100">
+				<Composition
+					width={1920}
+					height={1080}
+					id="AnimatedScene"
+					fps={60}
+					durationInFrames={360}
+					component={AnimatedScene}
+				/>
+				<Composition
+					width={1920}
+					height={1080}
+					id="LyonJS100Sponsor"
+					fps={60}
+					durationInFrames={320}
+					component={Sponsor}
+					schema={LyonJS100Sponsor}
+					defaultProps={{
+						labelSponsor: 'Gold',
+						labeSponsorColor: '#efdb50',
+						labelFontSize: 60,
+						sponsorLogoUrl:
+							'https://www.remotion.dev/assets/images/shortvid-logo-648b24f40aea2fb96bf6e2404c3712d7.png',
+						sponsorLogoWidth: 900,
+					}}
+				/>
+				<Composition
+					width={1920}
+					height={1080}
+					id="LyonJS100Talk"
+					fps={60}
+					durationInFrames={320}
+					component={Talk}
+					schema={LyonJS100Talk}
+					defaultProps={{
+						speakers: [
+							{
+								picture: 'https://github.com/JonnyBurger.png',
+								name: 'Jonny Burger',
+							},
+						],
+						talkTitle: 'How to build a video editor in React',
+						titleSize: 60,
+					}}
+				/>
+			</Folder>
 		</Folder>
 	);
 };

remotion/compositions/showcases/lyonJS/LyonJS100/AnimatedScene.tsx

@@ -0,0 +1,80 @@
+import React, {PropsWithChildren} from 'react';
+import Image from 'next/image';
+import {
+	AbsoluteFill,
+	Audio,
+	Easing,
+	Img,
+	interpolate,
+	Sequence,
+	staticFile,
+	useCurrentFrame,
+} from 'remotion';
+import {z} from 'zod';
+
+import {BackgroundTriangle} from '../../../../design/atoms/BackgroundTriangle';
+import {SpeakerSchema} from '../../showcases.types';
+import {BigSpeakers} from '../BigSpeakers';
+import {Details} from '../Details';
+import {Logo} from '../Logo';
+import {LogoSponsor} from '../LogoSponsor';
+import {TalkTitle} from '../TalkTitle';
+
+import {Cinema} from './Scene/Cinema';
+
+export const AnimatedScene: React.FC<PropsWithChildren> = ({children}) => {
+	const frame = useCurrentFrame();
+
+	const opacityDown = interpolate(frame, [120, 160], [0.05, 0], {
+		extrapolateRight: 'clamp',
+		easing: Easing.out(Easing.ease),
+	});
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: '#00030a',
+				display: 'flex',
+				justifyContent: 'flex-start',
+				alignItems: 'center',
+				top: 120,
+			}}
+		>
+			<Cinema />
+			<div
+				style={{
+					position: 'absolute',
+					top: 115,
+					left: 270,
+					width: '1400px',
+					height: '630px',
+					overflow: 'hidden',
+				}}
+			>
+				<div
+					style={{
+						position: 'relative',
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						width: '100%',
+						height: '100%',
+					}}
+				>
+					<Img
+						src={staticFile('/images/showcases/lyonjs/LyonJS100.png')}
+						style={{
+							opacity: opacityDown,
+							position: 'absolute',
+							top: 60,
+							margin: 'auto',
+							width: '55%',
+							filter: 'grayscale(100%)',
+						}}
+					/>
+					{children}
+				</div>
+			</div>
+		</AbsoluteFill>
+	);
+};