fix(templates): fix blink shadow for devfest nantes 2024 (#1245)

lyonjs · Oct 14, 2024 · e8592ba · e8592ba
1 parent e04d21a
commit e8592ba
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 13 deletions.
diff --git a/public/images/showcases/devfestNantes/2024/background-filler-paysage.png b/public/images/showcases/devfestNantes/2024/background-filler-paysage.png
diff --git a/public/images/showcases/devfestNantes/2024/background-filler-totem.png b/public/images/showcases/devfestNantes/2024/background-filler-totem.png
diff --git a/public/images/showcases/devfestNantes/2024/background-speaker.png b/public/images/showcases/devfestNantes/2024/background-speaker.png
diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import {loadFont} from '@remotion/google-fonts/CrimsonText';
-import {AbsoluteFill, Sequence} from 'remotion';
+import {AbsoluteFill, Sequence, staticFile} from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {Details} from './Details';
@@ -25,14 +26,21 @@ export const DevfestNantes2024 = ({
 	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>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-paysage.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence from={30}>
 				<GhostBackground />
 			</Sequence>

diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantes2024Phrase.tsx
@@ -5,10 +5,12 @@ import {
 	Easing,
 	interpolate,
 	Sequence,
+	staticFile,
 	useCurrentFrame,
 } from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {GhostBackground} from './GhostBackground';
@@ -35,14 +37,21 @@ export const DevfestNantesPhrase2024 = ({
 	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>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-paysage.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence from={30}>
 				<GhostBackground />
 			</Sequence>

diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoop2024.tsx
@@ -5,10 +5,12 @@ import {
 	Easing,
 	interpolate,
 	Sequence,
+	staticFile,
 	useCurrentFrame,
 } from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {Details} from './Details';
@@ -39,14 +41,21 @@ export const DevfestNantesLoop2024 = ({
 	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>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-paysage.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence from={30}>
 				<GhostBackground />
 			</Sequence>

diff --git a/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx b/remotion/compositions/showcases/devfestNantes/2024/DevfestNantesLoopTotem2024.tsx
@@ -5,10 +5,12 @@ import {
 	Easing,
 	interpolate,
 	Sequence,
+	staticFile,
 	useCurrentFrame,
 } from 'remotion';
 import {z} from 'zod';
 
+import {BackgroundFiller} from '../../../../design/atoms/BackgroundFiller';
 import {ShowcaseDevfestNantes2024Schema} from '../types/types';
 
 import {Details} from './Details';
@@ -40,14 +42,21 @@ export const DevfestNantesLoopTotem2024 = ({
 	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>
+				<BackgroundFiller
+					imageUrl={staticFile(
+						'/images/showcases/devfestNantes/2024/background-filler-totem.png',
+					)}
+					style={{
+						transform: 'scale(1)',
+					}}
+				/>
+			</Sequence>
 			<Sequence>
 				<Logo isTotemDisplayMode />
 			</Sequence>