style: swap tl & guide wallpaper

app/(ui)/background.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import Image from "next/image";
+import Background0 from "#/bg.webp";
+import Background1 from "#/bgassets/buzzbg1-r2.webp";
+import Background2 from "#/bgassets/buzzbg2-r1.webp";
+import Background3 from "#/bgassets/buzzbg3-r1.webp";
+import Background4 from "#/bgassets/buzzbg4-r1.webp";
+import Background5 from "#/bgassets/buzzbg5-r1.webp";
+import Background6 from "#/bgassets/buzzbg6-r1.webp";
+import Background7 from "#/bgassets/buzzbg7-r1.webp";
+import type { StaticImport } from "next/dist/shared/lib/get-img-props";
+import { usePathname } from "next/navigation";
+import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { StarsRenderer } from "@/components/stars";
+
+type PrefixBackground = [`/${string}`, string | StaticImport, `/${string}`];
+const backgrounds = [
+  // path prefix, background, stars mask
+  ["/artifact", Background1, "/bgassets/buzzbg1-r2-mask.webp"],
+  ["/rubgram", Background2, "/bgassets/buzzbg2-r1-mask.webp"],
+  ["/donate", Background3, "/bgassets/buzzbg3-r1-mask.webp"],
+  ["/tl", Background5, "/bgassets/buzzbg4-r1-mask.webp"],
+  ["/guide", Background4, "/bgassets/buzzbg5-r1-mask.webp"],
+  ["/admin", Background6, "/bgassets/buzzbg6-r1-mask.webp"],
+  // unused
+  ["/donate", Background7, "/bgassets/buzzbg7-r1-mask.webp"],
+  // this should be last
+  ["/", Background0, "/mask.webp"],
+] satisfies PrefixBackground[];
+
+export function BackgroundProvider() {
+  const pathname = usePathname();
+  const [, background, mask] = useMemo(
+    () => backgrounds.find((b) => pathname.startsWith(b[0]))!,
+    [pathname],
+  );
+  const [transitioning, setTransitioning] = useState(false);
+  const [current, setCurrent] = useState<string | StaticImport>(background);
+
+  return (
+    <>
+      <Image
+        src={background}
+        alt="Background Swap"
+        className={cn(
+          "fixed top-0 left-0 z-[-1] h-fit min-h-dvh w-full object-cover opacity-0",
+          transitioning && "opacity-40 transition-opacity duration-500",
+        )}
+        onLoad={() => {
+          if (background === current) return;
+          setTransitioning(true);
+        }}
+        onTransitionEnd={() => {
+          if (!transitioning) return;
+          setCurrent(background);
+          setTransitioning(false);
+        }}
+      />
+      <Image
+        src={current}
+        alt="Background Current"
+        className={cn(
+          "fixed top-0 left-0 z-[-1] h-fit min-h-dvh w-full object-cover opacity-40",
+          transitioning && "opacity-0 transition-opacity duration-500",
+        )}
+      />
+      {transitioning || <StarsRenderer mask={mask} />}
+    </>
+  );
+}

app/(ui)/layout.tsx

@@ -1,11 +1,9 @@
 import { Anuphan } from "next/font/google";
 import { ViewTransition } from "react";
 import { Toaster } from "sonner";
-import Background from "#/bg.webp";
-import Image from "@/components/image";
-import { StarsRenderer } from "@/components/stars";
 import Providers, { VersionCheck } from "../client";
 import { Navbar } from "./navbar";
+import { BackgroundProvider } from "./background";
 
 const anuphan = Anuphan({
   variable: "--font-anuphan",
@@ -19,12 +17,7 @@ export default async function UiLayout({
 }) {
   return (
     <>
-      <Image
-        src={Background}
-        alt="Background"
-        className="fixed top-0 left-0 z-[-1] h-fit min-h-dvh w-full object-cover opacity-40"
-      />
-      <StarsRenderer />
+      <BackgroundProvider />
       <Providers>
         <ViewTransition>{children}</ViewTransition>
         <VersionCheck />

components/stars.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 
-export function StarsRenderer() {
+export function StarsRenderer({ mask }: { mask: string }) {
   const cv = useRef<HTMLCanvasElement | null>(null);
   const [loaded, setLoaded] = useState(false);
 
@@ -122,9 +122,12 @@ export function StarsRenderer() {
     <canvas
       ref={cv}
       className={cn(
-        "fixed top-0 left-0 z-[-1] h-fit min-h-dvh w-full mask-[url('/mask.webp')] mask-cover mask-center mask-no-repeat object-cover opacity-0 transition-opacity duration-5000",
+        "fixed top-0 left-0 z-[-1] h-fit min-h-dvh w-full mask-cover mask-center mask-no-repeat object-cover opacity-0 transition-opacity duration-5000",
         loaded && "opacity-40",
       )}
+      style={{
+        maskImage: `url(${JSON.stringify(mask)})`,
+      }}
     ></canvas>
   );
 }

util/cv.ts

@@ -0,0 +1,14 @@
+import { file, Glob, write } from "bun";
+import { rm } from "node:fs/promises";
+
+const g = new Glob("public/bgassets/*.png");
+
+for await (const img of g.scan()) {
+  file(img)
+    .image()
+    .webp()
+    .buffer()
+    .then((b) => write(img.replace(".png", ".webp"), b))
+    .then(() => rm(img))
+    .finally(() => console.log(img, "processed."));
+}