diff --git a/public/images/showcases/devfestNantes/background-filler-paysage.png b/public/images/showcases/devfestNantes/background-filler-paysage.png new file mode 100644 index 0000000..08b3512 Binary files /dev/null and b/public/images/showcases/devfestNantes/background-filler-paysage.png differ diff --git a/public/images/showcases/devfestNantes/background-filler-totem.png b/public/images/showcases/devfestNantes/background-filler-totem.png new file mode 100644 index 0000000..33192c1 Binary files /dev/null and b/public/images/showcases/devfestNantes/background-filler-totem.png differ diff --git a/src/remotion/compositions/showcases/devfestNantes/Details.tsx b/src/remotion/compositions/showcases/devfestNantes/Details.tsx index 01fbcf1..d7e0df4 100644 --- a/src/remotion/compositions/showcases/devfestNantes/Details.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/Details.tsx @@ -1,64 +1,64 @@ -import {loadLocalFont} from '../../../../../src/utils/loadFont'; -import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion'; +import { loadLocalFont } from "../../../../../src/utils/loadFont"; +import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"; -import {TalkDetails} from '../../../design/molecules/TalkDetails'; +import { TalkDetails } from "../../../design/molecules/TalkDetails"; -loadLocalFont('HigherJump', 'font/HigherJump.ttf', 'truetype'); +loadLocalFont("HigherJump", "font/HigherJump.ttf", "truetype"); export const Details: React.FC<{ - date?: string; - time?: string; - location?: string; + date?: string; + time?: string; + location?: string; style?: React.CSSProperties; - isTotemDisplayMode?: boolean; -}> = ({date, time, location, style, isTotemDisplayMode}) => { - const frame = useCurrentFrame(); - const {fps} = useVideoConfig(); + isTotemDisplayMode?: boolean; +}> = ({ date, time, location, style, isTotemDisplayMode }) => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); - 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', - }); + 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 ( - - ); + }} + iconStyle={{ + display: "none", + }} + /> + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefault.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefault.tsx index 2516fe0..e071805 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefault.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefault.tsx @@ -1,54 +1,64 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Img, Sequence, staticFile,} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { AbsoluteFill, Img, Sequence, staticFile } from "remotion"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; -import {GhostBackground} from './GhostBackground'; -import {Logo} from './Logo'; -import {Moon} from './Moon'; -import {Trees} from './Trees'; +import { GhostBackground } from "./GhostBackground"; +import { Logo } from "./Logo"; +import { Moon } from "./Moon"; +import { Trees } from "./Trees"; -const {fontFamily} = loadFont(); +const { fontFamily } = loadFont(); export const DevfestNantesDefault = () => { - - return ( - - - - - - - - - - - - - -
+ return ( + + + + + + + + + + + + + + + + +
+
- - ); + + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefaultTotem.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefaultTotem.tsx index 269c89b..754eb28 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefaultTotem.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefaultTotem.tsx @@ -1,54 +1,63 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Img, Sequence, staticFile} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { AbsoluteFill, Img, Sequence, staticFile } from "remotion"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; +import { GhostBackground } from "./GhostBackground"; +import { Logo } from "./Logo"; +import { Moon } from "./Moon"; +import { Trees } from "./Trees"; -import {GhostBackground} from './GhostBackground'; -import {Logo} from './Logo'; -import {Moon} from './Moon'; -import {Trees} from './Trees'; - -const {fontFamily} = loadFont(); +const { fontFamily } = loadFont(); export const DevfestNantesDefaultTotem = () => { - - return ( - - - - - - - + return ( + + + + + + + + + + - - - - - -
-
- - ); + + + + + +
+ +
+ + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirection.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirection.tsx index f171bcc..46d5063 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirection.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirection.tsx @@ -1,46 +1,60 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Sequence} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { AbsoluteFill, Sequence, staticFile } from "remotion"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; +import { Logo } from "./Logo"; +import { Direction } from "src/types.ts"; +import { DirectionComponent } from "src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx"; +import { Trees } from "./Trees"; +import { Moon } from "./Moon"; -import {Logo} from './Logo'; -import {Direction} from "src/types.ts"; -import {DirectionComponent} from "src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx"; -import { Trees } from './Trees'; -import { Moon } from './Moon'; - -const {fontFamily} = loadFont(); - -export const DevfestNantesDirection = ({directions}: { directions: Direction[] }) => { +const { fontFamily } = loadFont(); +export const DevfestNantesDirection = ({ + directions, +}: { + directions: Direction[]; +}) => { return ( + style={{ + overflow: "hidden", + fontFamily, + textTransform: "uppercase", + }} + > + + + - + - + - + -
- {directions.map((direction, index) => )} +
+ {directions.map((direction, index) => ( + + ))}
); diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirectionTotem.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirectionTotem.tsx index 1ee0752..426e4a9 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirectionTotem.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesDirectionTotem.tsx @@ -1,46 +1,60 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Sequence} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { AbsoluteFill, Sequence, staticFile } from "remotion"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; +import { Moon } from "./Moon"; +import { Trees } from "./Trees"; +import { Logo } from "./Logo"; +import { DirectionComponent } from "src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx"; +import { Direction } from "src/types.ts"; -import { Moon } from './Moon'; -import { Trees } from './Trees'; -import {Logo} from './Logo'; -import {DirectionComponent} from "src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx"; -import {Direction} from "src/types.ts"; - -const {fontFamily} = loadFont(); - -export const DevfestNantesDirectionTotem = ({directions}: { directions: Direction[] }) => { +const { fontFamily } = loadFont(); +export const DevfestNantesDirectionTotem = ({ + directions, +}: { + directions: Direction[]; +}) => { return ( - + + + + - + - + - + -
- {directions.map((direction, index) => )} +
+ {directions.map((direction, index) => ( + + ))}
); diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesEcranPlats.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesEcranPlats.tsx index cb6a353..3418be0 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesEcranPlats.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesEcranPlats.tsx @@ -1,39 +1,39 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Img, staticFile,} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { AbsoluteFill, Img, staticFile } from "remotion"; - -const {fontFamily} = loadFont(); +const { fontFamily } = loadFont(); export const DevfestNantesEcranPlat = () => { - 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)", + }} + > +
+
); }; - diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesGrandEcran.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesGrandEcran.tsx index a7aea1c..922fb4a 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesGrandEcran.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesGrandEcran.tsx @@ -1,71 +1,82 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Img, staticFile,} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { AbsoluteFill, Img, staticFile } from "remotion"; +import { DirectionComponent } from "src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx"; +import { useCurrentDate } from "src/helpers.ts"; -import {DirectionComponent} from "src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx"; -import {useCurrentDate} from "src/helpers.ts"; - -const {fontFamily} = loadFont(); +const { fontFamily } = loadFont(); export const DevfestNantesGrandEcran = () => { - const currentDate = useCurrentDate(); return ( -
- - {currentDate.getDate() == 19 && - } + 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)", + }} + > +
+ + {currentDate.getDate() == 19 && ( + + )}
-
- +
+
-
+
+
); }; - diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesLoopTotem.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesLoopTotem.tsx index 7b6e99f..a6fd88e 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesLoopTotem.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesLoopTotem.tsx @@ -1,83 +1,107 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Easing, interpolate, Sequence, useCurrentFrame,} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { + AbsoluteFill, + Easing, + interpolate, + Sequence, + useCurrentFrame, + staticFile, +} from "remotion"; -import {DefaultProps} from '../../../types/defaultProps.types'; +import { DefaultProps } from "../../../types/defaultProps.types"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; +import { Details } from "./Details"; +import { Logo } from "./Logo"; +import { Speakers } from "./Speakers"; +import { TalkTitle } from "./TalkTitle"; +import { GhostBackground } from "./GhostBackground"; +import { Moon } from "./Moon"; +import { Trees } from "./Trees"; -import {Details} from './Details'; -import {Logo} from './Logo'; -import {Speakers} from './Speakers'; -import {TalkTitle} from './TalkTitle'; -import {GhostBackground} from './GhostBackground'; -import {Moon} from './Moon'; -import {Trees} from './Trees'; - -const {fontFamily} = loadFont(); +const { fontFamily } = loadFont(); export const DevfestNantesLoopTotem = ({ - title, - speakers, - date, - time, - location, - }: DefaultProps) => { + title, + speakers, + date, + time, + location, +}: DefaultProps) => { const frame = useCurrentFrame(); const SlideDown = interpolate(frame, [300, 330], [0, 1300], { - extrapolateRight: 'clamp', - extrapolateLeft: 'clamp', + extrapolateRight: "clamp", + extrapolateLeft: "clamp", easing: Easing.bezier(0.51, -0.75, 0.99, 0.75), }); - -return ( - - - - - - - - - - - - - -
- - - + - -
+
-
- -); + + + + + + + + + + + + +
+ + + + + +
+ +
+ + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx index 04a7bb3..7ccab53 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhrase.tsx @@ -1,58 +1,62 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Sequence} from 'remotion'; +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 "./TalkTitle"; -import {DefaultProps} from '../../../types/defaultProps.types'; -import {TalkTitle} from './TalkTitle'; - -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) => { - +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) => { return ( - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - -
- - - ); -}; \ 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 0c836ea..5ccffa5 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhraseTotem.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesPhraseTotem.tsx @@ -1,77 +1,84 @@ -import { loadFont } from '@remotion/google-fonts/CrimsonText'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; import { - AbsoluteFill, - Easing, - interpolate, - Sequence, - useCurrentFrame, -} from 'remotion'; + AbsoluteFill, + Easing, + interpolate, + Sequence, + useCurrentFrame, + staticFile, +} from "remotion"; -import { DefaultProps } from '../../../types/defaultProps.types'; - -import {Logo} from './Logo'; -import {Details} from "./Details"; -import {TalkTitle} from './TalkTitle'; -import {GhostBackground} from './GhostBackground'; -import {Moon} from './Moon'; -import {Trees} from './Trees'; +import { DefaultProps } from "../../../types/defaultProps.types"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; +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(); export const DevfestNantesPhraseTotem = ({ - title, - time, - location, + title, + time, + location, }: DefaultProps) => { - const frame = useCurrentFrame(); + 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), - }); + const SlideDown = interpolate(frame, [300, 330], [0, 1300], { + extrapolateRight: "clamp", + extrapolateLeft: "clamp", + easing: Easing.bezier(0.51, -0.75, 0.99, 0.75), + }); - return ( - + + - - - - - - - - - - - - -
- - - - -
- -
- - ); - }; - \ 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 4fe1809..81aea2c 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DevfestNantesTalk.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DevfestNantesTalk.tsx @@ -1,75 +1,88 @@ -import {loadFont} from '@remotion/google-fonts/CrimsonText'; -import {AbsoluteFill, Easing, interpolate, Sequence, useCurrentFrame,} from 'remotion'; +import { loadFont } from "@remotion/google-fonts/CrimsonText"; +import { + AbsoluteFill, + Easing, + interpolate, + Sequence, + useCurrentFrame, + staticFile, +} from "remotion"; -import {DefaultProps} from '../../../types/defaultProps.types'; +import { DefaultProps } from "../../../types/defaultProps.types"; +import { BackgroundFiller } from "../../../design/atoms/BackgroundFiller"; +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"; -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(); +const { fontFamily } = loadFont(); export const DevfestNantesTalk = ({ - title, - speakers, - date, - time, - location, - }: DefaultProps) => { - const frame = useCurrentFrame(); + title, + speakers, + date, + time, + location, +}: 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), - }); + const SlideDown = interpolate(frame, [300, 330], [0, 650], { + extrapolateRight: "clamp", + extrapolateLeft: "clamp", + easing: Easing.bezier(0.51, -0.75, 0.99, 0.75), + }); - return ( - - - - - - - - - - -
- - - - - -
- -
- - - - - ); -}; \ No newline at end of file + return ( + + + + + + + + + + + + + +
+ + + + + +
+ +
+ + + + + ); +}; diff --git a/src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx b/src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx index 06314c2..4c229ec 100644 --- a/src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/DirectionComponent.tsx @@ -1,45 +1,63 @@ -import React from "react"; -import {Direction} from "src/types.ts"; -import {AiOutlineArrowDown, AiOutlineArrowLeft, AiOutlineArrowRight, AiOutlineArrowUp} from "react-icons/ai"; -import {BsArrowReturnLeft} from "react-icons/bs"; - -export const DirectionComponent: React.FC<{ direction: Direction, large?: boolean }> = ({direction, large}) => { - let fleche: React.ReactElement - const size = large ? "6rem" : "5rem"; - switch (direction.sens) { - case "haut": - fleche = - break - case "bas": - fleche = - break - case "gauche": - fleche = - break - case "droite": - fleche = - break - case "bas-gauche": - fleche = - break - default: - fleche = <> - } - return
- {fleche} -

- {direction.nom} -

-
-} +import React from "react"; +import { Direction } from "src/types.ts"; +import { + AiOutlineArrowDown, + AiOutlineArrowLeft, + AiOutlineArrowRight, + AiOutlineArrowUp, +} from "react-icons/ai"; +import { BsArrowReturnLeft } from "react-icons/bs"; + +export const DirectionComponent: React.FC<{ + direction: Direction; + large?: boolean; +}> = ({ direction, large }) => { + let fleche: React.ReactElement; + const size = large ? "6rem" : "5rem"; + switch (direction.sens) { + case "haut": + fleche = ; + break; + case "bas": + fleche = ; + break; + case "gauche": + fleche = ; + break; + case "droite": + fleche = ; + break; + case "bas-gauche": + fleche = ; + break; + default: + fleche = <>; + } + return ( +
+ {fleche} +

+ {direction.nom} +

+
+ ); +}; diff --git a/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx b/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx index 6a30709..2569673 100644 --- a/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/GhostBackground.tsx @@ -1,41 +1,40 @@ import { - Img, - interpolate, - staticFile, - useCurrentFrame, - useVideoConfig, -} from 'remotion'; + Img, + interpolate, + staticFile, + useCurrentFrame, + useVideoConfig, +} from "remotion"; -import {ComponentDisplayMode} from '../../../types/defaultProps.types'; +import { ComponentDisplayMode } from "../../../types/defaultProps.types"; -export const GhostBackground = ({ - //isTotemDisplayMode = false, -}: ComponentDisplayMode) => { - const {durationInFrames} = useVideoConfig(); - const frame = useCurrentFrame(); - const logoWidth = 350; +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 opacity = interpolate( + frame, + [0, 80, durationInFrames - 20, durationInFrames], + [0, 0.1, 0.08, 0] + ); - const zoomScale = interpolate(frame, [0, durationInFrames], [1, 2]); + const zoomScale = interpolate(frame, [0, durationInFrames], [1, 2]); - return ( - - ); + return ( + + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/Logo.tsx b/src/remotion/compositions/showcases/devfestNantes/Logo.tsx index 0ee5562..3ede689 100644 --- a/src/remotion/compositions/showcases/devfestNantes/Logo.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/Logo.tsx @@ -1,47 +1,45 @@ import { - Easing, - Img, - interpolate, - spring, - staticFile, - useCurrentFrame, - useVideoConfig, -} from 'remotion'; + Easing, + Img, + interpolate, + spring, + staticFile, + useCurrentFrame, + useVideoConfig, +} from "remotion"; -import {ComponentDisplayMode} from '../../../types/defaultProps.types'; +import { ComponentDisplayMode } from "../../../types/defaultProps.types"; -export const Logo = ({isTotemDisplayMode = false}: ComponentDisplayMode) => { - const frame = useCurrentFrame(); - const {fps} = useVideoConfig(); - const logoWidth = 150; +export const Logo = ({ isTotemDisplayMode = false }: ComponentDisplayMode) => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + const logoWidth = 150; - const pictureSlide = spring({ - frame, - fps, - from: -logoWidth, - to: 30, - durationInFrames: 30, - }); + const pictureSlide = spring({ + frame, + fps, + from: -logoWidth, + to: 30, + durationInFrames: 30, + }); - const pictureSlideBack = interpolate(frame, [300, 320], [0, logoWidth + 30], { - extrapolateRight: 'clamp', - extrapolateLeft: 'clamp', - easing: Easing.out(Easing.ease), - }); + const pictureSlideBack = interpolate(frame, [300, 320], [0, logoWidth + 30], { + extrapolateRight: "clamp", + extrapolateLeft: "clamp", + easing: Easing.out(Easing.ease), + }); - return ( - - ); + return ( + + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/Moon.tsx b/src/remotion/compositions/showcases/devfestNantes/Moon.tsx index 8f173c5..3497f04 100644 --- a/src/remotion/compositions/showcases/devfestNantes/Moon.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/Moon.tsx @@ -1,47 +1,47 @@ -import {Img, interpolate, staticFile, useCurrentFrame} from 'remotion'; +import { Img, interpolate, staticFile, useCurrentFrame } from "remotion"; -import {ComponentDisplayMode} from '../../../types/defaultProps.types'; +import { ComponentDisplayMode } from "../../../types/defaultProps.types"; -export const Moon = ({isTotemDisplayMode = false}: ComponentDisplayMode) => { - const frame = useCurrentFrame(); - const logoWidth = 200; +export const Moon = ({ isTotemDisplayMode = false }: ComponentDisplayMode) => { + const frame = useCurrentFrame(); + const logoWidth = 200; - const fall = interpolate( - frame, - [0, 250], - [-450, isTotemDisplayMode ? 1300 : 1000], - { - extrapolateRight: 'clamp', - }, - ); + const fall = interpolate( + frame, + [0, 150], + [-450, isTotemDisplayMode ? 1300 : 1000], + { + extrapolateRight: "clamp", + } + ); - const moveRight = interpolate( - frame, - [0, 250], - [100, isTotemDisplayMode ? 1300 : -200], - { - extrapolateRight: 'clamp', - }, - ); + const moveRight = interpolate( + frame, + [0, 150], + [100, isTotemDisplayMode ? -500 : -200], + { + extrapolateRight: "clamp", + } + ); - const rotate = interpolate(frame, [0, 400], [0, 200], { - extrapolateRight: 'clamp', - }); + const rotate = interpolate(frame, [0, 400], [0, 200], { + extrapolateRight: "clamp", + }); - return ( - - ); + return ( + + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx b/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx index 9ceb398..b9ec738 100644 --- a/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/Speakers.tsx @@ -1,100 +1,103 @@ -import {loadFont} from '@remotion/google-fonts/Creepster'; +import { loadFont } from "@remotion/google-fonts/Creepster"; import { - AbsoluteFill, - interpolate, - spring, - useCurrentFrame, - useVideoConfig, -} from 'remotion'; + AbsoluteFill, + interpolate, + spring, + useCurrentFrame, + useVideoConfig, +} from "remotion"; -import {Text} from '../../../design/atoms/Text'; -import {AvatarWithCaption} from '../../../design/molecules/AvatarWithCaption'; -import {Speaker} from '../../../types/defaultProps.types'; +import { Text } from "../../../design/atoms/Text"; +import { AvatarWithCaption } from "../../../design/molecules/AvatarWithCaption"; +import { Speaker } from "../../../types/defaultProps.types"; -const {fontFamily} = loadFont(); +const { fontFamily } = loadFont(); -export const Speakers: React.FC<{speakers: Speaker[], isTotemDisplayMode?: boolean;}> = ({speakers, isTotemDisplayMode = false}) => { - const frame = useCurrentFrame(); - const {fps} = useVideoConfig(); +export const Speakers: React.FC<{ + speakers: Speaker[]; + isTotemDisplayMode?: boolean; +}> = ({ speakers, isTotemDisplayMode = false }) => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); - const pictureUp = spring({ - frame: frame, - fps, - from: isTotemDisplayMode ? -480 : -430, - to: -280, - durationInFrames: 60, - }); + const pictureUp = spring({ + frame: frame, + fps, + from: isTotemDisplayMode ? -480 : -430, + to: -280, + durationInFrames: 60, + }); - const nameOpacity = spring({ - frame: frame - 40, - fps, - from: 0, - to: 1, - 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', - }); + const nameUnblur = interpolate(frame - 40, [0, 20], [5, 0], { + extrapolateRight: "clamp", + }); - return ( - - {speakers.map((speaker) => { - return ( -
- - <> - - {speaker.name} - - - -
- ); - })} - - ); + return ( + + {speakers.map((speaker) => { + return ( +
+ + <> + + {speaker.name} + + + +
+ ); + })} + + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/TalkTitle.tsx b/src/remotion/compositions/showcases/devfestNantes/TalkTitle.tsx index cb4f1fc..07cdb1c 100644 --- a/src/remotion/compositions/showcases/devfestNantes/TalkTitle.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/TalkTitle.tsx @@ -1,58 +1,58 @@ -import {loadLocalFont} from '../../../../../src/utils/loadFont'; +import { loadLocalFont } from "../../../../../src/utils/loadFont"; -import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion'; +import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"; -import {Title} from '../../../design/atoms/Title'; +import { Title } from "../../../design/atoms/Title"; import React from "react"; -loadLocalFont('HigherJump', 'font/HigherJump.ttf', 'truetype'); +loadLocalFont("HigherJump", "font/HigherJump.ttf", "truetype"); export const TalkTitle: React.FC<{ - title: string; - style?: React.CSSProperties; - delay?: number; - isTotemDisplayMode?: boolean; -}> = ({title, style, delay = 0, isTotemDisplayMode}) => { - const frame = useCurrentFrame(); - const {fps} = useVideoConfig(); + title: string; + style?: React.CSSProperties; + delay?: number; + isTotemDisplayMode?: boolean; +}> = ({ title, style, delay = 0, isTotemDisplayMode }) => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); - const titleOpacity = spring({ - frame: frame - delay, - fps, - from: 0, - to: 1, - durationInFrames: 60, - }); + const titleOpacity = spring({ + frame: frame - delay, + fps, + from: 0, + to: 1, + durationInFrames: 60, + }); - const titleDeblur = interpolate(frame - delay, [0, 20], [5, 0], { - extrapolateRight: 'clamp', - }); + const titleDeblur = interpolate(frame - delay, [0, 20], [5, 0], { + extrapolateRight: "clamp", + }); - return ( - - {title} - - ); + return ( + + {title} + + ); }; diff --git a/src/remotion/compositions/showcases/devfestNantes/Trees.tsx b/src/remotion/compositions/showcases/devfestNantes/Trees.tsx index e79232e..abd8683 100644 --- a/src/remotion/compositions/showcases/devfestNantes/Trees.tsx +++ b/src/remotion/compositions/showcases/devfestNantes/Trees.tsx @@ -1,51 +1,55 @@ -import {Easing, Img, interpolate, staticFile, useCurrentFrame} from 'remotion'; +import { + Easing, + Img, + interpolate, + staticFile, + useCurrentFrame, +} from "remotion"; export const Trees = () => { - const frame = useCurrentFrame(); - const treesWidth = 1000; - const backgroundTreesWidth = 400; + 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 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 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), - }); + const pictureSlideBack = interpolate(frame, [270, 290], [0, -treesWidth], { + extrapolateRight: "clamp", + easing: Easing.out(Easing.ease), + }); - return ( - <> - - - - ); + return ( + <> + + + + ); };