diff --git a/components.d.ts b/components.d.ts
index 5e0b86fbc..923437b02 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -47,6 +47,7 @@ declare module 'vue' {
     CoverList: typeof import('./src/components/list/CoverList.vue')['default']
     DbCacheManager: typeof import('./src/components/settings/custom/DbCacheManager.vue')['default']
     DefaultLyrics: typeof import('./src/components/player/Lyrics/DefaultLyrics.vue')['default']
+    DetailCover: typeof import('./src/components/collection/DetailCover.vue')['default']
     DeviceSelector: typeof import('./src/components/settings/custom/DeviceSelector.vue')['default']
     DialogClose: typeof import('reka-ui')['DialogClose']
     DialogContent: typeof import('reka-ui')['DialogContent']
@@ -117,6 +118,7 @@ declare module 'vue' {
     IconLucideHeart: typeof import('~icons/lucide/heart')['default']
     IconLucideHeartOff: typeof import('~icons/lucide/heart-off')['default']
     IconLucideHistory: typeof import('~icons/lucide/history')['default']
+    IconLucideHourglass: typeof import('~icons/lucide/hourglass')['default']
     IconLucideInfinity: typeof import('~icons/lucide/infinity')['default']
     IconLucideKey: typeof import('~icons/lucide/key')['default']
     IconLucideKeyRound: typeof import('~icons/lucide/key-round')['default']
diff --git a/package.json b/package.json
index 9bfdc999a..9fa46ff0f 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,7 @@
     "rimraf": "^6.1.3",
     "sortablejs": "^1.15.7",
     "tsx": "^4.23.7",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "unocss": "^66.7.5",
     "unplugin-auto-import": "^21.1.0",
     "unplugin-icons": "^23.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32212c109..5e1b3bd60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,7 +59,7 @@ importers:
         version: 0.6.0(@pixi/app@7.4.3(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3)))(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3))(@pixi/filter-blur@7.4.3(@pixi/core@7.4.3))(@pixi/filter-bulge-pinch@5.1.1(@pixi/core@7.4.3))(@pixi/filter-color-matrix@7.4.3(@pixi/core@7.4.3))(@pixi/sprite@7.4.3(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3)))(@types/node@22.19.17)(happy-dom@20.11.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
       '@electron-toolkit/eslint-config-ts':
         specifier: ^3.1.0
-        version: 3.1.0(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+        version: 3.1.0(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
       '@electron-toolkit/tsconfig':
         specifier: ^2.0.0
         version: 2.0.0(@types/node@22.19.17)
@@ -113,16 +113,16 @@ importers:
         version: 8.18.1
       '@vitejs/plugin-vue':
         specifier: ^6.0.8
-        version: 6.0.8(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@5.9.3))
+        version: 6.0.8(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@6.0.3))
       '@vue/test-utils':
         specifier: ^2.4.11
-        version: 2.4.11(@vue/compiler-dom@3.5.41)(@vue/server-renderer@3.5.41)(vue@3.5.41(typescript@5.9.3))
+        version: 2.4.11(@vue/compiler-dom@3.5.41)(@vue/server-renderer@3.5.41)(vue@3.5.41(typescript@6.0.3))
       '@vueuse/core':
         specifier: ^14.4.0
-        version: 14.4.0(vue@3.5.41(typescript@5.9.3))
+        version: 14.4.0(vue@3.5.41(typescript@6.0.3))
       '@vueuse/integrations':
         specifier: ^14.4.0
-        version: 14.4.0(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.41(typescript@5.9.3))
+        version: 14.4.0(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.41(typescript@6.0.3))
       colord:
         specifier: ^2.9.3
         version: 2.10.0
@@ -143,7 +143,7 @@ importers:
         version: 10.1.8(eslint@10.10.0(jiti@2.7.0))
       eslint-plugin-vue:
         specifier: ^10.11.0
-        version: 10.11.0(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.10.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.10.0(jiti@2.7.0)))
+        version: 10.11.0(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.10.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.10.0(jiti@2.7.0)))
       happy-dom:
         specifier: ^20.11.1
         version: 20.11.1
@@ -164,16 +164,16 @@ importers:
         version: 18.0.9
       pinia:
         specifier: ^4.0.2
-        version: 4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3))
+        version: 4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3))
       pinia-plugin-persistedstate:
         specifier: ^4.7.1
-        version: 4.7.1(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3)))
+        version: 4.7.1(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3)))
       prettier:
         specifier: ^3.9.6
         version: 3.9.6
       reka-ui:
         specifier: ^2.10.1
-        version: 2.10.1(vue@3.5.41(typescript@5.9.3))
+        version: 2.10.1(vue@3.5.41(typescript@6.0.3))
       rimraf:
         specifier: ^6.1.3
         version: 6.1.3
@@ -184,20 +184,20 @@ importers:
         specifier: ^4.23.7
         version: 4.23.7
       typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
+        specifier: ^6.0.3
+        version: 6.0.3
       unocss:
         specifier: ^66.7.5
         version: 66.7.5(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
       unplugin-auto-import:
         specifier: ^21.1.0
-        version: 21.1.0(@vueuse/core@14.4.0(vue@3.5.41(typescript@5.9.3)))(esbuild@0.28.1)(oxc-parser@0.131.0)(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
+        version: 21.1.0(@vueuse/core@14.4.0(vue@3.5.41(typescript@6.0.3)))(esbuild@0.28.1)(oxc-parser@0.131.0)(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
       unplugin-icons:
         specifier: ^23.0.1
         version: 23.0.1(@vue/compiler-sfc@3.5.41)
       unplugin-vue-components:
         specifier: ^31.1.0
-        version: 31.1.0(vue@3.5.41(typescript@5.9.3))
+        version: 31.1.0(vue@3.5.41(typescript@6.0.3))
       uqr:
         specifier: ^0.1.3
         version: 0.1.3
@@ -206,7 +206,7 @@ importers:
         version: 7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)
       vitepress:
         specifier: 2.0.0-alpha.15
-        version: 2.0.0-alpha.15(@types/node@22.19.17)(jiti@2.6.1)(postcss@8.5.26)(qrcode@1.5.4)(sass-embedded@1.100.0)(sass@1.100.0)(sortablejs@1.15.7)(tsx@4.23.7)(typescript@5.9.3)(yaml@2.9.0)
+        version: 2.0.0-alpha.15(@types/node@22.19.17)(jiti@2.6.1)(postcss@8.5.26)(qrcode@1.5.4)(sass-embedded@1.100.0)(sass@1.100.0)(sortablejs@1.15.7)(tsx@4.23.7)(typescript@6.0.3)(yaml@2.9.0)
       vitepress-plugin-llms:
         specifier: 1.14.0
         version: 1.14.0
@@ -215,19 +215,19 @@ importers:
         version: 4.1.10(@types/node@22.19.17)(happy-dom@20.11.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
       vue:
         specifier: ^3.5.41
-        version: 3.5.41(typescript@5.9.3)
+        version: 3.5.41(typescript@6.0.3)
       vue-eslint-parser:
         specifier: ^10.4.1
         version: 10.4.1(eslint@10.10.0(jiti@2.7.0))
       vue-i18n:
         specifier: ^11.4.8
-        version: 11.4.8(vue@3.5.41(typescript@5.9.3))
+        version: 11.4.8(vue@3.5.41(typescript@6.0.3))
       vue-router:
         specifier: ^5.2.0
-        version: 5.2.0(@vue/compiler-sfc@3.5.41)(esbuild@0.28.1)(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3)))(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@5.9.3))
+        version: 5.2.0(@vue/compiler-sfc@3.5.41)(esbuild@0.28.1)(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3)))(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@6.0.3))
       vue-tsc:
         specifier: ^3.3.9
-        version: 3.3.9(typescript@5.9.3)
+        version: 3.3.9(typescript@6.0.3)
 
 packages:
 
@@ -5015,11 +5015,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  typescript@5.9.3:
-    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@6.0.3:
     resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
     engines: {node: '>=14.17'}
@@ -5752,14 +5747,14 @@ snapshots:
 
   '@electron-internal/extract-zip@1.0.5': {}
 
-  '@electron-toolkit/eslint-config-ts@3.1.0(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)':
+  '@electron-toolkit/eslint-config-ts@3.1.0(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint/js': 9.39.4
       eslint: 10.10.0(jiti@2.7.0)
       globals: 16.5.0
-      typescript-eslint: 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+      typescript-eslint: 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -6198,11 +6193,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
-  '@floating-ui/vue@1.1.11(vue@3.5.41(typescript@5.9.3))':
+  '@floating-ui/vue@1.1.11(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@floating-ui/dom': 1.7.6
       '@floating-ui/utils': 0.2.11
-      vue-demi: 0.14.10(vue@3.5.41(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.41(typescript@6.0.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7174,10 +7169,10 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.23': {}
 
-  '@tanstack/vue-virtual@3.13.23(vue@3.5.41(typescript@5.9.3))':
+  '@tanstack/vue-virtual@3.13.23(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@tanstack/virtual-core': 3.13.23
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
   '@tybys/wasm-util@0.10.3':
     dependencies:
@@ -7277,40 +7272,40 @@ snapshots:
     dependencies:
       '@types/node': 22.19.17
 
-  '@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
       '@typescript-eslint/scope-manager': 8.58.1
-      '@typescript-eslint/type-utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
       '@typescript-eslint/visitor-keys': 8.58.1
       eslint: 10.10.0(jiti@2.7.0)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.58.1
       '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.3)
       '@typescript-eslint/visitor-keys': 8.58.1
       debug: 4.4.3
       eslint: 10.10.0(jiti@2.7.0)
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.58.1(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.58.1(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@6.0.3)
       '@typescript-eslint/types': 8.58.1
       debug: 4.4.3
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -7319,47 +7314,47 @@ snapshots:
       '@typescript-eslint/types': 8.58.1
       '@typescript-eslint/visitor-keys': 8.58.1
 
-  '@typescript-eslint/tsconfig-utils@8.58.1(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.58.1(typescript@6.0.3)':
     dependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  '@typescript-eslint/type-utils@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
       debug: 4.4.3
       eslint: 10.10.0(jiti@2.7.0)
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@8.58.1': {}
 
-  '@typescript-eslint/typescript-estree@8.58.1(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.58.1(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.58.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@5.9.3)
+      '@typescript-eslint/project-service': 8.58.1(typescript@6.0.3)
+      '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@6.0.3)
       '@typescript-eslint/types': 8.58.1
       '@typescript-eslint/visitor-keys': 8.58.1
       debug: 4.4.3
       minimatch: 10.2.5
       semver: 7.8.5
       tinyglobby: 0.2.17
-      ts-api-utils: 2.5.0(typescript@5.9.3)
-      typescript: 5.9.3
+      ts-api-utils: 2.5.0(typescript@6.0.3)
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.10.0(jiti@2.7.0))
       '@typescript-eslint/scope-manager': 8.58.1
       '@typescript-eslint/types': 8.58.1
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.3)
       eslint: 10.10.0(jiti@2.7.0)
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -7501,17 +7496,17 @@ snapshots:
       unplugin-utils: 0.3.2
       vite: 7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)
 
-  '@vitejs/plugin-vue@6.0.5(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.32(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.5(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.32(typescript@6.0.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
       vite: 7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)
-      vue: 3.5.32(typescript@5.9.3)
+      vue: 3.5.32(typescript@6.0.3)
 
-  '@vitejs/plugin-vue@6.0.8(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.8(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
       vite: 7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
   '@vitest/expect@4.1.10':
     dependencies:
@@ -7566,7 +7561,7 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue-macros/common@3.1.4(vue@3.5.41(typescript@5.9.3))':
+  '@vue-macros/common@3.1.4(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@vue/compiler-sfc': 3.5.32
       ast-kit: 2.2.0
@@ -7574,7 +7569,7 @@ snapshots:
       magic-string-ast: 1.0.3
       unplugin-utils: 0.3.2
     optionalDependencies:
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
   '@vue/compiler-core@3.5.32':
     dependencies:
@@ -7693,11 +7688,11 @@ snapshots:
       '@vue/shared': 3.5.41
       csstype: 3.2.3
 
-  '@vue/server-renderer@3.5.32(vue@3.5.32(typescript@5.9.3))':
+  '@vue/server-renderer@3.5.32(vue@3.5.32(typescript@6.0.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.32
       '@vue/shared': 3.5.32
-      vue: 3.5.32(typescript@5.9.3)
+      vue: 3.5.32(typescript@6.0.3)
 
   '@vue/server-renderer@3.5.41':
     dependencies:
@@ -7709,51 +7704,51 @@ snapshots:
 
   '@vue/shared@3.5.41': {}
 
-  '@vue/test-utils@2.4.11(@vue/compiler-dom@3.5.41)(@vue/server-renderer@3.5.41)(vue@3.5.41(typescript@5.9.3))':
+  '@vue/test-utils@2.4.11(@vue/compiler-dom@3.5.41)(@vue/server-renderer@3.5.41)(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@vue/compiler-dom': 3.5.41
       js-beautify: 1.15.4
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
       vue-component-type-helpers: 3.3.8
     optionalDependencies:
       '@vue/server-renderer': 3.5.41
 
-  '@vueuse/core@14.2.1(vue@3.5.32(typescript@5.9.3))':
+  '@vueuse/core@14.2.1(vue@3.5.32(typescript@6.0.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 14.2.1
-      '@vueuse/shared': 14.2.1(vue@3.5.32(typescript@5.9.3))
-      vue: 3.5.32(typescript@5.9.3)
+      '@vueuse/shared': 14.2.1(vue@3.5.32(typescript@6.0.3))
+      vue: 3.5.32(typescript@6.0.3)
 
-  '@vueuse/core@14.2.1(vue@3.5.41(typescript@5.9.3))':
+  '@vueuse/core@14.2.1(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 14.2.1
-      '@vueuse/shared': 14.2.1(vue@3.5.41(typescript@5.9.3))
-      vue: 3.5.41(typescript@5.9.3)
+      '@vueuse/shared': 14.2.1(vue@3.5.41(typescript@6.0.3))
+      vue: 3.5.41(typescript@6.0.3)
 
-  '@vueuse/core@14.4.0(vue@3.5.41(typescript@5.9.3))':
+  '@vueuse/core@14.4.0(vue@3.5.41(typescript@6.0.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 14.4.0
-      '@vueuse/shared': 14.4.0(vue@3.5.41(typescript@5.9.3))
-      vue: 3.5.41(typescript@5.9.3)
+      '@vueuse/shared': 14.4.0(vue@3.5.41(typescript@6.0.3))
+      vue: 3.5.41(typescript@6.0.3)
 
-  '@vueuse/integrations@14.2.1(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.32(typescript@5.9.3))':
+  '@vueuse/integrations@14.2.1(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.32(typescript@6.0.3))':
     dependencies:
-      '@vueuse/core': 14.2.1(vue@3.5.32(typescript@5.9.3))
-      '@vueuse/shared': 14.2.1(vue@3.5.32(typescript@5.9.3))
-      vue: 3.5.32(typescript@5.9.3)
+      '@vueuse/core': 14.2.1(vue@3.5.32(typescript@6.0.3))
+      '@vueuse/shared': 14.2.1(vue@3.5.32(typescript@6.0.3))
+      vue: 3.5.32(typescript@6.0.3)
     optionalDependencies:
       focus-trap: 7.8.0
       qrcode: 1.5.4
       sortablejs: 1.15.7
 
-  '@vueuse/integrations@14.4.0(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.41(typescript@5.9.3))':
+  '@vueuse/integrations@14.4.0(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.41(typescript@6.0.3))':
     dependencies:
-      '@vueuse/core': 14.4.0(vue@3.5.41(typescript@5.9.3))
-      '@vueuse/shared': 14.4.0(vue@3.5.41(typescript@5.9.3))
-      vue: 3.5.41(typescript@5.9.3)
+      '@vueuse/core': 14.4.0(vue@3.5.41(typescript@6.0.3))
+      '@vueuse/shared': 14.4.0(vue@3.5.41(typescript@6.0.3))
+      vue: 3.5.41(typescript@6.0.3)
     optionalDependencies:
       focus-trap: 7.8.0
       qrcode: 1.5.4
@@ -7763,17 +7758,17 @@ snapshots:
 
   '@vueuse/metadata@14.4.0': {}
 
-  '@vueuse/shared@14.2.1(vue@3.5.32(typescript@5.9.3))':
+  '@vueuse/shared@14.2.1(vue@3.5.32(typescript@6.0.3))':
     dependencies:
-      vue: 3.5.32(typescript@5.9.3)
+      vue: 3.5.32(typescript@6.0.3)
 
-  '@vueuse/shared@14.2.1(vue@3.5.41(typescript@5.9.3))':
+  '@vueuse/shared@14.2.1(vue@3.5.41(typescript@6.0.3))':
     dependencies:
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
-  '@vueuse/shared@14.4.0(vue@3.5.41(typescript@5.9.3))':
+  '@vueuse/shared@14.4.0(vue@3.5.41(typescript@6.0.3))':
     dependencies:
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
   '@xmldom/xmldom@0.8.13': {}
 
@@ -8522,7 +8517,7 @@ snapshots:
     dependencies:
       eslint: 10.10.0(jiti@2.7.0)
 
-  eslint-plugin-vue@10.11.0(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.10.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.10.0(jiti@2.7.0))):
+  eslint-plugin-vue@10.11.0(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.10.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.10.0(jiti@2.7.0))):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.10.0(jiti@2.7.0))
       eslint: 10.10.0(jiti@2.7.0)
@@ -8533,7 +8528,7 @@ snapshots:
       vue-eslint-parser: 10.4.1(eslint@10.10.0(jiti@2.7.0))
       xml-name-validator: 5.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
 
   eslint-scope@9.1.2:
     dependencies:
@@ -9736,19 +9731,19 @@ snapshots:
 
   picomatch@4.0.7: {}
 
-  pinia-plugin-persistedstate@4.7.1(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3))):
+  pinia-plugin-persistedstate@4.7.1(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3))):
     dependencies:
       defu: 6.1.7
     optionalDependencies:
-      pinia: 4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3))
+      pinia: 4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3))
 
-  pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3)):
+  pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3)):
     dependencies:
       '@vue/devtools-api': 8.2.1
       nostics: 1.2.0
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   pkce-challenge@5.0.1: {}
 
@@ -9919,19 +9914,19 @@ snapshots:
 
   regexp-tree@0.1.27: {}
 
-  reka-ui@2.10.1(vue@3.5.41(typescript@5.9.3)):
+  reka-ui@2.10.1(vue@3.5.41(typescript@6.0.3)):
     dependencies:
       '@floating-ui/dom': 1.7.6
-      '@floating-ui/vue': 1.1.11(vue@3.5.41(typescript@5.9.3))
+      '@floating-ui/vue': 1.1.11(vue@3.5.41(typescript@6.0.3))
       '@internationalized/date': 3.12.0
       '@internationalized/number': 3.6.7
-      '@tanstack/vue-virtual': 3.13.23(vue@3.5.41(typescript@5.9.3))
-      '@vueuse/core': 14.2.1(vue@3.5.41(typescript@5.9.3))
-      '@vueuse/shared': 14.2.1(vue@3.5.41(typescript@5.9.3))
+      '@tanstack/vue-virtual': 3.13.23(vue@3.5.41(typescript@6.0.3))
+      '@vueuse/core': 14.2.1(vue@3.5.41(typescript@6.0.3))
+      '@vueuse/shared': 14.2.1(vue@3.5.41(typescript@6.0.3))
       aria-hidden: 1.2.6
       defu: 6.1.7
       ohash: 2.0.11
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -10425,9 +10420,9 @@ snapshots:
     dependencies:
       utf8-byte-length: 1.0.5
 
-  ts-api-utils@2.5.0(typescript@5.9.3):
+  ts-api-utils@2.5.0(typescript@6.0.3):
     dependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   tslib@2.1.0:
     optional: true
@@ -10457,19 +10452,17 @@ snapshots:
 
   type-level-regexp@0.1.17: {}
 
-  typescript-eslint@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3):
+  typescript-eslint@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.58.1(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3))(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.58.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.58.1(@typescript-eslint/parser@8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.58.1(eslint@10.10.0(jiti@2.7.0))(typescript@6.0.3)
       eslint: 10.10.0(jiti@2.7.0)
-      typescript: 5.9.3
+      typescript: 6.0.3
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.9.3: {}
-
   typescript@6.0.3: {}
 
   uc.micro@2.1.0: {}
@@ -10597,7 +10590,7 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-auto-import@21.1.0(@vueuse/core@14.4.0(vue@3.5.41(typescript@5.9.3)))(esbuild@0.28.1)(oxc-parser@0.131.0)(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)):
+  unplugin-auto-import@21.1.0(@vueuse/core@14.4.0(vue@3.5.41(typescript@6.0.3)))(esbuild@0.28.1)(oxc-parser@0.131.0)(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)):
     dependencies:
       local-pkg: 1.2.1
       magic-string: 1.1.0
@@ -10606,7 +10599,7 @@ snapshots:
       unplugin: 3.3.0(esbuild@0.28.1)(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
       unplugin-utils: 0.3.2
     optionalDependencies:
-      '@vueuse/core': 14.4.0(vue@3.5.41(typescript@5.9.3))
+      '@vueuse/core': 14.4.0(vue@3.5.41(typescript@6.0.3))
     transitivePeerDependencies:
       - '@farmfe/core'
       - '@rspack/core'
@@ -10639,7 +10632,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.5
 
-  unplugin-vue-components@31.1.0(vue@3.5.41(typescript@5.9.3)):
+  unplugin-vue-components@31.1.0(vue@3.5.41(typescript@6.0.3)):
     dependencies:
       chokidar: 5.0.0
       local-pkg: 1.1.2
@@ -10650,7 +10643,7 @@ snapshots:
       tinyglobby: 0.2.16
       unplugin: 2.3.11
       unplugin-utils: 0.3.1
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
   unplugin@2.3.11:
     dependencies:
@@ -10766,7 +10759,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vitepress@2.0.0-alpha.15(@types/node@22.19.17)(jiti@2.6.1)(postcss@8.5.26)(qrcode@1.5.4)(sass-embedded@1.100.0)(sass@1.100.0)(sortablejs@1.15.7)(tsx@4.23.7)(typescript@5.9.3)(yaml@2.9.0):
+  vitepress@2.0.0-alpha.15(@types/node@22.19.17)(jiti@2.6.1)(postcss@8.5.26)(qrcode@1.5.4)(sass-embedded@1.100.0)(sass@1.100.0)(sortablejs@1.15.7)(tsx@4.23.7)(typescript@6.0.3)(yaml@2.9.0):
     dependencies:
       '@docsearch/css': 4.6.3
       '@docsearch/js': 4.6.3
@@ -10775,17 +10768,17 @@ snapshots:
       '@shikijs/transformers': 3.23.0
       '@shikijs/types': 3.23.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 6.0.5(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.32(typescript@5.9.3))
+      '@vitejs/plugin-vue': 6.0.5(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.32(typescript@6.0.3))
       '@vue/devtools-api': 8.2.1
       '@vue/shared': 3.5.32
-      '@vueuse/core': 14.2.1(vue@3.5.32(typescript@5.9.3))
-      '@vueuse/integrations': 14.2.1(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.32(typescript@5.9.3))
+      '@vueuse/core': 14.2.1(vue@3.5.32(typescript@6.0.3))
+      '@vueuse/integrations': 14.2.1(focus-trap@7.8.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.32(typescript@6.0.3))
       focus-trap: 7.8.0
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 3.23.0
       vite: 7.3.6(@types/node@22.19.17)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)
-      vue: 3.5.32(typescript@5.9.3)
+      vue: 3.5.32(typescript@6.0.3)
     optionalDependencies:
       postcss: 8.5.26
     transitivePeerDependencies:
@@ -10845,9 +10838,9 @@ snapshots:
 
   vue-component-type-helpers@3.3.8: {}
 
-  vue-demi@0.14.10(vue@3.5.41(typescript@5.9.3)):
+  vue-demi@0.14.10(vue@3.5.41(typescript@6.0.3)):
     dependencies:
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
   vue-eslint-parser@10.4.1(eslint@10.10.0(jiti@2.7.0)):
     dependencies:
@@ -10861,18 +10854,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@11.4.8(vue@3.5.41(typescript@5.9.3)):
+  vue-i18n@11.4.8(vue@3.5.41(typescript@6.0.3)):
     dependencies:
       '@intlify/core-base': 11.4.8
       '@intlify/devtools-types': 11.4.8
       '@intlify/shared': 11.4.8
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
 
-  vue-router@5.2.0(@vue/compiler-sfc@3.5.41)(esbuild@0.28.1)(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3)))(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@5.9.3)):
+  vue-router@5.2.0(@vue/compiler-sfc@3.5.41)(esbuild@0.28.1)(pinia@4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3)))(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))(vue@3.5.41(typescript@6.0.3)):
     dependencies:
       '@babel/generator': 8.0.0
-      '@vue-macros/common': 3.1.4(vue@3.5.41(typescript@5.9.3))
+      '@vue-macros/common': 3.1.4(vue@3.5.41(typescript@6.0.3))
       '@vue/devtools-api': 8.2.1
       ast-walker-scope: 0.9.0
       chokidar: 5.0.0
@@ -10888,11 +10881,11 @@ snapshots:
       tinyglobby: 0.2.17
       unplugin: 3.3.0(esbuild@0.28.1)(rollup@4.60.1)(vite@7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0))
       unplugin-utils: 0.3.2
-      vue: 3.5.41(typescript@5.9.3)
+      vue: 3.5.41(typescript@6.0.3)
       yaml: 2.9.0
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.41
-      pinia: 4.0.2(@vue/devtools-api@8.2.1)(typescript@5.9.3)(vue@3.5.41(typescript@5.9.3))
+      pinia: 4.0.2(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.41(typescript@6.0.3))
       vite: 7.3.6(@types/node@22.19.17)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(tsx@4.23.7)(yaml@2.9.0)
     transitivePeerDependencies:
       - '@farmfe/core'
@@ -10904,23 +10897,23 @@ snapshots:
       - unloader
       - webpack
 
-  vue-tsc@3.3.9(typescript@5.9.3):
+  vue-tsc@3.3.9(typescript@6.0.3):
     dependencies:
       '@volar/typescript': 2.4.28
       '@vue/language-core': 3.3.9
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  vue@3.5.32(typescript@5.9.3):
+  vue@3.5.32(typescript@6.0.3):
     dependencies:
       '@vue/compiler-dom': 3.5.32
       '@vue/compiler-sfc': 3.5.32
       '@vue/runtime-dom': 3.5.32
-      '@vue/server-renderer': 3.5.32(vue@3.5.32(typescript@5.9.3))
+      '@vue/server-renderer': 3.5.32(vue@3.5.32(typescript@6.0.3))
       '@vue/shared': 3.5.32
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
-  vue@3.5.41(typescript@5.9.3):
+  vue@3.5.41(typescript@6.0.3):
     dependencies:
       '@vue/compiler-dom': 3.5.41
       '@vue/compiler-sfc': 3.5.41
@@ -10928,7 +10921,7 @@ snapshots:
       '@vue/server-renderer': 3.5.41
       '@vue/shared': 3.5.41
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 6.0.3
 
   webcrypto-core@1.9.2:
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index e8dfa16ce..8da2011ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/stores/settings";
 
+const settings = useSettingsStore();
+
 watchEffect(() => {
-  const v = useSettingsStore().appearance.fontFamily;
+  document.documentElement.toggleAttribute("data-reduced-motion", settings.reducedMotion);
+  const v = settings.appearance.fontFamily;
   const root = document.documentElement.style;
   if (v) root.setProperty("--user-font", `${v}, var(--app-font)`);
   else root.removeProperty("--user-font");
diff --git a/src/components/collection/DetailCover.vue b/src/components/collection/DetailCover.vue
new file mode 100644
index 000000000..6d432e095
--- /dev/null
+++ b/src/components/collection/DetailCover.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { SImgProps } from "@/components/ui/SImg.vue";
+import defaultFallback from "@/assets/images/song.jpg";
+
+const props = withDefaults(defineProps<SImgProps>(), {
+  fallback: defaultFallback,
+  alt: "",
+});
+
+const loaded = ref(false);
+/** 缩略图本身失效时退回内置占位图，避免播放器持续显示破图 */
+const fallbackSrc = ref(props.fallback || defaultFallback);
+
+watch(
+  () => props.fallback,
+  (value) => {
+    fallbackSrc.value = value || defaultFallback;
+  },
+);
+
+watch(
+  () => props.src,
+  () => {
+    loaded.value = false;
+  },
+);
+
+/**
+ * 新封面解码完成后移除缩略图，忽略已被下一地址替换的加载结果
+ * @param event - 原生图片加载事件
+ */
+const handleLoad = async (event: Event): Promise<void> => {
+  const image = event.target as HTMLImageElement;
+  try {
+    await image.decode();
+  } catch {
+    return;
+  }
+  if (image.getAttribute("src") === props.src) loaded.value = true;
+};
+
+/** 兜底图加载失败时改用内置占位图 */
+const handleFallbackError = (): void => {
+  if (fallbackSrc.value !== defaultFallback) fallbackSrc.value = defaultFallback;
+};
+</script>
+
+<template>
+  <div class="relative isolate overflow-hidden">
+    <img
+      v-if="!loaded"
+      :src="fallbackSrc"
+      :alt="alt"
+      class="absolute inset-0 size-full object-cover"
+      decoding="async"
+      @error="handleFallbackError"
+    />
+    <img
+      v-if="src"
+      :key="src"
+      :src="src"
+      :alt="alt"
+      data-cover-image
+      class="absolute inset-0 size-full object-cover"
+      :style="{ opacity: loaded ? 1 : 0 }"
+      loading="eager"
+      decoding="async"
+      @load="handleLoad"
+      @error="loaded = false"
+    />
+  </div>
+</template>
diff --git a/src/components/list/CoverCard.vue b/src/components/list/CoverCard.vue
index b48b118e7..57963c1df 100644
--- a/src/components/list/CoverCard.vue
+++ b/src/components/list/CoverCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CoverItem } from "@/types/artist";
 import artistFallback from "@/assets/images/artist.jpg";
+import { captureCover } from "@/services/coverTransition";
 
 export interface CoverCardProps {
   /** 卡片数据 */
@@ -18,7 +19,15 @@ const props = withDefaults(defineProps<CoverCardProps>(), {
   rounded: "rounded-xl",
 });
 
-defineEmits<{ click: [] }>();
+const emit = defineEmits<{ click: [] }>();
+/** 稳定的封面标识：页面重新挂载后仍能匹配，不能用组件实例 ID */
+const coverKey = computed(() => `${props.type}:${props.item.id}`);
+
+/** 记录封面后分发点击，由实际目标路由决定是否启用共享过渡 */
+const handleClick = (): void => {
+  captureCover(props.item, coverKey.value);
+  emit("click");
+};
 
 const coverRounded = computed(() => (props.type === "artist" ? "rounded-full" : props.rounded));
 const actualFallback = computed(() => (props.type === "artist" ? artistFallback : props.fallback));
@@ -28,18 +37,21 @@ const actualFallback = computed(() => (props.type === "artist" ? artistFallback
   <div
     class="cursor-pointer group rounded-xl transition-colors duration-300"
     :class="type !== 'artist' ? 'hover:bg-primary/10' : ''"
-    @click="$emit('click')"
+    @click="handleClick"
   >
     <!-- 封面 -->
     <div class="relative overflow-hidden group-hover:will-change-transform" :class="coverRounded">
       <SImg
+        :data-cover-key="coverKey"
         :src="item.cover"
         :fallback="actualFallback"
         :alt="item.title"
-        class="w-full aspect-square transition-[transform,filter] duration-300 ease-out group-hover:scale-108 group-hover:brightness-80"
+        class="cover-card-image w-full aspect-square transition-[transform,filter] duration-300 ease-out group-hover:scale-108 group-hover:brightness-80"
+        :class="coverRounded"
       />
       <!-- 播放按钮 -->
       <div
+        data-cover-action
         class="absolute size-9 flex items-center justify-center rounded-full opacity-0 transition-[opacity,transform] duration-300 group-hover:opacity-100"
         :class="
           type === 'artist'
@@ -72,3 +84,16 @@ const actualFallback = computed(() => (props.type === "artist" ? artistFallback
     </div>
   </div>
 </template>
+
+<style scoped>
+[data-cover-shared] {
+  transform: none !important;
+  filter: none !important;
+  transition: none;
+}
+
+[data-cover-shared] + [data-cover-action] {
+  opacity: 0 !important;
+  transition: none;
+}
+</style>
diff --git a/src/components/player/FullPlayer/PlayerCover.vue b/src/components/player/FullPlayer/PlayerCover.vue
index b19c4b80e..38160351e 100644
--- a/src/components/player/FullPlayer/PlayerCover.vue
+++ b/src/components/player/FullPlayer/PlayerCover.vue
@@ -8,7 +8,7 @@ const media = useMediaStore();
 const status = useStatusStore();
 const { isPlaying } = storeToRefs(status);
 
-/** 加载中的歌曲使用队列当前项作为封面兜底。 */
+/** 加载中的歌曲使用队列当前项作为封面兜底 */
 const displayTrack = computed(() => media.track ?? status.currentTrack);
 
 /** 高清封面缓存 */
@@ -32,6 +32,7 @@ watchEffect(async () => {
 
 <template>
   <div
+    data-player-cover="full"
     :class="
       fullscreen
         ? 'player-cover-fullscreen w-full h-full aspect-auto rounded-none bg-transparent overflow-hidden shrink-0'
@@ -43,7 +44,7 @@ watchEffect(async () => {
           ]
     "
   >
-    <SImg :src="coverSrc" class="size-full" />
+    <DetailCover :src="coverSrc" :fallback="displayTrack?.cover" class="size-full" />
   </div>
 </template>
 
diff --git a/src/components/player/FullPlayer/PlayerData.vue b/src/components/player/FullPlayer/PlayerData.vue
index b53c7074a..a7a1f9a59 100644
--- a/src/components/player/FullPlayer/PlayerData.vue
+++ b/src/components/player/FullPlayer/PlayerData.vue
@@ -11,6 +11,7 @@ import {
   type ResourceNavigationTarget,
 } from "@/utils/navigate";
 import { getValidArtists } from "@shared/utils/track";
+import { setPlayerExpanded } from "@/services/playerTransition";
 
 const { t } = useI18n();
 
@@ -87,7 +88,7 @@ const isAlbumLinkable = computed(() =>
  * @param target - 详情页目标
  */
 const goToResource = (target: ResourceNavigationTarget | null): void => {
-  if (target && navigateToResource(target)) status.isPlayerExpanded = false;
+  if (target && navigateToResource(target)) setPlayerExpanded(false);
 };
 
 /** 来源标签 */
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 2ac9edc3d..ca10af583 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -14,6 +14,11 @@ import { useProgressLyric } from "@/composables/useProgressLyric";
 import Lyrics from "@/components/player/Lyrics/index.vue";
 import { useWindowControls } from "@/composables/useWindowControls";
 import * as player from "@/core/player";
+import {
+  playerTransition,
+  playerTransitionActive,
+  setPlayerExpanded,
+} from "@/services/playerTransition";
 
 const status = useStatusStore();
 const media = useMediaStore();
@@ -39,10 +44,13 @@ const { snapToNearestLyric } = useProgressLyric();
 
 const lyricRef = ref<InstanceType<typeof Lyrics>>();
 const lyricMounted = ref(false);
+const lyricReady = ref(false);
 const playerVisible = ref(false);
 const visualizerMounted = ref(false);
 const initialLyricTimeMs = ref(0);
-let visualizerMountFrame = 0;
+let visualizerIdle = 0;
+let enterPrepared = false;
+const visibility = useDocumentVisibility();
 
 /** 加载中的歌曲使用队列当前项兜底，避免全屏播放器出现空白 */
 const displayTrack = computed(() => media.track ?? status.currentTrack);
@@ -56,8 +64,47 @@ const { start: startTick, stop: stopTick } = usePlaybackTime((currentMs) => {
   }
 });
 
-/** 展开后 */
-const onAfterEnter = () => {
+/** 歌词首帧就绪后在空闲时段创建可视化，避免布局测量与 WebGL 初始化争抢一帧 */
+const scheduleVisualizers = (): void => {
+  if (
+    visualizerIdle ||
+    visualizerMounted.value ||
+    playerTransitionActive.value ||
+    !isPlayerExpanded.value ||
+    visibility.value !== "visible"
+  ) {
+    return;
+  }
+  visualizerIdle = requestIdleCallback(
+    () => {
+      visualizerIdle = 0;
+      if (
+        isPlayerExpanded.value &&
+        !playerTransitionActive.value &&
+        visibility.value === "visible"
+      ) {
+        visualizerMounted.value = true;
+      }
+    },
+    { timeout: 500 },
+  );
+};
+
+/** 歌词完成首次布局后安排可视化初始化 */
+const onLyricReady = (): void => {
+  if (!isPlayerExpanded.value) return;
+  lyricReady.value = true;
+  scheduleVisualizers();
+};
+
+watch(visibility, (value) => {
+  if (value === "visible" && lyricReady.value) scheduleVisualizers();
+});
+
+/** 每次展开只初始化一次歌词，复用已挂载内容处理快速收起再展开 */
+const preparePlayerContent = (): void => {
+  if (enterPrepared) return;
+  enterPrepared = true;
   initialLyricTimeMs.value = getCurrentTime() + status.lyricOffsetMs;
   lyricMounted.value = true;
   nextTick(() => {
@@ -65,38 +112,79 @@ const onAfterEnter = () => {
     lyricRef.value?.setCurrentTime(getCurrentTime() + status.lyricOffsetMs);
     lyricRef.value?.resume();
     startTick();
-    // 将 WebGL 和频谱创建与歌词 DOM 测量错开
-    visualizerMountFrame = requestAnimationFrame(() => {
-      visualizerMountFrame = requestAnimationFrame(() => {
-        visualizerMountFrame = 0;
-        if (isPlayerExpanded.value) visualizerMounted.value = true;
-      });
-    });
+    if (lyricReady.value) scheduleVisualizers();
+    else if (!hasLyric.value) onLyricReady();
   });
 };
 
-/** 收起前 */
+/** 展开前仅显示静态背景与封面 */
+const onBeforeEnter = (): void => {
+  playerVisible.value = true;
+  enterPrepared = false;
+};
+
+/** 普通过渡完成后准备内容，共享过渡由快照就绪驱动 */
+const onAfterEnter = (): void => {
+  if (!playerTransitionActive.value) preparePlayerContent();
+};
+
+watch(
+  playerTransition,
+  (active, previous, onCleanup) => {
+    if (!active) {
+      if (previous && isPlayerExpanded.value) {
+        preparePlayerContent();
+        if (lyricReady.value) scheduleVisualizers();
+      }
+      return;
+    }
+    let cancelled = false;
+    let idle = 0;
+    onCleanup(() => {
+      cancelled = true;
+      cancelIdleCallback(idle);
+    });
+    // 快照完成后再用空闲时段创建歌词，避免阻塞过渡的首帧
+    void active.ready.then(
+      () => {
+        if (cancelled || !isPlayerExpanded.value) return;
+        idle = requestIdleCallback(() => {
+          idle = 0;
+          if (isPlayerExpanded.value) preparePlayerContent();
+        });
+      },
+      () => {},
+    );
+  },
+  { immediate: true },
+);
+
+/** 收起前取消可视化初始化并冻结歌词 */
 const onBeforeLeave = () => {
-  cancelAnimationFrame(visualizerMountFrame);
-  visualizerMountFrame = 0;
+  cancelIdleCallback(visualizerIdle);
+  visualizerIdle = 0;
   lyricRef.value?.freeze();
   stopTick();
 };
 
-/** 收起后 */
+/** 收起结束后卸载歌词与可视化 */
 const onAfterLeave = () => {
   playerVisible.value = false;
   lyricMounted.value = false;
+  lyricReady.value = false;
   visualizerMounted.value = false;
 };
 
-onBeforeUnmount(() => cancelAnimationFrame(visualizerMountFrame));
+onBeforeUnmount(() => cancelIdleCallback(visualizerIdle));
 
-// 重新挂载时，刷新初始时间
+// 重新挂载时，刷新初始时间；加载结束仍无歌词时歌词组件会卸载，按就绪处理
 watch(hasLyric, (value) => {
-  if (value && lyricMounted.value) {
+  if (!lyricMounted.value) return;
+  if (value) {
     initialLyricTimeMs.value = getCurrentTime() + status.lyricOffsetMs;
+    return;
   }
+  onLyricReady();
 });
 
 // 歌词变化时先推送精确时间
@@ -165,10 +253,6 @@ const onDownloadSelect = (key: string): void => {
   void enqueueDownload(displayTrack.value, key ? { quality: key as QualityLevel } : {});
 };
 
-const collapse = (): void => {
-  isPlayerExpanded.value = false;
-};
-
 const onSeekDragEnd = (value: number): void => {
   player.seek(snapToNearestLyric(value));
 };
@@ -203,18 +287,19 @@ const showComments = (): void => {
   <Teleport to="body">
     <Transition
       appear
+      :css="!playerTransitionActive"
       enter-active-class="transition-transform duration-500 ease-[cubic-bezier(0.7,0,0.3,1)]"
       leave-active-class="transition-transform duration-500 ease-[cubic-bezier(0.7,0,0.3,1)]"
       enter-from-class="translate-y-full"
       leave-to-class="translate-y-full"
       @after-enter="onAfterEnter"
-      @before-enter="playerVisible = true"
+      @before-enter="onBeforeEnter"
       @before-leave="onBeforeLeave"
       @after-leave="onAfterLeave"
     >
       <div
         v-show="isPlayerExpanded"
-        class="fixed inset-0 z-200 overflow-hidden text-cover"
+        class="player-panel fixed inset-0 z-200 overflow-hidden text-cover"
         :class="immersive ? 'cursor-none [&_*]:!cursor-none' : ''"
         style="--lp-color: rgb(var(--s-cover))"
         @mouseenter="onPlayerMouseEnter"
@@ -335,6 +420,7 @@ const showComments = (): void => {
                 :initial-time="initialLyricTimeMs"
                 :playing="isPlaying"
                 @seek="handleLyricSeek"
+                @ready="onLyricReady"
               />
               <div
                 v-else-if="lyricMounted"
@@ -372,7 +458,13 @@ const showComments = (): void => {
           @mouseleave="onBarLeave"
         >
           <div class="flex-1 min-w-0 flex items-center justify-start gap-2">
-            <SButton type="cover" variant="ghost" size="large" circle @click="collapse">
+            <SButton
+              type="cover"
+              variant="ghost"
+              size="large"
+              circle
+              @click="setPlayerExpanded(false)"
+            >
               <template #icon><IconLucideChevronDown /></template>
             </SButton>
             <SButton
diff --git a/src/components/player/Lyrics/AMLLLyrics.vue b/src/components/player/Lyrics/AMLLLyrics.vue
index 9a8d90568..28b86cd9e 100644
--- a/src/components/player/Lyrics/AMLLLyrics.vue
+++ b/src/components/player/Lyrics/AMLLLyrics.vue
@@ -9,7 +9,6 @@ import { useSettingsStore } from "@/stores/settings";
 import { useStatusStore } from "@/stores/status";
 import { getCurrentTime } from "@/services/playback";
 import "@applemusic-like-lyrics/core/style.css";
-import LyricCredit from "./LyricCredit.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -56,6 +55,8 @@ const props = withDefaults(
 interface Emits {
   /** 点击歌词行进行播放进度跳转 */
   (e: "seek", timeMs: number): void;
+  /** 首次布局完成 */
+  (e: "ready"): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -236,6 +237,7 @@ onMounted(async () => {
   processLyricLanguage(player);
   initialized.value = true;
   contentVisible.value = true;
+  emit("ready");
 });
 
 onUnmounted(() => {
diff --git a/src/components/player/Lyrics/DefaultLyrics.spec.ts b/src/components/player/Lyrics/DefaultLyrics.spec.ts
index 75ea79230..6fdeba061 100644
--- a/src/components/player/Lyrics/DefaultLyrics.spec.ts
+++ b/src/components/player/Lyrics/DefaultLyrics.spec.ts
@@ -7,8 +7,6 @@ import { useSettingsStore } from "@/stores/settings";
 import DefaultLyrics from "./DefaultLyrics.vue";
 import Lyrics from "./index.vue";
 
-vi.mock("./LyricCredit.vue", () => ({ default: { template: "<span />" } }));
-vi.mock("./AMLLLyrics.vue", () => ({ default: { template: "<div />" } }));
 vi.mock("@/stores/settings", async () => {
   const { reactive } = await import("vue");
   const settings = reactive({
@@ -23,6 +21,11 @@ vi.mock("@/stores/settings", async () => {
   return { useSettingsStore: () => settings };
 });
 
+const lyricGlobals = {
+  components: { DefaultLyrics },
+  stubs: { AMLLLyrics: true, LyricCredit: true },
+};
+
 const makeLine = (word: string): LyricLine => ({
   startTime: 1000,
   endTime: 2000,
@@ -47,7 +50,10 @@ describe("默认歌词引擎配置同步", () => {
 
   it("应用歌词设置直接驱动默认引擎的水平对齐", async () => {
     const settings = useSettingsStore();
-    const wrapper = mount(Lyrics, { props: { lyricLines: [makeLine("正文")] } });
+    const wrapper = mount(Lyrics, {
+      props: { lyricLines: [makeLine("正文")] },
+      global: lyricGlobals,
+    });
     try {
       const root = wrapper.get(".lp-root");
       expect(root.classes().filter((value) => value.startsWith("lp-align-"))).toEqual([]);
@@ -65,6 +71,7 @@ describe("默认歌词引擎配置同步", () => {
   it("初始化和动态切换水平对齐保留原歌词 DOM，auto 恢复声部布局", async () => {
     const wrapper = mount(DefaultLyrics, {
       props: { lyricLines: [makeLine("正文")], alignment: "center" },
+      global: lyricGlobals,
     });
     try {
       const original = wrapper.get(".lp-line").element;
@@ -81,7 +88,10 @@ describe("默认歌词引擎配置同步", () => {
   });
 
   it("冻结时缓冲歌词更换，恢复后使用最新歌词和对齐配置", async () => {
-    const wrapper = mount(DefaultLyrics, { props: { lyricLines: [makeLine("旧歌词")] } });
+    const wrapper = mount(DefaultLyrics, {
+      props: { lyricLines: [makeLine("旧歌词")] },
+      global: lyricGlobals,
+    });
     try {
       wrapper.vm.freeze();
       await wrapper.setProps({ lyricLines: [makeLine("新歌词")], alignment: "right" });
diff --git a/src/components/player/Lyrics/DefaultLyrics.vue b/src/components/player/Lyrics/DefaultLyrics.vue
index 1b0c08b51..8673fa992 100644
--- a/src/components/player/Lyrics/DefaultLyrics.vue
+++ b/src/components/player/Lyrics/DefaultLyrics.vue
@@ -3,7 +3,6 @@ import type { LyricLine } from "lyric-kit";
 
 import { DEFAULTS, type LyricAlignment, type SpringParams, LyricRenderer } from "lyric-dom";
 import "lyric-dom/renderer.css";
-import LyricCredit from "./LyricCredit.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -130,6 +129,8 @@ const props = withDefaults(
 interface Emits {
   /** 用户点击歌词行时触发，参数为该行起始时间（毫秒），用于跳转播放进度 */
   (e: "seek", timeMs: number): void;
+  /** 首次布局与逐字测量完成 */
+  (e: "ready"): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -143,10 +144,7 @@ let isFrozen = false;
 let pendingLyrics: LyricLine[] | null = null;
 
 /**
- * 推送当前播放时间（毫秒）
- *
- * 由外部播放器在每帧或定时器中调用，驱动歌词滚动与逐字高亮动画。
- *
+ * 推送当前播放时间，驱动歌词滚动与逐字高亮
  * @param time - 当前播放时间（毫秒）
  * @param _isSeeking - 是否处于跳转状态
  */
@@ -175,7 +173,7 @@ const handleLineClick = (timeMs: number) => {
   emit("seek", timeMs);
 };
 
-onMounted(() => {
+onMounted(async () => {
   if (!containerRef.value) return;
   const { lyricLines: _lyricLines, initialTime: _initialTime, ...config } = props;
   renderer = new LyricRenderer(containerRef.value, {
@@ -190,6 +188,12 @@ onMounted(() => {
     renderer.setLyrics(props.lyricLines);
   }
   bottomLineEl.value = renderer.getBottomLineElement();
+  const current = renderer;
+  await nextTick();
+  await new Promise<void>((resolve) =>
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+  );
+  if (renderer === current) emit("ready");
 });
 
 onUnmounted(() => {
diff --git a/src/components/player/Lyrics/index.vue b/src/components/player/Lyrics/index.vue
index cab3f6897..5e66c269b 100644
--- a/src/components/player/Lyrics/index.vue
+++ b/src/components/player/Lyrics/index.vue
@@ -2,9 +2,6 @@
 import type { LyricLine } from "lyric-kit";
 
 import { useSettingsStore } from "@/stores/settings";
-import AMLLLyrics from "./AMLLLyrics.vue";
-import DefaultLyrics from "./DefaultLyrics.vue";
-import LyricCredit from "./LyricCredit.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -23,6 +20,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (e: "seek", timeMs: number): void;
+  (e: "ready"): void;
 }>();
 
 const settings = useSettingsStore();
@@ -77,6 +75,7 @@ defineExpose({
     :show-word-romanization="settings.lyric.showWordRomanization"
     :bg-always-below="settings.lyric.bgAlwaysBelow"
     @seek="emit('seek', $event)"
+    @ready="emit('ready')"
   >
     <template #bottom>
       <slot name="bottom">
@@ -107,6 +106,7 @@ defineExpose({
     :show-romanization="settings.lyric.showRomanization"
     :show-word-romanization="settings.lyric.showWordRomanization"
     @seek="emit('seek', $event)"
+    @ready="emit('ready')"
   >
     <template #bottom>
       <slot name="bottom">
diff --git a/src/components/player/TrackInfo.vue b/src/components/player/TrackInfo.vue
index e2bb19a46..ed9d132ed 100644
--- a/src/components/player/TrackInfo.vue
+++ b/src/components/player/TrackInfo.vue
@@ -5,6 +5,7 @@ import { useMediaStore } from "@/stores/media";
 import { useSettingsStore } from "@/stores/settings";
 import { navigateToArtist } from "@/utils/navigate";
 import { getValidArtists } from "@shared/utils/track";
+import { setPlayerExpanded } from "@/services/playerTransition";
 
 withDefaults(
   defineProps<{
@@ -17,7 +18,7 @@ withDefaults(
 const status = useStatusStore();
 const media = useMediaStore();
 const settings = useSettingsStore();
-const { isPlayerExpanded, isPlaying } = storeToRefs(status);
+const { isPlaying } = storeToRefs(status);
 
 /** 当前歌曲中可展示的歌手 */
 const artists = computed(() => getValidArtists(media.track?.artists));
@@ -58,9 +59,9 @@ const isArtistLinkable = (artist: Artist): boolean => {
     <div
       class="relative shrink-0 rounded-lg overflow-hidden cursor-pointer group"
       :class="compact ? 'size-10 shadow-sm' : 'size-14'"
-      @click="isPlayerExpanded = true"
+      @click="setPlayerExpanded(true)"
     >
-      <SImg :src="media.track?.cover" class="size-full" />
+      <SImg :src="media.track?.cover" class="size-full rounded-lg" data-player-cover="bar" />
       <div
         class="absolute inset-0 z-10 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors duration-200"
       >
diff --git a/src/components/settings/SettingsSearch.vue b/src/components/settings/SettingsSearch.vue
index e49402beb..733f99337 100644
--- a/src/components/settings/SettingsSearch.vue
+++ b/src/components/settings/SettingsSearch.vue
@@ -108,7 +108,7 @@ const handleBlur = () => {
     >
       <div
         v-if="isSearchActive"
-        class="absolute left-0 right-0 top-full mt-2 max-h-[calc(75vh-220px)] overflow-y-auto rounded-lg border border-solid border-outline-variant/80 z-10 p-1"
+        class="motion-enter absolute left-0 right-0 top-full mt-2 max-h-[calc(75vh-220px)] overflow-y-auto rounded-lg border border-solid border-outline-variant/80 z-10 p-1"
       >
         <template v-if="results.length > 0">
           <div
diff --git a/src/components/ui/SImg.vue b/src/components/ui/SImg.vue
index c74aea618..e7ef70bd9 100644
--- a/src/components/ui/SImg.vue
+++ b/src/components/ui/SImg.vue
@@ -58,6 +58,7 @@ watch(
         <img
           :src="src"
           :alt="alt"
+          data-cover-image
           class="w-full h-full object-cover opacity-0 transition-opacity duration-200"
           decoding="async"
           loading="lazy"
diff --git a/src/components/ui/SMarquee.vue b/src/components/ui/SMarquee.vue
index 28c2381bd..379d374a0 100644
--- a/src/components/ui/SMarquee.vue
+++ b/src/components/ui/SMarquee.vue
@@ -68,7 +68,7 @@ onUnmounted(() => {
     }"
   >
     <div
-      class="inline-flex whitespace-nowrap min-w-full will-change-transform"
+      class="inline-flex whitespace-nowrap min-w-full"
       :class="isOverflowing && 's-marquee-scrolling'"
     >
       <span ref="textRef" class="inline-flex items-center whitespace-nowrap shrink-0">
@@ -87,6 +87,7 @@ onUnmounted(() => {
 
 <style scoped>
 .s-marquee-scrolling {
+  will-change: transform;
   animation: s-marquee-scroll var(--marquee-duration, 10s) linear var(--marquee-delay, 2s) infinite;
 }
 @keyframes s-marquee-scroll {
diff --git a/src/components/ui/STabs.vue b/src/components/ui/STabs.vue
index 2aae90eef..65ec500fe 100644
--- a/src/components/ui/STabs.vue
+++ b/src/components/ui/STabs.vue
@@ -261,15 +261,12 @@ const panelTransitionClasses = computed(() => {
   <div
     v-if="hasContent"
     ref="tabsPaneWrapperRef"
-    :style="
+    :style="animated ? { height: panelHeight } : undefined"
+    :class="
       animated
-        ? {
-            height: panelHeight,
-            transition: 'height 240ms cubic-bezier(0.4, 0, 0.2, 1)',
-          }
-        : undefined
+        ? 'relative overflow-hidden transition-[height] duration-240 ease-[cubic-bezier(0.4,0,0.2,1)]'
+        : ''
     "
-    :class="animated ? 'relative overflow-hidden' : ''"
   >
     <Transition
       :css="animated"
@@ -281,7 +278,7 @@ const panelTransitionClasses = computed(() => {
       @enter="onPanelEnter"
       @after-enter="onPanelAfterEnter"
     >
-      <div :key="modelValue">
+      <div :key="modelValue" class="motion-enter">
         <slot :name="modelValue" />
       </div>
     </Transition>
diff --git a/src/components/ui/SToast.vue b/src/components/ui/SToast.vue
index 7e142ea17..98bee69de 100644
--- a/src/components/ui/SToast.vue
+++ b/src/components/ui/SToast.vue
@@ -44,7 +44,7 @@ const onBeforeLeave = (el: Element): void => {
         <div
           v-for="item in toasts"
           :key="item.id"
-          class="pointer-events-auto border border-solid border-outline-variant/30 rounded-lg px-3.5 py-2.5 flex items-center gap-2.5 text-sm bg-surface-bright text-on-surface shadow-lg whitespace-nowrap will-change-transform"
+          class="motion-enter pointer-events-auto border border-solid border-outline-variant/30 rounded-lg px-3.5 py-2.5 flex items-center gap-2.5 text-sm bg-surface-bright text-on-surface shadow-lg whitespace-nowrap will-change-transform"
         >
           <!-- 图标 -->
           <template v-if="item.icon !== false">
diff --git a/src/core/hotkey/registry.ts b/src/core/hotkey/registry.ts
index 6130f23a5..beb6cdffe 100644
--- a/src/core/hotkey/registry.ts
+++ b/src/core/hotkey/registry.ts
@@ -9,6 +9,7 @@ import { useStatusStore } from "@/stores/status";
 import { useSettingsDialog } from "@/settings/useSettingsDialog";
 import * as player from "@/core/player";
 import { VOLUME_STEP, volumeGainToPosition, volumePositionToGain } from "@/utils/volume";
+import { setPlayerExpanded } from "@/services/playerTransition";
 
 /** 快进/快退步长（毫秒） */
 const SEEK_STEP_MS = 5000;
@@ -70,13 +71,13 @@ export const buildRegistry = (): void => {
   });
   // 打开播放器
   handlers.set("view.openPlayer", () => {
-    useStatusStore().isPlayerExpanded = true;
+    setPlayerExpanded(true);
   });
   // 关闭播放器
   handlers.set("view.closePlayer", (): boolean => {
     const status = useStatusStore();
     if (!status.isPlayerExpanded) return false;
-    status.isPlayerExpanded = false;
+    setPlayerExpanded(false);
     return true;
   });
   // 切换播放列表
diff --git a/src/directives/ripple.ts b/src/directives/ripple.ts
index 5d90b805f..a721cca65 100644
--- a/src/directives/ripple.ts
+++ b/src/directives/ripple.ts
@@ -14,6 +14,10 @@ interface RippleElement extends HTMLElement {
   [RIPPLE_HANDLER]?: (e: PointerEvent) => void;
 }
 
+/**
+ * 注册元素的按压涟漪
+ * @param el - 绑定涟漪的元素
+ */
 const setupRipple = (el: RippleElement) => {
   if (el[RIPPLE_HANDLER]) return;
 
@@ -23,7 +27,12 @@ const setupRipple = (el: RippleElement) => {
   }
   el.style.overflow = "hidden";
 
+  /**
+   * 按压时创建涟漪，减弱动画时跳过节点与动画调度
+   * @param e - 指针按压事件
+   */
   const handler = (e: PointerEvent) => {
+    if (document.documentElement.hasAttribute("data-reduced-motion")) return;
     const rect = el.getBoundingClientRect();
     const radius = Math.sqrt(rect.width ** 2 + rect.height ** 2);
     const size = radius * 2;
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 5da28c18f..a387aab94 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -778,6 +778,7 @@
       "theme": "Theme",
       "appearanceStyle": "Appearance Style",
       "layout": "Layout",
+      "softwareAnimations": "Transitions & Animations",
       "font": "Fonts",
       "playerBar": "Player Bar",
       "nowPlaying": "Now Playing",
@@ -1636,6 +1637,14 @@
       "slide": "Slide",
       "zoom": "Zoom"
     },
+    "reduceMotion": {
+      "label": "Reduce Motion",
+      "description": "Reduce interface motion and resource usage"
+    },
+    "seamlessTransition": {
+      "label": "Shared Element Transitions",
+      "description": "Seamlessly transition elements between two pages"
+    },
     "sidebarCollapsed": {
       "label": "Collapse Sidebar",
       "description": "Collapse the sidebar to icon-only mode"
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index ab69e6023..b81d472ba 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -778,6 +778,7 @@
       "theme": "主题与颜色",
       "appearanceStyle": "外观风格",
       "layout": "布局",
+      "softwareAnimations": "过渡与动画",
       "font": "字体",
       "playerBar": "播放栏",
       "nowPlaying": "播放页",
@@ -1629,13 +1630,21 @@
       "floating": "灵动悬浮"
     },
     "routeTransition": {
-      "label": "页面切换动效",
+      "label": "页面切换",
       "description": "切换页面时的过渡动画效果",
       "none": "无",
       "fade": "淡入淡出",
       "slide": "滑动",
       "zoom": "缩放"
     },
+    "reduceMotion": {
+      "label": "减弱动画",
+      "description": "减少界面动态效果，降低性能消耗"
+    },
+    "seamlessTransition": {
+      "label": "共享元素过渡",
+      "description": "支持两个页面之间的元素无缝过渡"
+    },
     "sidebarCollapsed": {
       "label": "折叠侧边栏",
       "description": "将侧边栏折叠为图标模式"
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 29d432790..912fd20c2 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -4,8 +4,15 @@ import { useMediaStore } from "@/stores/media";
 import { useSettingsStore } from "@/stores/settings";
 import { useOrpheusProtocol } from "@/composables/useOrpheusProtocol";
 import { useExternalFileHandler } from "@/composables/useExternalFileHandler";
+import { coverTransitionActive, installCoverTransitions } from "@/services/coverTransition";
+import {
+  fullPlayerReady,
+  playerTransitionActive,
+  cancelPlayerTransition,
+} from "@/services/playerTransition";
 
 const route = useRoute();
+const router = useRouter();
 const status = useStatusStore();
 const settings = useSettingsStore();
 
@@ -18,7 +25,6 @@ const showPlayerBar = computed(() => !!useMediaStore().track);
 const { isPlayerExpanded } = storeToRefs(status);
 
 /** 播放页展开状态同步与懒加载 */
-const fullPlayerReady = ref(false);
 const FullPlayer = defineAsyncComponent(() => import("@/components/player/FullPlayer/index.vue"));
 const fullPlayerLoaded = ref(isPlayerExpanded.value);
 watch(
@@ -29,7 +35,6 @@ watch(
   },
   { immediate: true },
 );
-onBeforeUnmount(() => window.api.window.setPlayerExpanded(false));
 const { appearance } = settings;
 
 /** 路由切换动效 */
@@ -38,10 +43,12 @@ const routeTransitionName = computed(() => {
   return transition === "none" ? "" : `route-${transition}`;
 });
 
-/** 路由 key */
+/** 详情按路径和服务器隔离实例，列表沿用父路由缓存 */
 const routeKey = computed(() => {
   const hasParam = route.matched.some((m) => m.path.includes(":"));
-  return hasParam ? route.path : (route.matched[1]?.path ?? route.path);
+  return hasParam
+    ? `${route.path}:${route.query.serverId ?? ""}`
+    : (route.matched[1]?.path ?? route.path);
 });
 
 /** 需要受控缓存的页面组件白名单 */
@@ -77,13 +84,32 @@ watch(
   },
 );
 
-// 路由切换完成后恢复滚动位置
+/** 路由切换完成后恢复主内容区滚动位置 */
 const handleAfterEnter = (): void => {
   if (!mainContainerRef.value) return;
   const saved = mainScrollMap.get(route.fullPath) ?? 0;
   mainContainerRef.value.scrollTop = saved;
 };
 
+let disposeCoverTransitions: (() => void) | undefined;
+watch(
+  () => appearance.seamlessTransition && !settings.reducedMotion,
+  (enabled) => {
+    if (!enabled) cancelPlayerTransition();
+    disposeCoverTransitions?.();
+    disposeCoverTransitions = enabled
+      ? installCoverTransitions(router, () => mainContainerRef.value, handleAfterEnter)
+      : undefined;
+  },
+  { immediate: true },
+);
+onBeforeUnmount(() => {
+  window.api.window.setPlayerExpanded(false);
+  disposeCoverTransitions?.();
+  cancelPlayerTransition();
+  fullPlayerReady.value = false;
+});
+
 /** 侧边栏样式 */
 const sidebarClass = computed(() => {
   const classes: string[] = [];
@@ -131,7 +157,8 @@ const playerBarInnerClass = computed(() => {
 <template>
   <!-- 主界面 -->
   <div
-    class="h-screen flex overflow-hidden bg-app text-on-surface transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.7,0,0.3,1)] origin-center"
+    class="player-shell h-screen flex overflow-hidden bg-app text-on-surface transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.7,0,0.3,1)] origin-center"
+    :style="playerTransitionActive ? { transition: 'none' } : undefined"
     :class="isPlayerExpanded && fullPlayerReady ? 'scale-95 opacity-0 pointer-events-none' : ''"
   >
     <!-- 侧边栏 -->
@@ -150,9 +177,18 @@ const playerBarInnerClass = computed(() => {
       </header>
 
       <!-- 主内容区 -->
-      <main ref="mainContainerRef" class="flex-1 overflow-y-auto overflow-x-hidden">
+      <main
+        ref="mainContainerRef"
+        class="flex-1 overflow-y-auto overflow-x-hidden"
+        :data-cover-transition="coverTransitionActive ? '' : undefined"
+      >
         <RouterView v-slot="{ Component }">
-          <Transition :name="routeTransitionName" mode="out-in" @after-enter="handleAfterEnter">
+          <Transition
+            :name="routeTransitionName"
+            :css="!coverTransitionActive"
+            :mode="coverTransitionActive ? undefined : 'out-in'"
+            @after-enter="handleAfterEnter"
+          >
             <KeepAlive :max="10" :include="cachedViews">
               <component :is="Component" :key="routeKey" />
             </KeepAlive>
@@ -193,3 +229,58 @@ const playerBarInnerClass = computed(() => {
   <!-- 输出信息弹窗 -->
   <AudioInfoDialog />
 </template>
+
+<style scoped>
+:deep([data-cover-shared]) {
+  view-transition-name: detail-cover;
+}
+
+main[data-cover-transition]::view-transition-group(detail-cover) {
+  animation-duration: 320ms;
+  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  overflow: clip;
+  border-radius: var(--cover-transition-radius);
+}
+
+main[data-cover-transition]::view-transition-old(detail-cover),
+main[data-cover-transition]::view-transition-new(detail-cover) {
+  height: 100%;
+}
+</style>
+
+<style>
+html[data-player-transition] {
+  [data-player-shared] {
+    view-transition-name: player-cover;
+  }
+
+  [data-player-cover="bar"] + div {
+    visibility: hidden;
+  }
+
+  &::view-transition-group(*) {
+    animation-duration: 320ms;
+    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  &::view-transition-image-pair(player-cover) {
+    overflow: clip;
+    animation: player-cover-radius 320ms cubic-bezier(0.2, 0, 0, 1) both;
+  }
+
+  &::view-transition-old(player-cover),
+  &::view-transition-new(player-cover) {
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+@keyframes player-cover-radius {
+  from {
+    border-radius: var(--player-cover-from-radius);
+  }
+  to {
+    border-radius: var(--player-cover-to-radius);
+  }
+}
+</style>
diff --git a/src/pages/Artist.vue b/src/pages/Artist.vue
index b256d8b44..1f91ca77e 100644
--- a/src/pages/Artist.vue
+++ b/src/pages/Artist.vue
@@ -10,16 +10,11 @@ import { fetchQQMusicArtistSongs } from "@/apis/artist/qqmusic";
 import { navigateToAlbum } from "@/utils/navigate";
 import SongList from "@/components/list/SongList.vue";
 import { formatTime } from "@/utils/time";
+import { coverTransitionActive, getCoverPreview } from "@/services/coverTransition";
 import * as player from "@/core/player";
 import artistFallback from "@/assets/images/artist.jpg";
-import IconLucideDisc3 from "~icons/lucide/disc-3";
-import IconLucideListMusic from "~icons/lucide/list-music";
-import IconLucideHourglass from "~icons/lucide/hourglass";
-import IconLucideMusic from "~icons/lucide/music";
 import type { DropdownMenuItem } from "@/components/ui/SDropdownMenu.vue";
 import IconLucideListChecks from "~icons/lucide/list-checks";
-import IconMaterialSymbolsFavoriteRounded from "~icons/material-symbols/favorite-rounded";
-import IconMaterialSymbolsFavoriteOutlineRounded from "~icons/material-symbols/favorite-outline-rounded";
 
 const { t } = useI18n();
 const route = useRoute();
@@ -48,6 +43,13 @@ const loadingMore = ref(false);
 
 /** 在线头像未到位时，用任一曲目的封面顶替 */
 const fallbackTrackCover = computed(() => artist.value?.tracks.find((t) => t.cover)?.cover);
+const preview = getCoverPreview(route.fullPath);
+const artistName = computed(() => artist.value?.name ?? preview?.title);
+const avatarSource = computed(() =>
+  coverTransitionActive.value && preview
+    ? preview.cover
+    : (artist.value?.avatar ?? preview?.cover ?? fallbackTrackCover.value),
+);
 
 /** 折叠状态 */
 const collapsed = ref(false);
@@ -234,16 +236,17 @@ const albumItems = computed<CoverItem[]>(() => {
 <template>
   <div class="flex flex-col h-full">
     <!-- 头部信息 -->
-    <div v-if="artist" class="shrink-0 px-5 pb-2">
+    <div v-if="artist || preview" class="shrink-0 px-5 pb-2">
       <div
         class="flex mt-2 transition-[gap,margin] duration-300"
         :class="collapsed ? 'gap-3 mb-3' : 'gap-5 mb-4'"
       >
         <!-- 头像 -->
-        <SImg
-          :src="artist.avatar ?? fallbackTrackCover"
-          :fallback="artistFallback"
-          :alt="artist.name"
+        <DetailCover
+          :src="avatarSource"
+          :fallback="preview?.cover ?? artistFallback"
+          :alt="artistName"
+          data-cover-hero
           class="shrink-0 rounded-full transition-[width,height] duration-300"
           :class="collapsed ? 'size-20' : 'size-40'"
         />
@@ -257,7 +260,7 @@ const albumItems = computed<CoverItem[]>(() => {
               class="font-bold text-on-surface truncate lh-normal transition-[font-size,line-height] duration-300"
               :class="collapsed ? 'text-xl' : 'text-3xl'"
             >
-              {{ artist.name }}
+              {{ artistName }}
             </h1>
             <div
               class="grid transition-[grid-template-rows,opacity] duration-300"
@@ -268,9 +271,13 @@ const albumItems = computed<CoverItem[]>(() => {
               >
                 <span class="flex items-center gap-1">
                   <IconLucideListMusic class="shrink-0" />
-                  {{ t("common.totalSongs", { count: artist.trackCount }) }}
+                  {{
+                    t("common.totalSongs", {
+                      count: artist?.trackCount ?? preview?.trackCount ?? 0,
+                    })
+                  }}
                 </span>
-                <span v-if="artist.albumCount" class="flex items-center gap-1">
+                <span v-if="artist?.albumCount" class="flex items-center gap-1">
                   <IconLucideDisc3 class="shrink-0" />
                   {{ t("common.totalAlbums", { count: artist.albumCount }) }}
                 </span>
@@ -288,7 +295,7 @@ const albumItems = computed<CoverItem[]>(() => {
                 type="primary"
                 variant="secondary"
                 round
-                :disabled="artist.tracks.length === 0 || activeTab !== 'songs'"
+                :disabled="!artist?.tracks.length || activeTab !== 'songs'"
                 @click="handlePlayAll"
               >
                 <template #icon>
@@ -311,12 +318,12 @@ const albumItems = computed<CoverItem[]>(() => {
               </SButton>
               <SDropdownMenu
                 :items="moreMenuItems"
-                :disabled="activeTab !== 'songs'"
+                :disabled="!artist || activeTab !== 'songs'"
                 align="start"
                 @select="handleMoreMenu"
               >
                 <template #trigger>
-                  <SButton variant="secondary" circle :disabled="activeTab !== 'songs'">
+                  <SButton variant="secondary" circle :disabled="!artist || activeTab !== 'songs'">
                     <template #icon>
                       <IconLucideEllipsis />
                     </template>
diff --git a/src/pages/Collection.vue b/src/pages/Collection.vue
index 119263b5d..0464b98cb 100644
--- a/src/pages/Collection.vue
+++ b/src/pages/Collection.vue
@@ -9,14 +9,11 @@ import { useCollectionSubscribe } from "@/composables/collection/useCollectionSu
 import { usePlaylistManage } from "@/composables/collection/usePlaylistManage";
 import SongList from "@/components/list/SongList.vue";
 import { formatTime } from "@/utils/time";
+import { coverTransitionActive, getCoverPreview } from "@/services/coverTransition";
 import * as player from "@/core/player";
 import IconLucidePencil from "~icons/lucide/pencil";
 import IconLucideTrash2 from "~icons/lucide/trash-2";
 import IconLucideListChecks from "~icons/lucide/list-checks";
-import IconLucideListMusic from "~icons/lucide/list-music";
-import IconLucideHourglass from "~icons/lucide/hourglass";
-import IconLucideCalendar from "~icons/lucide/calendar";
-import IconLucideUser from "~icons/lucide/user";
 import IconMoreHorizontal from "~icons/lucide/more-horizontal";
 import IconCopy from "~icons/lucide/copy";
 
@@ -30,6 +27,12 @@ const type = route.params.type as CollectionType;
 const id = route.params.id as string;
 
 const collection = shallowRef<Collection | null>(null);
+const preview = getCoverPreview(route.fullPath);
+/** 首屏头部只复用轻量摘要，不将预览数据交给播放和歌单管理逻辑 */
+const header = computed(() => collection.value ?? preview);
+const coverSource = computed(() =>
+  coverTransitionActive.value && preview ? preview.cover : (header.value?.cover ?? preview?.cover),
+);
 /** 正在加载 */
 const loading = ref(false);
 /** 错误信息 */
@@ -244,15 +247,17 @@ onBeforeUnmount(() => {
 <template>
   <div class="flex flex-col h-full">
     <!-- 头部信息 -->
-    <div v-if="collection" class="shrink-0 px-5 pb-2">
+    <div v-if="header" class="shrink-0 px-5 pb-2">
       <div
         class="flex mt-2 transition-[gap,margin] duration-300"
         :class="collapsed ? 'gap-3' : 'gap-5'"
       >
         <!-- 封面 -->
-        <SImg
-          :src="collection.cover"
-          :alt="collection.title"
+        <DetailCover
+          :src="coverSource"
+          :fallback="preview?.cover"
+          :alt="header.title"
+          data-cover-hero
           class="rounded-xl shrink-0 transition-[width,height] duration-300"
           :class="collapsed ? 'size-20' : 'size-40'"
         />
@@ -267,7 +272,7 @@ onBeforeUnmount(() => {
                 class="min-w-0 flex-1 font-bold text-on-surface truncate lh-normal transition-[font-size,line-height] duration-300"
                 :class="collapsed ? 'text-xl' : 'text-3xl'"
               >
-                {{ collection.title }}
+                {{ header.title }}
               </h1>
               <div
                 class="flex shrink-0 items-center gap-1 text-primary"
@@ -299,7 +304,7 @@ onBeforeUnmount(() => {
               <div class="overflow-hidden flex flex-col gap-2">
                 <!-- 简介 -->
                 <SButton
-                  v-if="collection.description"
+                  v-if="collection?.description"
                   variant="text"
                   size="auto"
                   block
@@ -315,7 +320,7 @@ onBeforeUnmount(() => {
                   </span>
                 </SButton>
                 <p v-else class="text-sm text-on-surface-variant/70 truncate">
-                  {{ t("collection.noDescription") }}
+                  {{ t(collection ? "collection.noDescription" : "common.loading") }}
                 </p>
                 <div
                   class="flex items-center gap-3 text-sm leading-none text-on-surface-variant/50"
@@ -326,7 +331,11 @@ onBeforeUnmount(() => {
                   </span>
                   <span class="flex items-center gap-1 shrink-0">
                     <IconLucideListMusic class="shrink-0" />
-                    {{ t("common.totalSongs", { count: collection.tracks.length }) }}
+                    {{
+                      t("common.totalSongs", {
+                        count: collection?.tracks.length ?? preview?.trackCount ?? 0,
+                      })
+                    }}
                   </span>
                   <span v-if="totalDuration" class="flex items-center gap-1 shrink-0">
                     <IconLucideHourglass class="shrink-0" />
@@ -347,7 +356,7 @@ onBeforeUnmount(() => {
                 type="primary"
                 variant="secondary"
                 round
-                :disabled="collection.tracks.length === 0"
+                :disabled="!collection?.tracks.length"
                 @click="handlePlayAll"
               >
                 <template #icon>
@@ -375,7 +384,7 @@ onBeforeUnmount(() => {
                 }}
               </SButton>
               <SDropdownMenu
-                v-if="moreMenuItems.length > 0"
+                v-if="collection && moreMenuItems.length > 0"
                 :items="moreMenuItems"
                 align="start"
                 @select="handleMoreMenu"
diff --git a/src/services/coverTransition.spec.ts b/src/services/coverTransition.spec.ts
new file mode 100644
index 000000000..15da552e1
--- /dev/null
+++ b/src/services/coverTransition.spec.ts
@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { flushPromises } from "@vue/test-utils";
+import {
+  captureCover,
+  coverTransitionActive,
+  getCoverPreview,
+  installCoverTransitions,
+} from "./coverTransition";
+
+const path = "/collection/streaming/album/album-1?serverId=server-a";
+const album = { id: "album-1", title: "测试专辑", cover: "cover://album.jpg", trackCount: 12 };
+let dispose: (() => void) | undefined;
+
+/**
+ * 使用真实路由和可控快照回调复现导航时序
+ * @returns 路由、容器和原生过渡桩
+ */
+const setupNavigation = async () => {
+  vi.spyOn(document, "hidden", "get").mockReturnValue(false);
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue(
+    new DOMRect(0, 0, 160, 160),
+  );
+  vi.spyOn(HTMLImageElement.prototype, "complete", "get").mockReturnValue(true);
+  vi.spyOn(HTMLImageElement.prototype, "naturalWidth", "get").mockReturnValue(300);
+  vi.spyOn(HTMLImageElement.prototype, "decode").mockResolvedValue();
+  const scope = document.createElement("main");
+  document.body.append(scope);
+  const start = vi.fn((update: ViewTransitionUpdateCallback) => {
+    const completed = Promise.withResolvers<void>();
+    const ready = Promise.resolve().then(update);
+    return { ready, finished: completed.promise, skipTransition: completed.resolve };
+  });
+  Object.assign(scope, { startViewTransition: start });
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/", name: "list", component: {} },
+      { path: "/ordinary", component: {} },
+      { path: "/collection/:source/:type/:id", name: "collection", component: {} },
+      { path: "/artist/:source/:id", name: "artist", component: {} },
+    ],
+  });
+  router.afterEach((to, _from, failure) => {
+    if (!failure) {
+      scope.innerHTML =
+        to.name === "collection" || to.name === "artist"
+          ? "<div data-cover-hero><img data-cover-image></div>"
+          : '<div data-cover-key="cover"><img data-cover-image></div>';
+    }
+  });
+  await router.push("/");
+  dispose = installCoverTransitions(router, () => scope, vi.fn());
+  return { router, scope, start };
+};
+
+afterEach(async () => {
+  dispose?.();
+  dispose = undefined;
+  await flushPromises();
+  document.body.innerHTML = "";
+  vi.restoreAllMocks();
+});
+
+describe("封面共享过渡回归", () => {
+  it.each([path, "/artist/streaming/artist-1?serverId=server-a"])(
+    "%s 进入和返回时匹配原始导航，结束后清理状态",
+    async (target) => {
+      const { router, scope, start } = await setupNavigation();
+      captureCover(album, "cover");
+      await router.push(target);
+      await flushPromises();
+      expect(getCoverPreview(target)?.title).toBe(album.title);
+      expect(coverTransitionActive.value).toBe(true);
+      expect(scope.querySelector("[data-cover-hero][data-cover-shared]")).not.toBeNull();
+      start.mock.results[0].value.skipTransition();
+      await flushPromises();
+      expect(coverTransitionActive.value).toBe(false);
+      expect(scope.querySelector("[data-cover-shared]")).toBeNull();
+      await router.push("/");
+      await flushPromises();
+      expect(start).toHaveBeenCalledTimes(2);
+      expect(
+        scope.querySelector('[data-cover-key="cover"]')!.hasAttribute("data-cover-shared"),
+      ).toBe(true);
+      start.mock.results[1].value.skipTransition();
+      await flushPromises();
+      await router.push(target.replace("server-a", "server-b"));
+      await router.push("/");
+      expect(start).toHaveBeenCalledTimes(2);
+    },
+  );
+
+  it("普通页面不启用共享过渡，也不将点击摘要留给后续导航", async () => {
+    const { router, start } = await setupNavigation();
+    captureCover(album, "cover");
+    await router.push("/ordinary");
+    await router.push(path);
+    expect(start).not.toHaveBeenCalled();
+    expect(coverTransitionActive.value).toBe(false);
+    expect(getCoverPreview(path)).toBeNull();
+  });
+
+  it.each(["关闭动画", "缺少原生 API"])("%s 时继续普通导航", async (condition) => {
+    const { router, scope, start } = await setupNavigation();
+    if (condition === "关闭动画") {
+      dispose?.();
+      dispose = undefined;
+    } else Object.assign(scope, { startViewTransition: undefined });
+    const timer = vi.spyOn(window, "setTimeout");
+    captureCover(album, "cover");
+    if (condition === "关闭动画") expect(timer).not.toHaveBeenCalled();
+    await router.push(path);
+    expect(start).not.toHaveBeenCalled();
+    expect(coverTransitionActive.value).toBe(false);
+    expect(getCoverPreview(path)).toBeNull();
+  });
+
+  it("连续点击时，取消的旧快照回调不能提前提交新导航", async () => {
+    const { router, start } = await setupNavigation();
+    const updates: ViewTransitionUpdateCallback[] = [];
+    start.mockImplementation((update) => {
+      updates.push(update);
+      const completed = Promise.withResolvers<void>();
+      return {
+        ready: Promise.resolve(),
+        finished: completed.promise,
+        skipTransition: completed.resolve,
+      };
+    });
+    captureCover(album, "cover");
+    const first = router.push(path);
+    await vi.waitFor(() => expect(start).toHaveBeenCalledTimes(1));
+    captureCover({ ...album, title: "另一个专辑" }, "cover");
+    const nextPath = path.replace("album-1", "album-2");
+    const second = router.push(nextPath);
+    await vi.waitFor(() => expect(start).toHaveBeenCalledTimes(2));
+    await updates[0]();
+    await flushPromises();
+    expect(router.currentRoute.value.path).toBe("/");
+    const updating = updates[1]();
+    await Promise.all([first, second, updating]);
+    expect(router.currentRoute.value.fullPath).toBe(nextPath);
+    expect(getCoverPreview(nextPath)?.title).toBe("另一个专辑");
+    await router.push("/ordinary");
+    expect(coverTransitionActive.value).toBe(false);
+    expect(start).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/services/coverTransition.ts b/src/services/coverTransition.ts
new file mode 100644
index 000000000..814e1960b
--- /dev/null
+++ b/src/services/coverTransition.ts
@@ -0,0 +1,211 @@
+import type { Router, RouteLocationNormalized } from "vue-router";
+import type { CoverItem } from "@/types/artist";
+
+type CoverPreview = Pick<CoverItem, "title" | "cover" | "trackCount">;
+/** TypeScript DOM 库尚未声明元素级过渡，局部复用已有原生签名 */
+type TransitionScope = HTMLElement & Partial<Pick<Document, "startViewTransition">>;
+
+/** 只保留一次导航的头部摘要，不缓存歌曲和页面 DOM */
+interface CoverNavigation {
+  coverKey: string;
+  header: CoverPreview;
+  listPath: string;
+  detailPath: string;
+}
+
+let pendingCover: Pick<CoverNavigation, "coverKey" | "header"> | null = null;
+let preview: CoverNavigation | null = null;
+let captureEnabled = false;
+
+export const coverTransitionActive = shallowRef(false);
+
+/**
+ * 按稳定标识查找封面，卡片重新挂载后仍能匹配
+ * 标识只含媒体类型与 ID，页面与服务器身份由 listPath 校验和主内容区作用域保证
+ * @param scope - 主内容容器
+ * @param key - 卡片声明的稳定标识
+ * @returns 当前页面内的封面元素
+ */
+const findCover = (scope: HTMLElement, key: string): HTMLElement | null =>
+  scope.querySelector<HTMLElement>(`[data-cover-key="${key}"]`);
+
+/**
+ * 记录本次点击的封面，路由守卫只在当前事件引发详情跳转时消费
+ * @param item - 卡片摘要
+ * @param coverKey - 卡片的稳定标识，不能使用组件实例 ID
+ */
+export const captureCover = (item: CoverItem, coverKey: string): void => {
+  if (!captureEnabled || !item.cover) return;
+  const captured = {
+    coverKey,
+    header: {
+      title: item.title,
+      cover: item.cover,
+      trackCount: item.trackCount,
+    },
+  };
+  pendingCover = captured;
+  window.setTimeout(() => {
+    if (pendingCover === captured) pendingCover = null;
+  }, 0);
+};
+
+/**
+ * 读取当前详情的首屏摘要，不等待歌曲详情请求
+ * @param path - 详情完整路由，包含所属服务器
+ * @returns 与当前导航匹配的摘要
+ */
+export const getCoverPreview = (path: string): CoverPreview | null =>
+  preview?.detailPath === path ? preview.header : null;
+
+/**
+ * 将共享封面过渡限定在主内容区，其余路由继续使用原有动效
+ * @param router - 应用路由
+ * @param getScope - 主内容容器
+ * @param restoreScroll - 新页面挂载后的滚动位置恢复
+ * @returns 移除守卫并释放本次过渡的函数
+ */
+export const installCoverTransitions = (
+  router: Router,
+  getScope: () => TransitionScope | null,
+  restoreScroll: () => void,
+): (() => void) => {
+  captureEnabled = true;
+  let returnNavigation: CoverNavigation | null = null;
+  let navigation: CoverNavigation | null = null;
+  let targetRoute: RouteLocationNormalized | null = null;
+  let transition: ViewTransition | null = null;
+  let finishUpdate: (() => void) | null = null;
+  let releaseNavigation: (() => void) | null = null;
+  let covers: HTMLElement[] = [];
+
+  /** 释放原生快照和临时样式，允许连续导航和取消导航 */
+  const cleanup = (): void => {
+    transition?.skipTransition();
+    transition = null;
+    finishUpdate?.();
+    finishUpdate = null;
+    releaseNavigation?.();
+    releaseNavigation = null;
+    for (const cover of covers) cover.removeAttribute("data-cover-shared");
+    getScope()?.style.removeProperty("--cover-transition-radius");
+    covers = [];
+    preview = null;
+    coverTransitionActive.value = false;
+  };
+
+  const removeBeforeEach = router.beforeEach((to, from) => {
+    cleanup();
+    navigation = null;
+    targetRoute = to;
+    const captured = pendingCover;
+    pendingCover = null;
+    if ((to.name === "collection" || to.name === "artist") && captured) {
+      navigation = { ...captured, listPath: from.fullPath, detailPath: to.fullPath };
+    } else if (
+      returnNavigation &&
+      ((from.fullPath === returnNavigation.detailPath &&
+        to.fullPath === returnNavigation.listPath) ||
+        (from.fullPath === returnNavigation.listPath &&
+          to.fullPath === returnNavigation.detailPath))
+    ) {
+      navigation = returnNavigation;
+    }
+  });
+
+  const removeBeforeResolve = router.beforeResolve(async (to) => {
+    const current = navigation;
+    const scope = getScope();
+    if (to !== targetRoute || !current || !scope?.startViewTransition || document.hidden) {
+      return;
+    }
+
+    const entering = to.fullPath === current.detailPath;
+    const cover = entering
+      ? findCover(scope, current.coverKey)
+      : scope.querySelector<HTMLElement>("[data-cover-hero]");
+    const image = cover?.querySelector<HTMLImageElement>("img[data-cover-image]");
+    if (!cover || !scope.contains(cover) || !image?.complete || !image.naturalWidth) return;
+
+    covers.push(cover);
+    cover.setAttribute("data-cover-shared", "");
+    scope.style.setProperty("--cover-transition-radius", getComputedStyle(cover).borderRadius);
+    if (entering) preview = current;
+    coverTransitionActive.value = true;
+
+    const committed = Promise.withResolvers<void>();
+    const { promise: started, resolve: release } = Promise.withResolvers<void>();
+    finishUpdate = committed.resolve;
+    releaseNavigation = release;
+    const active = scope.startViewTransition(async () => {
+      release();
+      if (releaseNavigation === release) releaseNavigation = null;
+      await committed.promise;
+    });
+    transition = active;
+    // 取消过渡会拒绝 ready，但 finished 仍会完成清理
+    void active.ready.catch(() => {});
+    void active.finished.then(() => {
+      if (transition === active) cleanup();
+    });
+    await started;
+  });
+
+  const removeAfterEach = router.afterEach(async (to, _from, failure) => {
+    if (to !== targetRoute) return;
+    const current = navigation;
+    const active = transition;
+    if (failure) {
+      cleanup();
+      return;
+    }
+    if (!current || !active) return;
+    if (to.fullPath === current.detailPath) returnNavigation = current;
+
+    await nextTick();
+    restoreScroll();
+    // KeepAlive 中的虚拟列表会在激活后的 nextTick 恢复内部滚动
+    await nextTick();
+    if (transition !== active) return;
+    const scope = getScope();
+    const entering = to.fullPath === current.detailPath;
+    const cover = entering
+      ? scope?.querySelector<HTMLElement>("[data-cover-hero]")
+      : scope
+        ? findCover(scope, current.coverKey)
+        : null;
+    if (cover && scope?.contains(cover)) {
+      const bounds = cover.getBoundingClientRect();
+      const viewport = scope.getBoundingClientRect();
+      if (bounds.bottom > viewport.top && bounds.top < viewport.bottom && bounds.width > 0) {
+        const image = cover.querySelector<HTMLImageElement>("img[data-cover-image]");
+        // 返回时只匹配已加载的卡片，避免等待网络图片冻结主内容区
+        if (image && (entering || (image.complete && image.naturalWidth > 0))) {
+          await image.decode().catch(() => {});
+          if (transition === active && image.naturalWidth > 0) {
+            covers.push(cover);
+            cover.setAttribute("data-cover-shared", "");
+          }
+        }
+      }
+    }
+    if (transition === active) {
+      finishUpdate?.();
+      finishUpdate = null;
+    }
+  });
+
+  const removeError = router.onError((_error, to) => {
+    if (to === targetRoute) cleanup();
+  });
+  return () => {
+    captureEnabled = false;
+    removeBeforeEach();
+    removeBeforeResolve();
+    removeAfterEach();
+    removeError();
+    cleanup();
+    pendingCover = null;
+    returnNavigation = null;
+  };
+};
diff --git a/src/services/playerTransition.ts b/src/services/playerTransition.ts
new file mode 100644
index 000000000..f4c18dbab
--- /dev/null
+++ b/src/services/playerTransition.ts
@@ -0,0 +1,88 @@
+import { useSettingsStore } from "@/stores/settings";
+import { useStatusStore } from "@/stores/status";
+import { coverTransitionActive } from "@/services/coverTransition";
+
+export const fullPlayerReady = shallowRef(false);
+export const playerTransition = shallowRef<ViewTransition | null>(null);
+export const playerTransitionActive = computed(() => playerTransition.value !== null);
+let covers: HTMLElement[] = [];
+
+/** 释放播放器快照和临时标记，取消尚未完成的封面匹配 */
+export const cancelPlayerTransition = (): void => {
+  const active = playerTransition.value;
+  if (!active) return;
+  playerTransition.value = null;
+  active.skipTransition();
+  for (const cover of covers) cover.removeAttribute("data-player-shared");
+  covers = [];
+  const root = document.documentElement;
+  root.removeAttribute("data-player-transition");
+  root.style.removeProperty("--player-cover-from-radius");
+  root.style.removeProperty("--player-cover-to-radius");
+};
+
+/**
+ * 在底栏与展开播放器之间匹配封面，其余情况沿用原有展开动画
+ * @param expanded - 是否展开播放器
+ */
+export const setPlayerExpanded = (expanded: boolean): void => {
+  cancelPlayerTransition();
+  const status = useStatusStore();
+  if (status.isPlayerExpanded === expanded) return;
+  const settings = useSettingsStore();
+  if (
+    !settings.appearance.seamlessTransition ||
+    settings.reducedMotion ||
+    !document.startViewTransition ||
+    document.hidden ||
+    coverTransitionActive.value
+  ) {
+    status.isPlayerExpanded = expanded;
+    return;
+  }
+
+  const source = document.querySelector<HTMLElement>(
+    `[data-player-cover="${expanded ? "bar" : "full"}"]`,
+  );
+  const image = source?.querySelector<HTMLImageElement>(expanded ? "img[data-cover-image]" : "img");
+  if (!source || !image?.complete || !image.naturalWidth || !source.checkVisibility()) {
+    status.isPlayerExpanded = expanded;
+    return;
+  }
+
+  const root = document.documentElement;
+  source.setAttribute("data-player-shared", "");
+  covers.push(source);
+  root.setAttribute("data-player-transition", "");
+  root.style.setProperty("--player-cover-from-radius", getComputedStyle(source).borderRadius);
+  const active = document.startViewTransition(async () => {
+    if (playerTransition.value !== active) return;
+    source.removeAttribute("data-player-shared");
+    status.isPlayerExpanded = expanded;
+    // 首次展开等待懒加载挂载，取消时也结束等待
+    if (expanded) {
+      await until(() => fullPlayerReady.value || playerTransition.value !== active).toBe(true);
+    }
+    await nextTick();
+    if (playerTransition.value !== active) return;
+    const target = document.querySelector<HTMLElement>(
+      `[data-player-cover="${expanded ? "full" : "bar"}"]`,
+    );
+    const targetImage = target?.querySelector<HTMLImageElement>("img");
+    // 仅解码已加载图片或相同地址的缩略图，避免等待高清图片的网络请求
+    if (targetImage && (targetImage.complete || targetImage.src === image.src)) {
+      await targetImage.decode().catch(() => {});
+    }
+    if (playerTransition.value !== active || !target) return;
+    covers.push(target);
+    target.setAttribute("data-player-shared", "");
+    root.style.setProperty("--player-cover-to-radius", getComputedStyle(target).borderRadius);
+  });
+  playerTransition.value = active;
+  void active.ready.catch(() => {});
+  void active.finished
+    .finally(() => {
+      if (playerTransition.value === active) cancelPlayerTransition();
+    })
+    .catch(() => {});
+};
diff --git a/src/settings/categories/appearance.ts b/src/settings/categories/appearance.ts
index a2bab9977..cfe411158 100644
--- a/src/settings/categories/appearance.ts
+++ b/src/settings/categories/appearance.ts
@@ -138,18 +138,6 @@ const appearanceCategory: SettingCategory = {
           ],
           defaultValue: "default",
         },
-        {
-          key: "routeTransition",
-          type: "select",
-          binding: { store: "settings", path: "appearance.routeTransition" },
-          options: [
-            { value: "none", labelKey: "settings.routeTransition.none" },
-            { value: "fade", labelKey: "settings.routeTransition.fade" },
-            { value: "slide", labelKey: "settings.routeTransition.slide" },
-            { value: "zoom", labelKey: "settings.routeTransition.zoom" },
-          ],
-          defaultValue: "fade",
-        },
         {
           key: "sidebarCollapsed",
           type: "switch",
@@ -175,6 +163,35 @@ const appearanceCategory: SettingCategory = {
         },
       ],
     },
+    {
+      id: "softwareAnimations",
+      items: [
+        {
+          key: "reduceMotion",
+          type: "switch",
+          binding: { store: "settings", path: "appearance.reduceMotion" },
+          defaultValue: false,
+        },
+        {
+          key: "routeTransition",
+          type: "select",
+          binding: { store: "settings", path: "appearance.routeTransition" },
+          options: [
+            { value: "none", labelKey: "settings.routeTransition.none" },
+            { value: "fade", labelKey: "settings.routeTransition.fade" },
+            { value: "slide", labelKey: "settings.routeTransition.slide" },
+            { value: "zoom", labelKey: "settings.routeTransition.zoom" },
+          ],
+          defaultValue: "fade",
+        },
+        {
+          key: "seamlessTransition",
+          type: "switch",
+          binding: { store: "settings", path: "appearance.seamlessTransition" },
+          defaultValue: false,
+        },
+      ],
+    },
     {
       id: "playerBar",
       items: [
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index ecfee9a80..bb2515be0 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -107,6 +107,8 @@ export const useSettingsStore = defineStore(
     const appearance = reactive<AppearanceSettings>({
       layoutMode: "default",
       routeTransition: "fade",
+      seamlessTransition: false,
+      reduceMotion: false,
       sidebarCollapsed: false,
       sidebarPlaylistCover: false,
       sidebarNavGroups: DEFAULT_SIDEBAR_NAV_GROUPS.map((group) => ({
@@ -124,6 +126,11 @@ export const useSettingsStore = defineStore(
       showPerformanceMonitor: false,
     });
 
+    const systemMotion = usePreferredReducedMotion();
+    const reducedMotion = computed(
+      () => appearance.reduceMotion || systemMotion.value === "reduce",
+    );
+
     /** 播放器 */
     const player = reactive<PlayerSettings>({
       playerBgType: "blur",
@@ -351,6 +358,7 @@ export const useSettingsStore = defineStore(
     return {
       locale,
       appearance,
+      reducedMotion,
       player,
       preset,
       lyric,
diff --git a/src/styles/global.css b/src/styles/global.css
index 4cca9d4a8..59b823bc7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,5 +1,6 @@
 @import "/fonts/font.css";
 @import "./markdown.css";
+@import "./reduced-motion.css";
 
 * {
   margin: 0;
diff --git a/src/styles/reduced-motion.css b/src/styles/reduced-motion.css
new file mode 100644
index 000000000..2c22fd40e
--- /dev/null
+++ b/src/styles/reduced-motion.css
@@ -0,0 +1,142 @@
+html[data-reduced-motion] {
+  :is(.transition, .transition-all, .transition-transform, [class*="transition-["]) {
+    /* 只保留透明度过渡，位移与缩放直接到位 */
+    transition-property: opacity;
+    transition-duration: 150ms;
+    transition-delay: 0s;
+  }
+
+  :is(
+    [class*="route-"],
+    [class*="slide-left-"],
+    [class*="slide-up-"],
+    [class*="scale-switch-"],
+    [class*="plugin-source-"],
+    .motion-enter
+  ) {
+    /* 覆盖 TransitionGroup 重排时写入的内联位移 */
+    transform: none !important;
+    transition: opacity 150ms ease;
+  }
+
+  .player-shell {
+    --un-scale-x: 1;
+    --un-scale-y: 1;
+    transition: opacity 240ms ease;
+  }
+
+  .player-panel {
+    transition:
+      opacity 240ms ease,
+      transform 240ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .player-panel.translate-y-full {
+    --un-translate-y: 12px;
+    opacity: 0;
+  }
+
+  /* 保留弹层原有定位与结束事件，仅用透明度完成进出场 */
+  :is(
+    [class*="animate-popover-"],
+    [class*="animate-dialog-"],
+    [class*="animate-panel-"],
+    [class*="animate-select-"],
+    [class*="animate-drawer-"],
+    [class*="animate-overlay-"]
+  ) {
+    animation-duration: 150ms;
+    animation-timing-function: ease;
+
+    &[data-state$="open"] {
+      animation-name: reduced-motion-in;
+    }
+
+    &[data-state="closed"] {
+      animation-name: reduced-motion-out;
+    }
+  }
+
+  :is(.animate-slide-in-item, .animate-fade-in) {
+    animation: reduced-motion-in 150ms ease both;
+  }
+
+  .animate-highlight-pulse {
+    animation: none;
+    outline: 2px solid rgb(var(--s-primary) / 0.3);
+  }
+
+  /* 覆盖 group-hover 与多重伪类工具样式 */
+  :is([class*="hover:scale-"], [class*="active:scale-"]) {
+    --un-scale-x: 1 !important;
+    --un-scale-y: 1 !important;
+  }
+
+  [data-cover-action] {
+    --un-translate-y: 0px;
+  }
+
+  :is(.cover-card-image, .blur-1, .blur-4) {
+    filter: none !important;
+  }
+
+  :is(.will-change-transform, [class*="hover:will-change-"], .s-marquee-scrolling) {
+    will-change: auto !important;
+  }
+
+  :is(.s-marquee-scrolling, .s-marquee-mask) {
+    animation: none;
+  }
+
+  .s-marquee-scrolling > [aria-hidden="true"] {
+    display: none;
+  }
+
+  :is(.glass-panel, [class*="backdrop-blur-"]) {
+    backdrop-filter: none;
+  }
+
+  footer.glass-panel {
+    background-color: rgb(var(--s-surface-panel) / 0.92);
+  }
+
+  /* 移除毛玻璃后用更实的底色保证可读性 */
+  &[data-appearance-style="image"]
+    :is(
+      .glass-panel,
+      .bg-surface-bright,
+      .bg-field,
+      footer.bg-surface-panel,
+      [role="dialog"].bg-surface-panel,
+      [role="dialog"].bg-surface-alt,
+      [role="alertdialog"].bg-surface-panel,
+      [role="alertdialog"].bg-surface-alt
+    ) {
+    backdrop-filter: none;
+    background-color: rgb(var(--s-surface-panel) / 0.92);
+  }
+
+  .player-transition-shine {
+    animation: none;
+    background: none;
+    color: rgb(var(--s-on-surface));
+  }
+}
+
+@keyframes reduced-motion-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes reduced-motion-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 71d43b14b..0314c8ae7 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -289,6 +289,10 @@ export interface AppearanceSettings {
   layoutMode: LayoutMode;
   /** 路由切换动效 */
   routeTransition: RouteTransition;
+  /** 页面之间的共享元素过渡 */
+  seamlessTransition: boolean;
+  /** 减弱界面动画 */
+  reduceMotion: boolean;
   /** 侧边栏折叠 */
   sidebarCollapsed: boolean;
   /** 侧边栏歌单项显示封面 */