feat: sleak transition from store page to item

app.vue

@@ -8,3 +8,15 @@
 <script setup lang="ts">
 await updateUser();
 </script>
+
+<style scoped>
+/* You can customise the default animation here. */
+
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+</style>

components/GamePanel.vue

@@ -3,20 +3,31 @@
     v-if="game"
     :href="props.href ?? `/store/${game.id}`"
     class="group relative w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5"
+    @click.native="active = game.id"
+  >
+    <div
+      class="absolute inset-0 transition-all duration-300 group-hover:scale-110"
     >
-   <div class="absolute inset-0 transition-all duration-300 group-hover:scale-110">
       <img
         :src="useObject(game.mCoverId)"
         class="w-full h-full object-cover brightness-[90%]"
+        :class="{ active: active === game.id }"
+        :alt="game.mName"
+      />
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent"
       />
-      <div class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent" />
     </div>
 
     <div class="absolute bottom-0 left-0 w-full p-3">
-      <h1 class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors">
+      <h1
+        class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors"
+      >
         {{ game.mName }}
       </h1>
-      <p class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors">
+      <p
+        class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors"
+      >
         {{ game.mShortDescription }}
       </p>
     </div>
@@ -35,13 +46,23 @@
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
-  game: SerializeObject<{
+  game:
+    | SerializeObject<{
         id: string;
         mCoverId: string;
         mName: string;
         mShortDescription: string;
-  }> | undefined;
+      }>
+    | undefined;
   href?: string;
 }>();
+
+const active = useState();
 </script>
 
+<style scoped>
+img.active {
+  view-transition-name: selected-game;
+  contain: layout;
+}
+</style>

nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
 
   experimental: {
     buildCache: true,
+    viewTransition: true,
   },
 
   vite: {

pages/store/[id]/index.vue

@@ -27,8 +27,9 @@
           class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center"
         >
           <img
-            class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded"
+            class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded gameCover"
             :src="useObject(game.mCoverId)"
+            :alt="game.mName"
           />
           <div class="flex items-center gap-x-2">
             <AddLibraryButton :gameId="game.id" />
@@ -219,3 +220,19 @@ useHead({
   title: game.mName,
 });
 </script>
+
+<style scoped>
+h1 {
+  view-transition-name: header;
+}
+img.gameCover {
+  view-transition-name: selected-game;
+}
+</style>
+
+<style>
+::view-transition-old(header),
+::view-transition-new(header) {
+  width: auto;
+}
+</style>