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,6 +138,7 @@ export default async function ArtifactFormPage({
           <CardTitle>
             <div className="w-[276.5px]">
               <Link href="/">
+                <ViewTransition name="branch-/artifact">
                   <Image
                     style={{
                       transform: "translateY(-70%)",
@@ -148,6 +149,7 @@ export default async function ArtifactFormPage({
                     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="/">
+            <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,6 +159,7 @@ function HomeLink({
           className,
         )}
       >
+        <ViewTransition name={`branch-${href}`}>
           <Image
             src={logo}
             alt={name}
@@ -166,6 +167,7 @@ function HomeLink({
             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,6 +181,7 @@ export default async function EndgamePage({
           <CardTitle>
             <div className="w-[276.5px]">
               <Link href="/">
+                <ViewTransition name="branch-/rubgram">
                   <Image
                     style={{
                       transform: "translateY(-70%)",
@@ -191,6 +192,7 @@ export default async function EndgamePage({
                     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,6 +48,7 @@ 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="/">
+          <ViewTransition name="branch-/tl">
             <Image
               src={TierlistLogo}
               alt="Tierlist"
@@ -55,6 +57,7 @@ export default async function TierlistSelectionPage() {
               height={100}
               fetchPriority="high"
             />
+          </ViewTransition>
         </Link>
       </center>
       {vers.map((t) => (