Begin skins frontend

apps/app-frontend/src/App.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import {
   ArrowBigUpDashIcon,
+  ChangeSkinIcon,
   CompassIcon,
   DownloadIcon,
   HomeIcon,
@@ -399,6 +400,9 @@ function handleAuxClick(e) {
       >
         <CompassIcon />
       </NavButton>
+      <NavButton v-tooltip.right="'Skins'" to="/skins">
+        <ChangeSkinIcon />
+      </NavButton>
       <NavButton
         v-tooltip.right="'Library'"
         to="/library"

apps/app-frontend/src/components/ui/modal/ModalWrapper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import { NewModal as Modal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.ts'
@@ -26,16 +26,16 @@ const props = defineProps({
     default: true,
   },
 })
-const modal = ref(null)
+const modal = useTemplateRef('modal')
 
 defineExpose({
-  show: () => {
+  show: (e: MouseEvent) => {
     hide_ads_window()
-    modal.value.show()
+    modal.value?.show(e)
   },
   hide: () => {
     onModalHide()
-    modal.value.hide()
+    modal.value?.hide()
   },
 })
 

apps/app-frontend/src/components/ui/skin/CapeButton.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { EditIcon } from '@modrinth/assets'
+import { useVIntl } from '@vintl/vintl'
+import type { Cape, Skin } from '@/helpers/skins.ts'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  (e: 'select'): void
+}>()
+
+const highlighted = computed(() => props.selected ?? props.cape.is_equipped)
+
+const props = withDefaults(
+  defineProps<{
+    cape: Cape
+    selected?: boolean
+  }>(),
+  {
+    selected: undefined,
+  },
+)
+</script>
+
+<template>
+  <button v-tooltip="cape.name" class="block border-0 m-0 p-0 bg-transparent group cursor-pointer" :aria-label="cape.name" @click="emit('select')">
+    <span
+      :class="
+        highlighted
+          ? `bg-brand highlighted-outer-glow`
+          : `bg-button-bg opacity-75 group-hover:opacity-100`
+      "
+      class="block p-[3px] rounded-lg border-0 group-active:scale-95 transition-all"
+    >
+      <span
+        class="block cursed-cape-shit rounded-[5px]"
+        :class="{ 'highlighted-inner-shadow': highlighted }"
+      >
+        <img :src="cape.texture" alt="" />
+      </span>
+    </span>
+  </button>
+</template>
+<style lang="scss" scoped>
+.cursed-cape-shit {
+  aspect-ratio: 10 / 16;
+  position: relative;
+  overflow: hidden;
+  box-sizing: content-box;
+}
+
+.cursed-cape-shit img {
+  position: absolute;
+  object-fit: cover;
+  image-rendering: pixelated;
+
+  // scales image up so that the target area of the texture (10x16) is 100% of the container
+  width: calc(64 / 10 * 100%);
+  height: calc(32 / 16 * 100%);
+
+  // offsets the image so that the target area is in the container
+  left: calc(1 / 10 * -100%);
+  top: calc(1 / 16 * -100%);
+
+  // scale the image up a little bit to avoid edges from the surrounding texture due to rounding
+  scale: 1.01;
+  transform-origin: calc(10 / 2 / 64 * 100%) calc(16 / 2 / 32 * 100%);
+}
+
+.highlighted-inner-shadow::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0.2);
+  z-index: 2;
+}
+
+@supports (background-color: color-mix(in srgb, transparent, transparent)) {
+  .highlighted-outer-glow {
+    box-shadow: 0 0 4px 2px color-mix(in srgb, var(--color-brand), transparent 70%);
+  }
+}
+</style>

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { computed, useTemplateRef } from 'vue'
+
+const modal = useTemplateRef('modal')
+
+const previewSkin = computed(() => `https://vzge.me/full/350/ProspectorDev.png?no=ears&y=180`)
+
+function show(e: MouseEvent) {
+  modal.value?.show(e)
+}
+
+function hide() {
+  modal.value?.hide()
+}
+
+defineExpose({
+  show,
+  hide,
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">Edit skin</span>
+    </template>
+    <div class="grid grid-cols-[auto_1fr] gap-6">
+      <div class="flex">
+        <img :src="previewSkin" alt="" class="w-auto my-auto h-60 object-contain" />
+      </div>
+    </div>
+  </ModalWrapper>
+</template>

apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { useTemplateRef, ref, computed } from 'vue'
+import CapeButton from '@/components/ui/skin/CapeButton.vue'
+import type { Cape } from '@/helpers/skins.ts'
+import { ButtonStyled, ScrollablePanel } from '@modrinth/ui'
+import { CheckIcon, XIcon} from '@modrinth/assets'
+
+const modal = useTemplateRef('modal')
+
+const emit = defineEmits<{
+  (e: 'select', cape: string | undefined): void
+}>()
+
+const props = defineProps<{
+  capes: Cape[];
+}>()
+
+
+const currentSkin = ref<string | undefined>()
+const currentCape = ref<Cape | undefined>()
+
+const previewSkin = computed(() => currentSkin.value ? `https://vzge.me/full/350/${currentSkin.value}.png?no=ears&y=180` : undefined)
+
+function show(e: MouseEvent, skin?: string, selected?: Cape) {
+  currentSkin.value = skin
+  currentCape.value = selected
+  modal.value?.show(e)
+}
+
+function select() {
+  emit('select', currentCape.value?.id)
+  hide()
+}
+
+function hide() {
+  modal.value?.hide()
+}
+
+defineExpose({
+  show,
+  hide,
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">Selecting a cape</span>
+    </template>
+    <div class="grid grid-cols-[auto_1fr] gap-6">
+      <div class="flex">
+        <img :src="previewSkin" alt="" class="w-auto my-auto h-60 object-contain" />
+      </div>
+      <div>
+        <ScrollablePanel class="h-[20rem] w-[30rem]">
+          <div class="grid grid-cols-6 gap-2 items-start w-full">
+            <CapeButton v-for="cape in capes" :key="`cape-${cape.id}`" :cape="cape" :selected="currentCape?.id === cape.id" @select="currentCape = cape" />
+          </div>
+        </ScrollablePanel>
+      </div>
+    </div>
+    <div class="flex gap-2 items-center">
+      <ButtonStyled color="brand">
+        <button @click="select">
+          <CheckIcon />
+          Select
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide">
+          <XIcon />
+          Cancel
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>

apps/app-frontend/src/components/ui/skin/SkinButton.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { EditIcon } from '@modrinth/assets'
+import { useVIntl } from '@vintl/vintl'
+import type { Cape, Skin } from '@/helpers/skins.ts'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  (e: 'select'): void
+  (e: 'edit', event: MouseEvent): void
+}>()
+
+const props = withDefaults(defineProps<{
+  skin: Skin
+  selected: boolean
+  defaultCape?: Cape
+  editable?: boolean
+}>(), {
+  defaultCape: undefined,
+  editable: false,
+})
+
+const base64Prefix = 'data:image/png;base64,'
+const mcUrlRegex = /texture\/([a-fA-F0-9]+)$/
+
+const texture = computed(() => {
+  const mcTextureMatch = props.skin.texture.match(mcUrlRegex)
+
+  if (mcTextureMatch) {
+    return mcTextureMatch[1]
+  } else if (props.skin.texture.startsWith(base64Prefix)) {
+    return props.skin.texture.split(base64Prefix)[1]
+  } else {
+    return props.skin.texture
+  }
+})
+
+const slim = computed(() => props.skin.variant === 'Slim')
+
+const skinUrl = computed(
+  () => `https://vzge.me/bust/${texture.value}.png?no=ears${slim.value ? '&slim' : ''}`,
+)
+const backUrl = computed(() => `${skinUrl.value}&y=130`)
+
+const pressed = ref(false)
+</script>
+
+<template>
+  <div
+    class="skin-button__parent group flex relative border-2 border-solid transform-3d rotate-y-90 transition-all h-40 p-0 bg-transparent rounded-xl overflow-hidden"
+    :class="[
+      selected ? `border-brand` : 'border-transparent',
+      {
+        'scale-95': pressed,
+      },
+    ]"
+  >
+    <button
+      class="absolute inset-0 rounded-xl cursor-pointer p-0 border-none group-hover:brightness-125"
+      :class="selected ? `bg-brand-highlight` : 'bg-button-bg'"
+      @mousedown="pressed = true"
+      @mouseup="pressed = false"
+      @mouseleave="pressed = false"
+      @click="emit('select')"
+    ></button>
+    <span class="skin-button__image-parent pointer-events-none w-full h-full">
+      <img
+        alt=""
+        :src="skinUrl"
+        class="skin-button__image-facing rounded-xl object-contain object-bottom w-full h-full mt-auto mx-auto"
+      />
+      <img
+        alt=""
+        :src="backUrl"
+        class="skin-button__image-away rounded-xl object-contain object-bottom w-full h-full mt-auto mx-auto"
+      />
+    </span>
+    <span
+      v-if="editable"
+      class="absolute pointer-events-none inset-0 flex items-end p-2 translate-y-4 -translate-x-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
+    >
+      <ButtonStyled color="brand">
+        <button
+          class="pointer-events-auto shadow-black/50 shadow-lg"
+          @mousedown.stop
+          @mouseup.stop
+          @click="(e) => emit('edit', e)"
+        >
+          <EditIcon />
+          {{ formatMessage(commonMessages.editButton) }}
+        </button>
+      </ButtonStyled>
+    </span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.skin-button__parent {
+  perspective: 1000px;
+
+  .skin-button__image-parent {
+    transform-style: preserve-3d;
+    display: grid;
+
+    /*
+      Set the images to be in the same position
+     */
+    .skin-button__image-facing,
+    .skin-button__image-away {
+      grid-area: 1 / 1;
+    }
+  }
+
+  .skin-button__image-parent {
+    transition: transform 0.3s ease-in-out;
+
+    .skin-button__image-away {
+      opacity: 0;
+      transform: rotateY(180deg);
+    }
+  }
+
+  :not(&:hover) {
+    .skin-button__image-parent {
+      .skin-button__image-facing {
+        animation: appear-halfway 0.3s ease-in-out forwards;
+      }
+
+      .skin-button__image-away {
+        animation: vanish-halfway 0.3s ease-in-out forwards;
+      }
+    }
+  }
+
+  &:hover {
+    .skin-button__image-parent {
+      transform: rotateY(180deg);
+
+      .skin-button__image-facing {
+        animation: vanish-halfway 0.3s ease-in-out forwards;
+      }
+
+      .skin-button__image-away {
+        animation: appear-halfway 0.3s ease-in-out forwards;
+      }
+    }
+  }
+}
+
+@keyframes vanish-halfway {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes appear-halfway {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

apps/app-frontend/src/helpers/skins.ts

@@ -0,0 +1,64 @@
+import { invoke } from '@tauri-apps/api/core'
+
+export interface Cape {
+  id: string
+  name: string
+  texture: string
+  is_default: boolean
+  is_equipped: boolean
+}
+
+export type SkinModel = 'Classic' | 'Slim' | 'Unknown'
+export type SkinSource = 'Default' | 'CustomExternal' | 'Custom'
+
+export interface Skin {
+  texture_key: string
+  name?: string
+  variant: SkinModel
+  cape_id?: string
+  texture: string
+  source: SkinSource
+  is_equipped: boolean
+}
+
+export async function get_available_capes(): Promise<Cape[]> {
+  return await invoke('plugin:minecraft-skins|get_available_capes', {})
+}
+
+export async function get_available_skins(): Promise<Skin[]> {
+  return await invoke('plugin:minecraft-skins|get_available_skins', {})
+}
+
+export async function add_and_equip_custom_skin(
+  texture_blob: Uint8Array,
+  variant: SkinModel,
+  cape_override?: Cape,
+): Promise<void> {
+  await invoke('plugin:minecraft-skins|add_and_equip_custom_skin', {
+    texture_blob,
+    variant,
+    cape_override,
+  })
+}
+
+export async function set_default_cape(cape?: Cape): Promise<void> {
+  await invoke('plugin:minecraft-skins|set_default_cape', {
+    cape,
+  })
+}
+
+export async function equip_skin(skin: Skin): Promise<void> {
+  await invoke('plugin:minecraft-skins|equip_skin', {
+    skin,
+  })
+}
+
+export async function remove_custom_skin(skin: Skin): Promise<void> {
+  await invoke('plugin:minecraft-skins|remove_custom_skin', {
+    skin,
+  })
+}
+
+export async function unequip_skin(): Promise<void> {
+  await invoke('plugin:minecraft-skins|unequip_skin')
+}

apps/app-frontend/src/pages/Index.vue

@@ -10,6 +10,7 @@ import dayjs from 'dayjs'
 import { get_search_results } from '@/helpers/cache.js'
 import type { SearchResult } from '@modrinth/utils'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
+import type { GameInstance } from '@/helpers/types'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -82,7 +83,7 @@ async function refreshFeaturedProjects() {
 await fetchInstances()
 await refreshFeaturedProjects()
 
-const unlistenProfile = await profile_listener(async (e) => {
+const unlistenProfile = await profile_listener(async (e: { event: string; profile_path_id: string }) => {
   await fetchInstances()
 
   if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
@@ -97,8 +98,8 @@ onUnmounted(() => {
 
 <template>
   <div class="p-6 flex flex-col gap-2">
-    <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
-    <h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
+    <h1 v-if="recentInstances?.length > 0" class="m-0 text-2xl font-extrabold">Welcome back!</h1>
+    <h1 v-else class="m-0 text-2xl font-extrabold">Welcome to Modrinth App!</h1>
     <RecentWorldsList :recent-instances="recentInstances" />
     <RowDisplay
       v-if="hasFeaturedProjects"

apps/app-frontend/src/pages/Skins.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { UpdatedIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
+import { ref, computed, useTemplateRef } from 'vue'
+import SkinButton from '@/components/ui/skin/SkinButton.vue'
+import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
+import type { Cape, Skin, SkinModel } from '@/helpers/skins.ts'
+import { get_available_skins, get_available_capes } from '@/helpers/skins.ts'
+import { handleError } from '@/store/notifications'
+import CapeButton from '@/components/ui/skin/CapeButton.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+
+const editSkinModal = useTemplateRef('editSkinModal')
+const selectCapeModal = useTemplateRef('selectCapeModal')
+
+const selectedSkin = ref('ProspectorDev')
+const previewSkin = computed(() => `https://vzge.me/full/350/${selectedSkin.value}.png?no=ears`)
+
+const savedSkins = computed(() => skins.value.filter((skin) => skin.source !== 'Default'))
+const defaultSkins = computed(() =>
+  skins.value
+    .filter(
+      (skin) =>
+        skin.source === 'Default' && (!skin.name || skin.variant === defaultModels[skin.name]),
+    )
+    .sort((a, b) => {
+      if (!a.name || !defaultModelSorting.includes(a.name)) {
+        return 1
+      } else if (!b.name || !defaultModelSorting.includes(b.name)) {
+        return -1
+      }
+
+      return defaultModelSorting.indexOf(a.name) - defaultModelSorting.indexOf(b.name)
+    }),
+)
+const currentCape = ref<Cape | undefined>()
+
+const defaultModelSorting = ['Steve', 'Alex']
+
+const defaultModels: Record<string, SkinModel> = {
+  Steve: 'Classic',
+  Alex: 'Slim',
+  Zuri: 'Classic',
+  Sunny: 'Classic',
+  Noor: 'Slim',
+  Makena: 'Slim',
+  Kai: 'Classic',
+  Efe: 'Slim',
+  Ari: 'Classic',
+}
+
+const skins = ref<Skin[]>([])
+const capes = ref<Cape[]>([])
+
+await loadCapes()
+await loadSkins()
+
+async function loadCapes() {
+  await get_available_capes()
+    .then((c) => {
+      capes.value = c
+      currentCape.value = capes.value.find((cape) => cape.is_equipped)
+      console.log(c)
+    })
+    .catch((err) => handleError(err))
+}
+
+async function loadSkins() {
+  await get_available_skins()
+    .then((s) => {
+      skins.value = s
+      console.log(s)
+    })
+    .catch((err) => handleError(err))
+}
+</script>
+<template>
+  <EditSkinModal ref="editSkinModal" />
+  <SelectCapeModal ref="selectCapeModal" :capes="capes" />
+  <div class="p-6 grid grid-cols-[300px_1fr] xl:grid-cols-[3fr_5fr] gap-6">
+    <div class="sticky top-6 self-start">
+      <div class="flex justify-between gap-4">
+        <h1 class="m-0 text-2xl font-extrabold">Skins</h1>
+        <div>
+          <ButtonStyled>
+            <button @click="(e: MouseEvent) => selectCapeModal?.show(e, selectedSkin, currentCape)">
+              <UpdatedIcon />
+              Change cape
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+      <div class="h-[80vh] flex items-center justify-center">
+        <img alt="" :src="previewSkin" />
+      </div>
+    </div>
+    <div class="flex flex-col gap-6 add-perspective">
+      <div class="flex flex-col gap-3">
+        <h2 class="text-lg font-bold m-0 text-primary">Saved skins</h2>
+        <div class="grid grid-cols-3 gap-2">
+          <button
+            class="flex flex-col gap-3 active:scale-95 hover:brightness-125 font-medium text-primary items-center justify-center border-2 border-transparent border-solid cursor-pointer h-40 bg-button-bg rounded-xl"
+            @click="editSkinModal?.show"
+          >
+            <PlusIcon class="w-6 h-6" />
+            Add a skin
+          </button>
+          <SkinButton
+            v-for="skin in savedSkins"
+            :key="`saved-skin-${skin.texture_key}`"
+            editable
+            :skin="skin"
+            :selected="selectedSkin === skin.texture_key"
+            @select="selectedSkin = skin.texture_key"
+            @edit="editSkinModal?.show"
+          />
+        </div>
+      </div>
+      <div class="flex flex-col gap-3">
+        <h2 class="text-lg font-bold m-0 text-primary">Default skins</h2>
+        <div class="grid grid-cols-3 gap-2">
+          <SkinButton
+            v-for="skin in defaultSkins"
+            :key="`default-skin-${skin.texture_key}`"
+            :skin="skin"
+            :selected="selectedSkin === skin.texture_key"
+            @select="selectedSkin = skin.texture_key"
+            @edit="editSkinModal?.show"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped></style>

apps/app-frontend/src/pages/index.js

@@ -1,5 +1,6 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
 import Worlds from './Worlds.vue'
+import Skins from './Skins.vue'
 
-export { Index, Browse, Worlds }
+export { Index, Browse, Worlds, Skins }

apps/app-frontend/src/routes.js

@@ -34,6 +34,14 @@ export default new createRouter({
         breadcrumb: [{ name: 'Discover content' }],
       },
     },
+    {
+      path: '/skins',
+      name: 'Skins',
+      component: Pages.Skins,
+      meta: {
+        breadcrumb: [{ name: 'Skins' }],
+      },
+    },
     {
       path: '/library',
       name: 'Library',

packages/assets/icons/change-skin.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" transform="scale(-1 1)" viewBox="0 0 49.915 52.72">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M15.71 31.484v19.07h18.63v-19.07l6.538 6.539 6.871-6.872-11.203-11.733H14.122L2.166 31.375l6.827 6.827z"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.993" d="M24.872 19.548v-6.44"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M24.704 13.202a5.518 5.518 0 0 1-5.518-5.518 5.518 5.518 0 0 1 5.518-5.518 5.518 5.518 0 0 1 5.518 5.518"/>
+</svg>

packages/assets/index.ts

@@ -57,6 +57,7 @@ import _BoxImportIcon from './icons/box-import.svg?component'
 import _BracesIcon from './icons/braces.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
+import _ChangeSkinIcon from './icons/change-skin.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
@@ -276,6 +277,7 @@ export const BoxIcon = _BoxIcon
 export const BoxImportIcon = _BoxImportIcon
 export const BracesIcon = _BracesIcon
 export const CalendarIcon = _CalendarIcon
+export const ChangeSkinIcon = _ChangeSkinIcon
 export const ChartIcon = _ChartIcon
 export const CheckIcon = _CheckIcon
 export const CheckCheckIcon = _CheckCheckIcon

packages/ui/src/components/base/ScrollablePanel.vue

@@ -55,6 +55,7 @@ onUnmounted(() => {
   }
 })
 function updateFade(scrollTop, offsetHeight, scrollHeight) {
+  console.log(scrollTop, offsetHeight, scrollHeight)
   scrollableAtBottom.value = Math.ceil(scrollTop + offsetHeight) >= scrollHeight
   scrollableAtTop.value = scrollTop <= 0
 }
@@ -64,6 +65,18 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
 </script>
 
 <style lang="scss" scoped>
+@property --_top-fade-height {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --_bottom-fade-height {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
 .scrollable-pane-wrapper {
   display: flex;
   flex-direction: column;
@@ -75,27 +88,23 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   display: flex;
   overflow: hidden;
   position: relative;
+  transition: --_top-fade-height 0.05s linear, --_bottom-fade-height 0.05s linear;
 
-  --_fade-height: 4rem;
+  --_fade-height: 3rem;
+
+  mask-image: linear-gradient(
+      transparent,
+      rgb(0 0 0 / 100%) var(--_top-fade-height, 0%),
+      rgb(0 0 0 / 100%) calc(100% - var(--_bottom-fade-height, 0%)),
+      transparent 100%
+  );
 
   &.top-fade {
-    mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height));
+    --_top-fade-height: var(--_fade-height);
   }
 
   &.bottom-fade {
-    mask-image: linear-gradient(
-      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
-      transparent 100%
-    );
-  }
-
-  &.top-fade.bottom-fade {
-    mask-image: linear-gradient(
-      transparent,
-      rgb(0 0 0 / 100%) var(--_fade-height),
-      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
-      transparent 100%
-    );
+    --_bottom-fade-height: var(--_fade-height);
   }
 }
 .scrollable-pane {