diff --git a/remotion/Video.tsx b/remotion/Video.tsx
index 5a735e8623..4c0dfff8e1 100644
--- a/remotion/Video.tsx
+++ b/remotion/Video.tsx
@@ -2,14 +2,16 @@ import React from 'react';
import {Folder} from 'remotion';
import {ShowcasesComposition} from './compositions/showcases/Showcases.composition';
-import {TemplatesComposition} from './compositions/templates/Templates.composition';
+import {LyonJSMeetup} from './compositions/templates/LyonJSMeetup.composition';
+import {MeetupToolKit} from './compositions/templates/MeetupToolKit.composition';
import {AtomsComposition} from './design/atoms/Atoms.composition';
import {MoleculesComposition} from './design/molecules/Molecules.composition';
export const RemotionRoot: React.FC = () => {
return (
<>
-
+
+
diff --git a/remotion/compositions/showcases/Showcases.composition.tsx b/remotion/compositions/showcases/Showcases.composition.tsx
index 9198d1fa0a..e8b72fb0f6 100644
--- a/remotion/compositions/showcases/Showcases.composition.tsx
+++ b/remotion/compositions/showcases/Showcases.composition.tsx
@@ -16,7 +16,7 @@ import {VolcampComposition} from './volcamp/Volcamp.composition';
export const ShowcasesComposition: React.FC = () => {
return (
-
+
diff --git a/remotion/compositions/showcases/lyonJS/Replay.tsx b/remotion/compositions/showcases/lyonJS/Replay.tsx
index 6e9f2de5c7..d448d8b355 100644
--- a/remotion/compositions/showcases/lyonJS/Replay.tsx
+++ b/remotion/compositions/showcases/lyonJS/Replay.tsx
@@ -1,8 +1,9 @@
import React from 'react';
import {AbsoluteFill, Audio, interpolate, Sequence, staticFile} from 'remotion';
+import {z} from 'zod';
import {BackgroundTriangle} from '../../../design/atoms/BackgroundTriangle';
-import {Speaker} from '../../../types/defaultProps.types';
+import {SpeakerSchema} from '../showcases.types';
import {BigSpeakers} from './BigSpeakers';
import {Details} from './Details';
@@ -10,14 +11,14 @@ import {Logo} from './Logo';
import {LogoSponsor} from './LogoSponsor';
import {TalkTitle} from './TalkTitle';
-export type LyonJSReplayType = {
- title: string;
- date: string;
- sponsor: string;
- speakers: Speaker[];
-};
+export const LyonJSReplaySchema = z.object({
+ title: z.string(),
+ date: z.string(),
+ sponsor: z.string(),
+ speakers: z.array(SpeakerSchema),
+});
-export const ReplayLyonJS: React.FC = ({
+export const ReplayLyonJS: React.FC> = ({
title,
speakers,
date,
diff --git a/remotion/compositions/showcases/showcases.types.ts b/remotion/compositions/showcases/showcases.types.ts
index 5d71dbdb75..62bc5a5ba7 100644
--- a/remotion/compositions/showcases/showcases.types.ts
+++ b/remotion/compositions/showcases/showcases.types.ts
@@ -1,6 +1,6 @@
import {z} from 'zod';
-const SpeakerSchema = z.object({
+export const SpeakerSchema = z.object({
name: z.string(),
picture: z.string(),
});
diff --git a/remotion/compositions/templates/LyonJSMeetup.composition.tsx b/remotion/compositions/templates/LyonJSMeetup.composition.tsx
new file mode 100644
index 0000000000..c65553d7ce
--- /dev/null
+++ b/remotion/compositions/templates/LyonJSMeetup.composition.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import {Composition, Folder} from 'remotion';
+
+import {LyonJSReplaySchema, ReplayLyonJS} from '../showcases/lyonJS/Replay';
+
+import {LayersComposition} from './layers/Layers.composition';
+import {Meetup, MeetupSchema} from './meetup/Meetup';
+import {Silhouette, SilhouetteSchema} from './silhouette/Silhouette';
+import {SponsorsComposition} from './sponsors/Sponsors.composition';
+import {TalkBranded} from './talk/branded/TalkBranded';
+import {Talk} from './talk/Talk';
+import {TalkBrandedSchema, TalkSchema} from './talk/talks.types';
+
+const startingDate = new Date(2023, 3, 18, 13);
+
+export const LyonJSMeetup: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/remotion/compositions/templates/MeetupToolKit.composition.tsx b/remotion/compositions/templates/MeetupToolKit.composition.tsx
new file mode 100644
index 0000000000..3093881b48
--- /dev/null
+++ b/remotion/compositions/templates/MeetupToolKit.composition.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import {Composition, Folder} from 'remotion';
+
+import {Talk} from './talk/Talk';
+import {TalkSchema} from './talk/talks.types';
+
+export const MeetupToolKit: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/remotion/compositions/templates/Templates.composition.tsx b/remotion/compositions/templates/Templates.composition.tsx
deleted file mode 100644
index e6a3494afc..0000000000
--- a/remotion/compositions/templates/Templates.composition.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import {Folder} from 'remotion';
-
-import {CarouselComposition} from './carousel/Carousel.composition';
-import {EventsComposition} from './event/Events.composition';
-import {LayersComposition} from './layers/Layers.composition';
-import {MeetupComposition} from './meetup/Meetup.composition';
-import {SilhouetteComposition} from './silhouette/Silhouette.composition';
-import {SponsorsComposition} from './sponsors/Sponsors.composition';
-import {TalksComposition} from './talk/Talks.composition';
-
-export const TemplatesComposition: React.FC = () => {
- return (
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/remotion/compositions/templates/carousel/Carousel.composition.tsx b/remotion/compositions/templates/carousel/Carousel.composition.tsx
deleted file mode 100644
index 78bb9a1b56..0000000000
--- a/remotion/compositions/templates/carousel/Carousel.composition.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Composition, Folder, staticFile} from 'remotion';
-
-import {Carousel} from './Carousel';
-
-export const CarouselComposition: React.FC = () => {
- const imageUrls = [
- 'https://secure.meetupstatic.com/photos/event/a/9/9/9/highres_511003417.webp',
- 'https://secure.meetupstatic.com/photos/event/4/a/c/7/highres_515299143.webp',
- 'https://secure.meetupstatic.com/photos/event/a/8/1/1/highres_515983025.webp',
- 'https://secure.meetupstatic.com/photos/event/a/8/0/b/highres_515983019.webp',
- ];
-
- const imageDuration = 120;
-
- return (
-
- {
- return {
- durationInFrames:
- props.defaultProps.imageDuration *
- props.defaultProps.imageUrls.length,
- };
- }}
- />
-
- );
-};
diff --git a/remotion/compositions/templates/carousel/Carousel.tsx b/remotion/compositions/templates/carousel/Carousel.tsx
deleted file mode 100644
index bbbe506129..0000000000
--- a/remotion/compositions/templates/carousel/Carousel.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {AbsoluteFill, Img, Sequence} from 'remotion';
-
-import {CarouselImage} from './CarouselImage';
-
-export type CarouselType = {
- imageUrls: string[];
- logoUrl?: string;
- imageDuration: number;
-};
-export function Carousel({imageUrls, logoUrl, imageDuration}: CarouselType) {
- const delayShift = imageDuration * 0.2;
-
- return (
-
- {imageUrls.map((image, index) => {
- return (
-
-
-
- );
- })}
- {logoUrl && (
- 
- )}
-
- );
-}
diff --git a/remotion/compositions/templates/carousel/CarouselImage.tsx b/remotion/compositions/templates/carousel/CarouselImage.tsx
deleted file mode 100644
index 1bd5048664..0000000000
--- a/remotion/compositions/templates/carousel/CarouselImage.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import {CSSProperties} from 'react';
-import {
- Easing,
- Img,
- interpolate,
- useCurrentFrame,
- useVideoConfig,
-} from 'remotion';
-
-export type AnimationMode = 'slideLeft';
-export function CarouselImage({
- imageUrl,
- imageDuration,
- noAnimation = false,
-}: {
- imageUrl: string;
- imageDuration: number;
- noAnimation?: boolean;
-}) {
- const frame = useCurrentFrame();
- const {width} = useVideoConfig();
- const animationDuration = imageDuration * 0.3;
- const slide = interpolate(
- frame,
- [imageDuration - animationDuration, imageDuration],
- [0, width],
- {
- easing: Easing.in(Easing.cubic),
- extrapolateRight: 'clamp',
- },
- );
- const opacity = interpolate(
- frame,
- [0, imageDuration * 0.33, imageDuration * 0.66, imageDuration],
- [0, 1, 1, 0],
- {
- extrapolateRight: 'clamp',
- },
- );
-
- let animation: CSSProperties = {
- transform: `translate(-${slide}px)`,
- opacity,
- };
-
- if (noAnimation) {
- animation = {};
- }
-
- return (
- <>
- 
-
-
- );
-}
diff --git a/remotion/compositions/templates/event/Event.tsx b/remotion/compositions/templates/event/Event.tsx
deleted file mode 100644
index fc1665efaa..0000000000
--- a/remotion/compositions/templates/event/Event.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as Bangers from '@remotion/google-fonts/Bangers';
-import {AbsoluteFill, Sequence} from 'remotion';
-
-import {LottieAsset} from '../../../design/atoms/LottieAsset';
-import {Paillettes} from '../../../design/atoms/Paillettes';
-
-import {EventBackground} from './EventBackground';
-import {EventTitle} from './EventTitle';
-
-export type EventProps = {
- backgroundImg?: string;
- title: string;
- lottieAsset?: string;
- paillettesAsset?: string;
-};
-
-Bangers.loadFont();
-
-export const Event: React.FC = ({
- backgroundImg = 'https://i.pinimg.com/originals/de/0d/19/de0d19d835dd1224c5208701d78bd6e7.jpg',
- title,
- lottieAsset = 'lf20_UDstUT',
- paillettesAsset = 'lf20_tiviyc3p',
-}) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/remotion/compositions/templates/event/EventBackground.tsx b/remotion/compositions/templates/event/EventBackground.tsx
deleted file mode 100644
index 64c61418f2..0000000000
--- a/remotion/compositions/templates/event/EventBackground.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-
-export const EventBackground: React.FC<{backgroundImg: string}> = ({
- backgroundImg,
-}) => {
- const frame = useCurrentFrame();
- const {fps} = useVideoConfig();
- const ANIMATION_DURATION = 30;
- const ANIMATION_DELAY = ANIMATION_DURATION / 2;
-
- const blur = spring({
- frame: frame - ANIMATION_DELAY,
- fps,
- from: 0,
- to: 5,
- durationInFrames: ANIMATION_DURATION,
- });
- const greyscale = spring({
- frame: frame - ANIMATION_DELAY,
- fps,
- from: 0,
- to: 5,
- durationInFrames: ANIMATION_DURATION,
- });
-
- return (
-
- );
-};
diff --git a/remotion/compositions/templates/event/EventTitle.tsx b/remotion/compositions/templates/event/EventTitle.tsx
deleted file mode 100644
index e5629acd88..0000000000
--- a/remotion/compositions/templates/event/EventTitle.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-import {Title} from '../../../design/atoms/Title';
-
-export const EventTitle: React.FC<{
- title: string;
-}> = ({title}) => {
- const frame = useCurrentFrame();
- const {fps, width} = useVideoConfig();
-
- const fromBottom = spring({
- frame,
- from: 0,
- to: 200,
- fps,
- durationInFrames: 30,
- });
-
- return (
-
- {title}
-
- );
-};
diff --git a/remotion/compositions/templates/event/Events.composition.tsx b/remotion/compositions/templates/event/Events.composition.tsx
deleted file mode 100644
index 24e87c0256..0000000000
--- a/remotion/compositions/templates/event/Events.composition.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Composition, Folder} from 'remotion';
-
-import {Event} from './Event';
-
-export const EventsComposition: React.FC = () => {
- return (
-
-
-
- );
-};
diff --git a/remotion/compositions/templates/layers/Layers.composition.tsx b/remotion/compositions/templates/layers/Layers.composition.tsx
index 7c46e3fbae..dd873ad3af 100644
--- a/remotion/compositions/templates/layers/Layers.composition.tsx
+++ b/remotion/compositions/templates/layers/Layers.composition.tsx
@@ -13,7 +13,7 @@ export const LayersComposition: React.FC = () => {
'https://user-images.githubusercontent.com/60877626/232909816-ca4e61c0-acb2-469b-95dc-beed0cb6b482.png';
return (
-
+
{
- return (
-
-
-
-
- );
-};
diff --git a/remotion/compositions/templates/silhouette/Silhouette.composition.tsx b/remotion/compositions/templates/silhouette/Silhouette.composition.tsx
deleted file mode 100644
index 166d774403..0000000000
--- a/remotion/compositions/templates/silhouette/Silhouette.composition.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import {Composition, Folder} from 'remotion';
-
-import {Silhouette} from './Silhouette';
-
-export const SilhouetteComposition: React.FC = () => {
- return (
-
-
-
- );
-};
diff --git a/remotion/compositions/templates/silhouette/Silhouette.tsx b/remotion/compositions/templates/silhouette/Silhouette.tsx
index e2290ca7d4..2dffad9135 100644
--- a/remotion/compositions/templates/silhouette/Silhouette.tsx
+++ b/remotion/compositions/templates/silhouette/Silhouette.tsx
@@ -1,23 +1,32 @@
import React from 'react';
-import {AbsoluteFill, Sequence} from 'remotion';
+import {loadFont} from '@remotion/google-fonts/OpenSans';
+import {
+ AbsoluteFill,
+ Easing,
+ interpolate,
+ Sequence,
+ useCurrentFrame,
+} from 'remotion';
+import {z} from 'zod';
import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-import {Side} from './Silhouette.type';
import {SilhouetteLogo} from './SilhouetteLogo';
import {SilhouettePicture} from './SilhouettePicture';
import {SilhouetteTitle} from './SilhouetteTitle';
-export type SilhouetteProps = {
- backgroundImg: string;
- title: string;
- side?: Side;
- silhouetteUrl: string;
- dropShadow?: boolean;
- logoUrl?: string;
-};
+export const SilhouetteSchema = z.object({
+ backgroundImg: z.string(),
+ title: z.string(),
+ side: z.enum(['left', 'right']).optional(),
+ silhouetteUrl: z.string(),
+ dropShadow: z.boolean().optional(),
+ logoUrl: z.string().optional(),
+});
+
+const {fontFamily} = loadFont();
-export const Silhouette: React.FC = ({
+export const Silhouette: React.FC> = ({
backgroundImg,
side = 'left',
silhouetteUrl,
@@ -25,13 +34,20 @@ export const Silhouette: React.FC = ({
dropShadow = false,
logoUrl,
}) => {
+ const frame = useCurrentFrame();
+ const blur = interpolate(frame, [40, 45], [0, 20], {
+ extrapolateRight: 'clamp',
+ easing: Easing.out(Easing.ease),
+ });
+
return (
-
+
diff --git a/remotion/compositions/templates/silhouette/Silhouette.type.ts b/remotion/compositions/templates/silhouette/Silhouette.type.ts
deleted file mode 100644
index a9259ce4df..0000000000
--- a/remotion/compositions/templates/silhouette/Silhouette.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Side = 'left' | 'right';
diff --git a/remotion/compositions/templates/talk/Talks.composition.tsx b/remotion/compositions/templates/talk/Talks.composition.tsx
deleted file mode 100644
index 0cacc51a30..0000000000
--- a/remotion/compositions/templates/talk/Talks.composition.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {Composition, Folder} from 'remotion';
-
-import {TalkBranded} from './branded/TalkBranded';
-import {Talk} from './Talk';
-import {TalkBrandedSchema, TalkSchema} from './talks.types';
-
-export const TalksComposition: React.FC = () => {
- const startingDate = new Date(2023, 3, 18, 13);
-
- return (
-
-
-
-
- );
-};