Fix shapes

App.tsx

@@ -8,26 +8,30 @@ import { Podium } from './components/Podium';
 import { QuizCreator } from './components/QuizCreator';
 import { RevealScreen } from './components/RevealScreen';
 
-const FloatingShapes = () => {
+const seededRandom = (seed: number) => {
-  // Deterministic "random" for SSR safety if needed, but client-side is fine here
+  const x = Math.sin(seed * 9999) * 10000;
-  const shapes = [...Array(15)].map((_, i) => ({
+  return x - Math.floor(x);
-    left: `${Math.random() * 100}%`,
+};
-    width: `${Math.random() * 100 + 40}px`,
-    height: `${Math.random() * 100 + 40}px`,
-    animationDuration: `${Math.random() * 20 + 15}s`,
-    animationDelay: `-${Math.random() * 20}s`,
-    borderRadius: Math.random() > 0.5 ? '50%' : '20%', // Mix of circles and rounded squares
-    background: 'rgba(255, 255, 255, 0.05)',
-  }));
 
+const FLOATING_SHAPES = [...Array(15)].map((_, i) => ({
+  left: `${seededRandom(i * 1) * 100}%`,
+  width: `${seededRandom(i * 2) * 100 + 40}px`,
+  height: `${seededRandom(i * 3) * 100 + 40}px`,
+  animationDuration: `${seededRandom(i * 4) * 20 + 15}s`,
+  animationDelay: `-${seededRandom(i * 5) * 20}s`,
+  borderRadius: seededRandom(i * 6) > 0.5 ? '50%' : '20%',
+  background: 'rgba(255, 255, 255, 0.05)',
+}));
+
+const FloatingShapes = React.memo(() => {
   return (
     <>
-      {shapes.map((style, i) => (
+      {FLOATING_SHAPES.map((style, i) => (
         <div key={i} className="floating-shape" style={style} />
       ))}
     </>
   );
-};
+});
 
 function App() {
   const {