feat: icon transition

app/(ui)/artifact/page.tsx

@@ -9,7 +9,7 @@ import {
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import Link from "next/link";
-import { Suspense } from "react";
+import { Suspense, ViewTransition } from "react";
 import banner from "#/logos/artifact.webp";
 import { Blocker } from "@/components/blocker";
 import { ComboBox } from "@/components/combobox";
@@ -138,16 +138,18 @@ export default async function ArtifactFormPage({
           <CardTitle>
             <div className="w-[276.5px]">
               <Link href="/">
-                <Image
-                  style={{
-                    transform: "translateY(-70%)",
-                  }}
-                  className="absolute z-50"
-                  height={137.5}
-                  width={276.5}
-                  src={banner}
-                  alt="เสือกไอดีชาวบ้าน"
-                />
+                <ViewTransition name="branch-/artifact">
+                  <Image
+                    style={{
+                      transform: "translateY(-70%)",
+                    }}
+                    className="absolute z-50"
+                    height={137.5}
+                    width={276.5}
+                    src={banner}
+                    alt="เสือกไอดีชาวบ้าน"
+                  />
+                </ViewTransition>
               </Link>
             </div>
           </CardTitle>

app/(ui)/donate/page.tsx

@@ -37,6 +37,7 @@ import {
 } from "../rubgram/admin/@modal/manual/client";
 import { DownloadButton } from "../rubgram/client";
 import Link from "next/link";
+import { ViewTransition } from "react";
 
 const { TMN_DEST_PHONE_NUM, SASTIFY_API_PRIVKEY } = process.env as Record<
   string,
@@ -273,11 +274,13 @@ export default async function () {
         {/* oxlint-disable-next-line tailwindcss/enforce-canonical */}
         <div className="relative aspect-[304.5/30] w-full">
           <Link href="/">
-            <Image
-              src={DonateLogo}
-              alt="Donate Logo"
-              className="absolute left-1/2 w-3/4 -translate-x-1/2 -translate-y-2/3"
-            />
+            <ViewTransition name="branch-/donate">
+              <Image
+                src={DonateLogo}
+                alt="Donate Logo"
+                className="absolute left-1/2 w-3/4 -translate-x-1/2 -translate-y-2/3"
+              />
+            </ViewTransition>
           </Link>
         </div>
         <FormProvider id="tip" inDialog={false} onSubmit={submit}>

app/(ui)/page.tsx

@@ -1,6 +1,6 @@
 import type { StaticImport } from "next/dist/shared/lib/get-img-props";
 import Link from "next/link";
-import type { ReactNode } from "react";
+import { ViewTransition, type ReactNode } from "react";
 import Banner from "#/banner_t.webp";
 import ArtifactLogo from "#/logos/artifact.webp";
 import DonateLogo from "#/logos/donate.webp";
@@ -159,13 +159,15 @@ function HomeLink({
           className,
         )}
       >
-        <Image
-          src={logo}
-          alt={name}
-          className="h-24 w-48 object-contain transition-transform duration-100 hover:scale-110 sm:h-40 sm:w-50"
-          width={200}
-          height={200}
-        />
+        <ViewTransition name={`branch-${href}`}>
+          <Image
+            src={logo}
+            alt={name}
+            className="h-24 w-48 object-contain transition-transform duration-100 hover:scale-110 sm:h-40 sm:w-50"
+            width={200}
+            height={200}
+          />
+        </ViewTransition>
         <span className="visible block text-lg md:hidden md:text-xs">
           {name}
         </span>

app/(ui)/rubgram/page.tsx

@@ -10,7 +10,7 @@ import {
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import Link from "next/link";
-import { Suspense } from "react";
+import { Suspense, ViewTransition } from "react";
 import PromptpayImage from "#/assets/promptpay.jpg";
 import banner from "#/logos/rubgram.webp";
 import { Blocker } from "@/components/blocker";
@@ -181,16 +181,18 @@ export default async function EndgamePage({
           <CardTitle>
             <div className="w-[276.5px]">
               <Link href="/">
-                <Image
-                  style={{
-                    transform: "translateY(-70%)",
-                  }}
-                  className="absolute z-50"
-                  height={137.5}
-                  width={276.5}
-                  src={banner}
-                  alt="รับกรรมแทนทางบ้าน"
-                />
+                <ViewTransition name="branch-/rubgram">
+                  <Image
+                    style={{
+                      transform: "translateY(-70%)",
+                    }}
+                    className="absolute z-50"
+                    height={137.5}
+                    width={276.5}
+                    src={banner}
+                    alt="รับกรรมแทนทางบ้าน"
+                  />
+                </ViewTransition>
               </Link>
             </div>
           </CardTitle>

app/(ui)/tl/page.tsx

@@ -9,6 +9,7 @@ import { SimpleTooltip } from "@/components/tooltip";
 import { ScrollBar } from "@/components/ui/scroll-area";
 import { db } from "@/lib/db";
 import { tierlistTypes, tierlistVersions } from "@/lib/db/schema";
+import { ViewTransition } from "react";
 
 export const metadata: Metadata = {
   title: "จัดเทียร์ลิสต์",
@@ -47,14 +48,16 @@ export default async function TierlistSelectionPage() {
     <div className="mx-2 flex min-h-full max-w-full flex-col justify-center gap-2">
       <center className="mb-2">
         <Link href="/">
-          <Image
-            src={TierlistLogo}
-            alt="Tierlist"
-            className="w-1/2 sm:w-96"
-            width={200}
-            height={100}
-            fetchPriority="high"
-          />
+          <ViewTransition name="branch-/tl">
+            <Image
+              src={TierlistLogo}
+              alt="Tierlist"
+              className="w-1/2 sm:w-96"
+              width={200}
+              height={100}
+              fetchPriority="high"
+            />
+          </ViewTransition>
         </Link>
       </center>
       {vers.map((t) => (