diff --git a/src/components/background/index.tsx b/src/components/background/index.tsx index b250ff1..bbd9010 100644 --- a/src/components/background/index.tsx +++ b/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 = ({ layout = "index", position = "left", + mobileOnly = false, }) => { const canvasRef = useRef(null); const engineRef = useRef(null); @@ -330,7 +332,9 @@ const Background: React.FC = ({ 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"; diff --git a/src/components/stream-content.tsx b/src/components/stream-content.tsx index a34b1e8..12b001b 100644 --- a/src/components/stream-content.tsx +++ b/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( diff --git a/src/layouts/content.astro b/src/layouts/content.astro index cff340e..7c9e985 100644 --- a/src/layouts/content.astro +++ b/src/layouts/content.astro @@ -56,13 +56,9 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
- -
- -
+
-
diff --git a/src/layouts/index.astro b/src/layouts/index.astro index cc0995a..d4294c2 100644 --- a/src/layouts/index.astro +++ b/src/layouts/index.astro @@ -41,7 +41,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";