mobile optimizations

src/components/background/index.tsx

@@ -77,11 +77,13 @@ function readBgFromCSS(): string {
 interface BackgroundProps {
   layout?: "index" | "sidebar" | "content";
   position?: "left" | "right";
+  mobileOnly?: boolean;
 }
 
 const Background: React.FC<BackgroundProps> = ({
   layout = "index",
   position = "left",
+  mobileOnly = false,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const engineRef = useRef<AnimationEngine | null>(null);
@@ -330,7 +332,9 @@ const Background: React.FC<BackgroundProps> = ({
 
   const getContainerClasses = () => {
     if (isIndex) {
-      return "fixed inset-0 -z-10";
+      return mobileOnly
+        ? "fixed inset-0 -z-10 lg:hidden"
+        : "fixed inset-0 -z-10";
     }
 
     const baseClasses = "fixed top-0 bottom-0 hidden lg:block -z-10";

src/components/stream-content.tsx

@@ -56,13 +56,22 @@ export function StreamContent({ children }: { children: React.ReactNode }) {
       return;
     }
 
-    container.classList.remove("stream-hidden");
-
+    // Set inline opacity:0 on every block BEFORE removing the CSS class
+    // This prevents the flash of visible content between class removal and style application
     blocks.forEach((el) => {
       el.style.opacity = "0";
       el.style.transform = "translate3d(0,16px,0)";
-      el.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
-      el.style.willChange = "transform, opacity";
+    });
+
+    // Now safe to remove the CSS class — inline styles keep everything hidden
+    container.classList.remove("stream-hidden");
+
+    // Add transition properties in the next frame so the initial state is set first
+    requestAnimationFrame(() => {
+      blocks.forEach((el) => {
+        el.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
+        el.style.willChange = "transform, opacity";
+      });
     });
 
     const observer = new IntersectionObserver(