sound.play()}>
})
- );
-};
diff --git a/src/remotion/compositions/showcases/devfestNantes/Details.tsx b/src/remotion/compositions/showcases/devfestNantes/Details.tsx
index cecf1e4..01fbcf1 100644
--- a/src/remotion/compositions/showcases/devfestNantes/Details.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/Details.tsx
@@ -1,60 +1,64 @@
-import {loadFont} from '@remotion/google-fonts/LeagueSpartan';
+import {loadLocalFont} from '../../../../../src/utils/loadFont';
import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
import {TalkDetails} from '../../../design/molecules/TalkDetails';
-import React from "react";
-const {fontFamily} = loadFont();
+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();
+ date?: string;
+ time?: string;
+ location?: string;
+ style?: React.CSSProperties;
+ isTotemDisplayMode?: boolean;
+}> = ({date, time, location, style, isTotemDisplayMode}) => {
+ const frame = useCurrentFrame();
+ const {fps} = useVideoConfig();
- const drop = spring({
- frame: frame,
- from: -40,
- to: isTotemDisplayMode ? 200 : 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',
- });
+ const drop = spring({
+ frame: frame,
+ from: -40,
+ to: isTotemDisplayMode ? 150 : 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 (
- {
height: "100%"
}}>
- {
height: "75%",
}}>
-
- {
height: "100%"
}}> {
const currentDate = useCurrentDate();
return (
-
-
-
-
-
-
+ 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)',
+ }}
+ >
{
height: "100%"
}}>
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- );
-};
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhraseTotem.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhraseTotem.tsx
index 611153e..073c701 100644
--- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhraseTotem.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhraseTotem.tsx
@@ -11,11 +11,12 @@ import {
import { BackgroundFiller } from '../../../design/atoms/BackgroundFiller';
import { DefaultProps } from '../../../types/defaultProps.types';
-import { Android } from './Android';
-import { Details } from './Details';
-import { Dino } from './Dino';
-import { Logo } from './Logo';
-import { TalkTitle } from './TalkTitle';
+import {Logo} from './Logo';
+import {Details} from "./Details";
+import {TalkTitle} from './TalkTitle';
+import {GhostBackground} from './GhostBackground';
+import {Moon} from './Moon';
+import {Trees} from './Trees';
const { fontFamily } = loadFont();
@@ -34,45 +35,45 @@ export const DevfestNantesPhraseTotem = ({
return (
+
+
+
+
+
+
+
+
+
- );
-};
\ No newline at end of file
+ );
+ };
+
\ No newline at end of file
diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesTalk.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesTalk.tsx
index f1777cb..8f7df9c 100644
--- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesTalk.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesTalk.tsx
@@ -1,76 +1,75 @@
import {loadFont} from '@remotion/google-fonts/CrimsonText';
-import {AbsoluteFill, Easing, interpolate, Sequence, staticFile, useCurrentFrame,} from 'remotion';
+import {AbsoluteFill, Easing, interpolate, Sequence, useCurrentFrame,} from 'remotion';
-import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
import {DefaultProps} from '../../../types/defaultProps.types';
-import {TalkTitle} from './TalkTitle';
-import {Android} from './Android';
import {Details} from './Details';
-import {Dino} from './Dino';
+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 DevfestNantesTalk = ({
- title,
- speakers,
- date,
- time,
- location,
+ title,
+ speakers,
+ date,
+ time,
+ location,
}: DefaultProps) => {
- const frame = useCurrentFrame();
+ 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),
- });
+ const SlideDown = interpolate(frame, [300, 330], [0, 650], {
+ extrapolateRight: 'clamp',
+ extrapolateLeft: 'clamp',
+ easing: Easing.bezier(0.51, -0.75, 0.99, 0.75),
+ });
- return (
-
-
-
-
-
-
-
-
-
-
- );
-};
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/remotion/compositions/showcases/devfestNantes/Dino.tsx b/src/remotion/compositions/showcases/devfestNantes/Dino.tsx
deleted file mode 100644
index 91df5dc..0000000
--- a/src/remotion/compositions/showcases/devfestNantes/Dino.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {Easing, Img, interpolate, staticFile, useCurrentFrame} from 'remotion';
-
-export const Dino = () => {
- const frame = useCurrentFrame();
- const logoWidth = 400;
-
- const pictureSlide = interpolate(frame, [0, 20], [-logoWidth, 0], {
- extrapolateRight: 'clamp',
- easing: Easing.out(Easing.ease),
- });
-
- const pictureSlideBack = interpolate(frame, [270, 290], [0, -logoWidth], {
- extrapolateRight: 'clamp',
- easing: Easing.out(Easing.ease),
- });
-
- return (
- })
- );
-};
diff --git a/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx b/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx
new file mode 100644
index 0000000..7373717
--- /dev/null
+++ b/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx
@@ -0,0 +1,41 @@
+import {
+ Img,
+ interpolate,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+} from 'remotion';
+
+import {ComponentDisplayMode} from '../../../types/defaultProps.types';
+
+export const GhostBackground = ({
+ isTotemDisplayMode = false,
+}: ComponentDisplayMode) => {
+ const {durationInFrames} = useVideoConfig();
+ const frame = useCurrentFrame();
+ const logoWidth = 350;
+
+ const opacity = interpolate(
+ frame,
+ [0, 80, durationInFrames - 20, durationInFrames],
+ [0, 0.1, 0.08, 0],
+ );
+
+ const zoomScale = interpolate(frame, [0, durationInFrames], [1, 2]);
+
+ return (
+ })
+ );
+};
diff --git a/src/remotion/compositions/showcases/devfestNantes/Logo.tsx b/src/remotion/compositions/showcases/devfestNantes/Logo.tsx
index 2611913..0ee5562 100644
--- a/src/remotion/compositions/showcases/devfestNantes/Logo.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/Logo.tsx
@@ -13,7 +13,7 @@ import {ComponentDisplayMode} from '../../../types/defaultProps.types';
export const Logo = ({isTotemDisplayMode = false}: ComponentDisplayMode) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
- const logoWidth = 250;
+ const logoWidth = 150;
const pictureSlide = spring({
frame,
@@ -32,7 +32,7 @@ export const Logo = ({isTotemDisplayMode = false}: ComponentDisplayMode) => {
return (
{
+ const frame = useCurrentFrame();
+ const logoWidth = 200;
+
+ const fall = interpolate(
+ frame,
+ [0, 250],
+ [-450, isTotemDisplayMode ? 1300 : 1000],
+ {
+ extrapolateRight: 'clamp',
+ },
+ );
+
+ const moveRight = interpolate(
+ frame,
+ [0, 250],
+ [100, isTotemDisplayMode ? 1300 : -200],
+ {
+ extrapolateRight: 'clamp',
+ },
+ );
+
+ const rotate = interpolate(frame, [0, 400], [0, 200], {
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+ })
+ );
+};
diff --git a/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx b/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx
index 1f32500..9ceb398 100644
--- a/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx
@@ -1,9 +1,8 @@
-import {loadFont} from '@remotion/google-fonts/YanoneKaffeesatz';
+import {loadFont} from '@remotion/google-fonts/Creepster';
import {
AbsoluteFill,
interpolate,
spring,
- staticFile,
useCurrentFrame,
useVideoConfig,
} from 'remotion';
@@ -14,15 +13,15 @@ import {Speaker} from '../../../types/defaultProps.types';
const {fontFamily} = loadFont();
-export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boolean;}> = ({speakers, isTotemDisplayMode}) => {
+export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boolean;}> = ({speakers, isTotemDisplayMode = false}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
- const pictureDrop = spring({
+ const pictureUp = spring({
frame: frame,
fps,
- from: -600,
- to: 80,
+ from: isTotemDisplayMode ? -480 : -430,
+ to: -280,
durationInFrames: 60,
});
@@ -58,18 +57,13 @@ export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boole
}}
>
diff --git a/src/remotion/compositions/showcases/devfestNantes/Trees.tsx b/src/remotion/compositions/showcases/devfestNantes/Trees.tsx
new file mode 100644
index 0000000..e79232e
--- /dev/null
+++ b/src/remotion/compositions/showcases/devfestNantes/Trees.tsx
@@ -0,0 +1,51 @@
+import {Easing, Img, interpolate, staticFile, useCurrentFrame} from 'remotion';
+
+export const Trees = () => {
+ const frame = useCurrentFrame();
+ const treesWidth = 1000;
+ const backgroundTreesWidth = 400;
+
+ const pictureSlide = interpolate(frame, [0, 20], [-treesWidth, 0], {
+ extrapolateRight: 'clamp',
+ easing: Easing.out(Easing.ease),
+ });
+
+ const pictureSlideRight = interpolate(frame, [0, 20], [-treesWidth, -60], {
+ extrapolateRight: 'clamp',
+ easing: Easing.out(Easing.ease),
+ });
+
+ const pictureSlideBack = interpolate(frame, [270, 290], [0, -treesWidth], {
+ extrapolateRight: 'clamp',
+ easing: Easing.out(Easing.ease),
+ });
+
+ return (
+ <>
+
+ })
+
+ );
+};
diff --git a/src/remotion/types/defaultProps.types.ts b/src/remotion/types/defaultProps.types.ts
index f7213b1..05471a8 100644
--- a/src/remotion/types/defaultProps.types.ts
+++ b/src/remotion/types/defaultProps.types.ts
@@ -5,7 +5,7 @@ export type Speaker = {
export type DefaultProps = {
title: string;
- speakers?: Speaker[];
+ speakers: Speaker[];
date?: string;
time?: string;
location?: string;
@@ -14,3 +14,7 @@ export type DefaultProps = {
export type ComponentDisplayMode = {
isTotemDisplayMode?: boolean;
};
+
+export const ShowcaseDevfestNantes2024Schema = DefaultProps.extend({
+ titleFontSize: z.number().optional(),
+});
\ No newline at end of file
diff --git a/src/utils/loadFont.ts b/src/utils/loadFont.ts
new file mode 100644
index 0000000..5df382b
--- /dev/null
+++ b/src/utils/loadFont.ts
@@ -0,0 +1,25 @@
+import {continueRender, delayRender, staticFile} from 'remotion';
+
+type RemotionFont = {
+ loadFont: () => void;
+};
+
+export function loadLocalFont(
+ fontName: string,
+ fontLocalPath: string,
+ format: 'woff2' | 'woff' | 'opentype' | 'truetype',
+) {
+ const waitForFont = delayRender('Loading local font...');
+ const font = new FontFace(
+ fontName,
+ `url('${staticFile(fontLocalPath)}') format('${format}')`,
+ );
+
+ font
+ .load()
+ .then(() => {
+ document.fonts.add(font);
+ continueRender(waitForFont);
+ })
+ .catch((err) => console.error('Error loading font', err));
+}
-
-
+
-
-
-
-
-
-
+
-
+
+);
};
diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx
index 7f8888c..04a7bb3 100644
--- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx
@@ -1,71 +1,58 @@
import {loadFont} from '@remotion/google-fonts/CrimsonText';
-import {AbsoluteFill, Easing, interpolate, Sequence, staticFile, useCurrentFrame,} from 'remotion';
+import {AbsoluteFill, Sequence} from 'remotion';
-import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
import {DefaultProps} from '../../../types/defaultProps.types';
import {TalkTitle} from './TalkTitle';
-import {Android} from './Android';
-import {Dino} from './Dino';
import {Logo} from './Logo';
import {Details} from "./Details";
+import {GhostBackground} from './GhostBackground';
+import {Moon} from './Moon';
+import {Trees} from './Trees';
const {fontFamily} = loadFont();
export const DevfestNantesPhrase = ({title, location, time}: DefaultProps) => {
- 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 (
-
- {speakers &&
- }
-
-
-
-
- );
+
-
-
+
+
+
+
+
+
+
+
+
+
-
- }
+
+
-
-
-
-
-
-
-
-
+
-
+
+
-
-
- {location &&
+ }
-
+
- {speakers &&
-
-
- }
-
-
-
-
-
+
+
+
+
+
+
+
- );
-};
diff --git a/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx b/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx
new file mode 100644
index 0000000..7373717
--- /dev/null
+++ b/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx
@@ -0,0 +1,41 @@
+import {
+ Img,
+ interpolate,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+} from 'remotion';
+
+import {ComponentDisplayMode} from '../../../types/defaultProps.types';
+
+export const GhostBackground = ({
+ isTotemDisplayMode = false,
+}: ComponentDisplayMode) => {
+ const {durationInFrames} = useVideoConfig();
+ const frame = useCurrentFrame();
+ const logoWidth = 350;
+
+ const opacity = interpolate(
+ frame,
+ [0, 80, durationInFrames - 20, durationInFrames],
+ [0, 0.1, 0.08, 0],
+ );
+
+ const zoomScale = interpolate(frame, [0, durationInFrames], [1, 2]);
+
+ return (
+
+ );
+};
diff --git a/src/remotion/compositions/showcases/devfestNantes/Logo.tsx b/src/remotion/compositions/showcases/devfestNantes/Logo.tsx
index 2611913..0ee5562 100644
--- a/src/remotion/compositions/showcases/devfestNantes/Logo.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/Logo.tsx
@@ -13,7 +13,7 @@ import {ComponentDisplayMode} from '../../../types/defaultProps.types';
export const Logo = ({isTotemDisplayMode = false}: ComponentDisplayMode) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
- const logoWidth = 250;
+ const logoWidth = 150;
const pictureSlide = spring({
frame,
@@ -32,7 +32,7 @@ export const Logo = ({isTotemDisplayMode = false}: ComponentDisplayMode) => {
return (
+ );
+};
diff --git a/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx b/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx
index 1f32500..9ceb398 100644
--- a/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx
+++ b/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx
@@ -1,9 +1,8 @@
-import {loadFont} from '@remotion/google-fonts/YanoneKaffeesatz';
+import {loadFont} from '@remotion/google-fonts/Creepster';
import {
AbsoluteFill,
interpolate,
spring,
- staticFile,
useCurrentFrame,
useVideoConfig,
} from 'remotion';
@@ -14,15 +13,15 @@ import {Speaker} from '../../../types/defaultProps.types';
const {fontFamily} = loadFont();
-export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boolean;}> = ({speakers, isTotemDisplayMode}) => {
+export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boolean;}> = ({speakers, isTotemDisplayMode = false}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
- const pictureDrop = spring({
+ const pictureUp = spring({
frame: frame,
fps,
- from: -600,
- to: 80,
+ from: isTotemDisplayMode ? -480 : -430,
+ to: -280,
durationInFrames: 60,
});
@@ -58,18 +57,13 @@ export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boole
}}
>
+
+ );
+};
diff --git a/src/remotion/types/defaultProps.types.ts b/src/remotion/types/defaultProps.types.ts
index f7213b1..05471a8 100644
--- a/src/remotion/types/defaultProps.types.ts
+++ b/src/remotion/types/defaultProps.types.ts
@@ -5,7 +5,7 @@ export type Speaker = {
export type DefaultProps = {
title: string;
- speakers?: Speaker[];
+ speakers: Speaker[];
date?: string;
time?: string;
location?: string;
@@ -14,3 +14,7 @@ export type DefaultProps = {
export type ComponentDisplayMode = {
isTotemDisplayMode?: boolean;
};
+
+export const ShowcaseDevfestNantes2024Schema = DefaultProps.extend({
+ titleFontSize: z.number().optional(),
+});
\ No newline at end of file
diff --git a/src/utils/loadFont.ts b/src/utils/loadFont.ts
new file mode 100644
index 0000000..5df382b
--- /dev/null
+++ b/src/utils/loadFont.ts
@@ -0,0 +1,25 @@
+import {continueRender, delayRender, staticFile} from 'remotion';
+
+type RemotionFont = {
+ loadFont: () => void;
+};
+
+export function loadLocalFont(
+ fontName: string,
+ fontLocalPath: string,
+ format: 'woff2' | 'woff' | 'opentype' | 'truetype',
+) {
+ const waitForFont = delayRender('Loading local font...');
+ const font = new FontFace(
+ fontName,
+ `url('${staticFile(fontLocalPath)}') format('${format}')`,
+ );
+
+ font
+ .load()
+ .then(() => {
+ document.fonts.add(font);
+ continueRender(waitForFont);
+ })
+ .catch((err) => console.error('Error loading font', err));
+}