From b94a088e633d5f450d95d83a2b2101242ab7bf95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rald=20Lbn?= <gerald.leban0@gmail.com>
Date: Tue, 3 Feb 2026 00:10:32 +0100
Subject: [PATCH] fix: round interpolated values and adjust extrapolation
 behavior

---
 src/remotion/MyPerformances.tsx |  2 +-
 src/remotion/ThisIsMyRecap.tsx  | 13 +++++++++++--
 src/remotion/Tournaments.tsx    |  3 +--
 src/remotion/components/Bar.tsx | 10 ++++++++--
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/remotion/MyPerformances.tsx b/src/remotion/MyPerformances.tsx
index cac9e60..21a4ec5 100644
--- a/src/remotion/MyPerformances.tsx
+++ b/src/remotion/MyPerformances.tsx
@@ -60,7 +60,7 @@ const MyPerformanceCard: React.FC<
     }
   });
 
-  const translateX = interpolate(progress, [0, 1], [200, 0]);
+  const translateX = Math.floor(interpolate(progress, [0, 1], [200, 0]));
   const opacity = interpolate(progress, [0, 1], [0, 1]);
 
   const placementColor = useMemo(() => {
diff --git a/src/remotion/ThisIsMyRecap.tsx b/src/remotion/ThisIsMyRecap.tsx
index 2e36a9f..46af3bc 100644
--- a/src/remotion/ThisIsMyRecap.tsx
+++ b/src/remotion/ThisIsMyRecap.tsx
@@ -36,8 +36,17 @@ export const ThisIsMyRecap: React.FC<ThisIsMyRecapProps> = ({
     }
   });
 
-  const titleTranslateY = interpolate(entrance, [0, 1], [-height, 0]);
-  const cardTranslateY = interpolate(entrance, [0, 1], [height, height * 0.3]);
+  const titleTranslateY = Math.ceil(
+    interpolate(entrance, [0, 1], [-height, 0], {
+      extrapolateRight: 'clamp'
+    })
+  );
+  const cardTranslateY = Math.floor(
+    interpolate(entrance, [0, 1], [height, height * 0.3], {
+      extrapolateLeft: 'identity',
+      extrapolateRight: 'clamp'
+    })
+  );
 
   return (
     <AbsoluteFill
diff --git a/src/remotion/Tournaments.tsx b/src/remotion/Tournaments.tsx
index b6e6dfa..5433986 100644
--- a/src/remotion/Tournaments.tsx
+++ b/src/remotion/Tournaments.tsx
@@ -31,8 +31,7 @@ export const Tournaments: React.FC<TournamentsProps> = ({ year, attendance }) =>
     [TOURNAMENTS_DURATION - 10, TOURNAMENTS_DURATION],
     [1, 0],
     {
-      extrapolateLeft: 'clamp',
-      extrapolateRight: 'clamp'
+      extrapolateLeft: 'clamp'
     }
   );
 
diff --git a/src/remotion/components/Bar.tsx b/src/remotion/components/Bar.tsx
index 1982e8a..e32b5d7 100644
--- a/src/remotion/components/Bar.tsx
+++ b/src/remotion/components/Bar.tsx
@@ -23,8 +23,14 @@ export const Bar: React.FC<BarProps> = ({ label, value, isHighest, maxHeight, in
     }
   });
 
-  const displayedValue = Math.round(interpolate(progress, [0, 1], [0, value]));
-  const currentHeight = interpolate(progress, [0, 1], [0, maxHeight]);
+  const displayedValue = Math.round(
+    interpolate(progress, [0, 1], [0, value], {
+      extrapolateRight: 'identity'
+    })
+  );
+  const currentHeight = interpolate(progress, [0, 1], [0, maxHeight], {
+    extrapolateRight: 'identity'
+  });
 
   return (
     <div