✨ first version for 2024 screens with shortvid/remotion 🎉

src/data/configsAffichagesZones.ts

@@ -3,7 +3,7 @@ import {ConfigAfficheShortVid} from "src/types.ts";
 type typesAffiches = 'vestiaireJ1' | 'vestiaireJ2' | 'afterAnnonce' | 'afterBars';
 export const AFFICHES_ZONE: Record<typesAffiches, ConfigAfficheShortVid> = { // TODO mettre à jour les messages
   vestiaireJ1: {
-    "title": "Vestiaire gratuit disponible ! Déposez vos affaires.",
+    "title": "Vestiaire gratuit disponible ! Déposez vos affaires.",
     "speakers": [{
       "name": "Devfest Nantes",
       "picture": "https://github.com/GDG-Nantes/Devfest2023/assets/525974/f96a0968-1079-447c-8c39-490cb8c64089"
@@ -13,7 +13,7 @@ export const AFFICHES_ZONE: Record<typesAffiches, ConfigAfficheShortVid> = { //
     "location": "Galerie Jules Verne",
   },
   vestiaireJ2: {
-    "title": "Vestiaire gratuit disponible ! Déposez vos affaires.",
+    "title": "Vestiaire gratuit disponible ! Déposez vos affaires.",
     "speakers": [{
       "name": "Devfest Nantes",
       "picture": "https://github.com/GDG-Nantes/Devfest2023/assets/525974/f96a0968-1079-447c-8c39-490cb8c64089"

src/remotion/components/scary-elevator-remotion.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import {Howl} from 'howler';
+//import React from "react";
+//import {Howl} from 'howler';
 import {DefaultRemotion} from "src/remotion/components/default-remotion.tsx";
 
 
 export const ScaryElevatorRemotion: typeof DefaultRemotion = (props) => {
 
-  const sound = React.useMemo(() => new Howl({
-    src: ['scary-elevator-short.mp3'],
-    volume: 0.1
-  }), [])
+  // const sound = React.useMemo(() => new Howl({
+  //   src: ['scary-elevator-short.mp3'],
+  //   volume: 0.1
+  // }), [])
 
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      sound.play()
-    }, 60000)
-    return () => {
-      sound.stop()
-      clearInterval(interval)
-    }
-  }, [])
+  // React.useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     sound.play()
+  //   }, 60000)
+  //   return () => {
+  //     sound.stop()
+  //     clearInterval(interval)
+  //   }
+  // }, [])
   return <>
     <div style={{height: '100%', width: '100%', position: 'absolute', zIndex: 1000}} onClick={() => sound.play()}></div>
     <DefaultRemotion {...props}/>

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 (
-    <TalkDetails
-      items={{
-        date,
-        time,
-        location,
-      }}
-      style={{
-        fontFamily,
-        opacity,
-        bottom: `${drop}px`,
-        left: '50%',
-        width: isTotemDisplayMode ? '96%' : '80%',
-        fontSize: '22px',
-        textShadow: '-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black',
-        transform: 'translateX(-50%)',
-        filter: `blur(${textUnblur}px)`,
-      }}
-      iconStyle={{
-        width: '50px',
-        filter: 'drop-shadow(0px 0px 4px black)',
-      }}
-    />
-  );
+	return (
+		<TalkDetails
+			items={{
+				date,
+				time,
+				location,
+			}}
+			style={{
+				fontFamily: 'HigherJump',
+				opacity,
+				bottom: `${drop}px`,
+				left: '50%',
+				width: isTotemDisplayMode ? '96%' : '90%',
+				fontSize: '20px',
+				letterSpacing: '0.3rem',
+        lineHeight: '2.8rem',
+				color: '#FFF8F0',
+				textShadow:
+					'-2px 0 #1B2C2C, 0 2px #1B2C2C, 2px 0 #1B2C2C, 0 -2px #1B2C2C',
+				transform: 'translateX(-50%)',
+				filter: `blur(${textUnblur}px)`,
+        ...style,
+			}}
+			iconStyle={{
+				display: 'none',
+			}}
+		/>
+	);
 };

src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefault.tsx

@@ -1,42 +1,38 @@
 import {loadFont} from '@remotion/google-fonts/CrimsonText';
 import {AbsoluteFill, Img, Sequence, staticFile,} from 'remotion';
 
-import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-
-import {Android} from './Android';
-import {Dino} from './Dino';
+import {GhostBackground} from './GhostBackground';
+import {Logo} from './Logo';
+import {Moon} from './Moon';
+import {Trees} from './Trees';
 
 const {fontFamily} = loadFont();
 
 export const DevfestNantesDefault = () => {
 
-  return (
-    <AbsoluteFill
-      style={{
-        backgroundColor: 'white',
-        overflow: 'hidden',
-        fontFamily,
-        textTransform: 'uppercase',
-      }}
-    >
-      <Sequence>
-        <BackgroundFiller
-          imageUrl={staticFile(
-            '/images/showcases/devfestNantes/fond-visuel-etoiles.png',
-          )}
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-          }}
-        />
-      </Sequence>
-      <Sequence from={30}>
-        <Dino/>
-      </Sequence>
-      <Sequence from={110}>
-        <Android/>
-      </Sequence>
+	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>
+				<Logo />
+			</Sequence>
       <div style={{
         position: "absolute",
         display: "flex",
@@ -47,12 +43,12 @@ export const DevfestNantesDefault = () => {
         height: "100%"
       }}><Img
         src={staticFile(
-          '/images/showcases/devfestNantes/logo-devfest-mgm_transparent.svg',
+          '/images/showcases/devfestNantes/logo-devfest-2024.svg',
         )}
         width={"600px"}
         height="auto"
       />
       </div>
-    </AbsoluteFill>
-  );
+		</AbsoluteFill>
+	);
 };

src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefaultTotem.tsx

@@ -1,42 +1,49 @@
+import React from 'react';
 import {loadFont} from '@remotion/google-fonts/CrimsonText';
-import {AbsoluteFill, Img, Sequence, staticFile,} from 'remotion';
+import {AbsoluteFill, Img, Sequence, staticFile, 
+	Easing,
+	interpolate,
+	useCurrentFrame,} from 'remotion';
 
-import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-
-import {Android} from './Android';
-import {Dino} from './Dino';
+import {GhostBackground} from './GhostBackground';
+import {Logo} from './Logo';
+import {Moon} from './Moon';
+import {Trees} from './Trees';
 
 const {fontFamily} = loadFont();
 
 export const DevfestNantesDefaultTotem = () => {
+	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: 'white',
-        overflow: 'hidden',
-        fontFamily,
-        textTransform: 'uppercase',
-      }}
-    >
-      <Sequence>
-        <BackgroundFiller
-          imageUrl={staticFile(
-            '/images/showcases/devfestNantes/fond-visuel-etoiles.png',
-          )}
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-          }}
-        />
-      </Sequence>
-      <Sequence from={30}>
-        <Dino/>
-      </Sequence>
+	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={110}>
-        <Android isTotemDisplayMode/>
-      </Sequence>
+				<Moon isTotemDisplayMode />
+			</Sequence>
+			<Sequence from={30}>
+				<Trees />
+			</Sequence>
       <div style={{
         position: "absolute",
         display: "flex",
@@ -47,12 +54,12 @@ export const DevfestNantesDefaultTotem = () => {
         height: "75%",
       }}><Img
         src={staticFile(
-          '/images/showcases/devfestNantes/logo-devfest-mgm_transparent.svg',
+          '/images/showcases/devfestNantes/logo-devfest-2024.svg',
         )}
         width={"600px"}
         height="auto"
       />
-      </div>
-    </AbsoluteFill>
-  );
+			</div>
+		</AbsoluteFill>
+	);
 };