From 018cecf7e7b4bb96f767d2eadbf6726a4c84f329 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 18 Jun 2024 15:38:49 +0800
Subject: [PATCH] perf(theme): improve home hero transition

---
 theme/src/client/components/Home/VPHomeHero.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/theme/src/client/components/Home/VPHomeHero.vue b/theme/src/client/components/Home/VPHomeHero.vue
index 7102e7dd..91106e13 100644
--- a/theme/src/client/components/Home/VPHomeHero.vue
+++ b/theme/src/client/components/Home/VPHomeHero.vue
@@ -191,14 +191,23 @@ useHomeHeroTintPlate(
   height: calc(100% + var(--vp-footer-height, 0px));
 }
 
+@property --vp-home-hero-bg-filter {
+  inherits: false;
+  initial-value: #fff;
+  syntax: "<color>";
+}
+
 .bg-filter::after {
+  --vp-home-hero-bg-filter: var(--vp-c-bg);
+
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   content: "";
-  background: linear-gradient(to bottom, var(--vp-c-bg) 0, transparent 40%, transparent 60%, var(--vp-c-bg) 140%);
+  background: linear-gradient(to bottom, var(--vp-home-hero-bg-filter) 0, transparent 45%, transparent 55%, var(--vp-home-hero-bg-filter) 140%);
+  transition: --vp-home-hero-bg-filter var(--t-color);
 }
 
 .bg-filter canvas {