From 360e92d655e6ff21c2835efcaf49d7aa61102c45 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sun, 22 Feb 2026 09:54:10 +0000
Subject: [PATCH 1/3] chore: add minor effect for home search input

---
 app/pages/index.vue | 55 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4421dc7d5..671949c7c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -75,19 +75,21 @@ defineOgImageComponent('Default', {
                   /
                 </span>
 
-                <InputBase
-                  id="home-search"
-                  v-model="searchQuery"
-                  type="search"
-                  name="q"
-                  autofocus
-                  :placeholder="$t('search.placeholder')"
-                  no-correct
-                  size="large"
-                  class="w-full ps-8 pe-24"
-                  @focus="isSearchFocused = true"
-                  @blur="isSearchFocused = false"
-                />
+                <div class="home-input-wrapper relative w-full">
+                  <InputBase
+                    id="home-search"
+                    v-model="searchQuery"
+                    type="search"
+                    name="q"
+                    autofocus
+                    :placeholder="$t('search.placeholder')"
+                    no-correct
+                    size="large"
+                    class="w-full ps-8 pe-24"
+                    @focus="isSearchFocused = true"
+                    @blur="isSearchFocused = false"
+                  />
+                </div>
 
                 <ButtonBase
                   type="submit"
@@ -141,4 +143,31 @@ defineOgImageComponent('Default', {
     background-color: CanvasText;
   }
 }
+
+.home-input-wrapper {
+  &::before {
+    content: '';
+    @apply absolute -inset-0.5 rounded-xl -z-1;
+    animation: glide 1s 0.8s ease-in-out;
+    background: linear-gradient(
+      -30deg,
+      transparent 40%,
+      var(--accent) 41%,
+      var(--accent) 59%,
+      transparent 60%
+    );
+    background-size: 300% 100%;
+    background-position: -150% 0;
+    opacity: 0.5;
+  }
+}
+
+@keyframes glide {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -150% 0;
+  }
+}
 </style>

From 35afceea8ae0b8d24bbe1fc28440fcf94917e9f0 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sun, 22 Feb 2026 10:37:03 +0000
Subject: [PATCH 2/3] chore: update home search effect

---
 app/pages/index.vue | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 671949c7c..847c50250 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,6 +3,7 @@ import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
 const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
+const inputWrapperRef = useTemplateRef<HTMLDivElement>('inputWrapper')
 
 async function search() {
   flushUpdateUrlQuery()
@@ -24,6 +25,16 @@ defineOgImageComponent('Default', {
   title: 'npmx',
   description: 'a fast, modern browser for the **npm registry**',
 })
+
+function onMouseMove(event: MouseEvent) {
+  const inputWrapper = inputWrapperRef.value
+  if (!inputWrapper) return
+  const rect = inputWrapper.getBoundingClientRect()
+  const x = event.clientX - rect.left
+  const y = event.clientY - rect.top
+  inputWrapper.style.setProperty('--mouse-x', `${x}px`)
+  inputWrapper.style.setProperty('--mouse-y', `${y}px`)
+}
 </script>
 
 <template>
@@ -75,7 +86,11 @@ defineOgImageComponent('Default', {
                   /
                 </span>
 
-                <div class="home-input-wrapper relative w-full">
+                <div
+                  ref="inputWrapper"
+                  class="home-input-wrapper relative w-full"
+                  @mousemove="onMouseMove"
+                >
                   <InputBase
                     id="home-search"
                     v-model="searchQuery"
@@ -147,19 +162,22 @@ defineOgImageComponent('Default', {
 .home-input-wrapper {
   &::before {
     content: '';
-    @apply absolute -inset-0.5 rounded-xl -z-1;
-    animation: glide 1s 0.8s ease-in-out;
+    @apply absolute -inset-0.5 rounded-[0.875rem] -z-1;
     background: linear-gradient(
-      -30deg,
-      transparent 40%,
-      var(--accent) 41%,
-      var(--accent) 59%,
-      transparent 60%
+      -80deg,
+      transparent 0%,
+      var(--accent) 5%,
+      var(--accent) 75%,
+      transparent 80%
     );
     background-size: 300% 100%;
-    background-position: -150% 0;
+    background-position: var(--mouse-x, 0) var(--mouse-y, 0);
     opacity: 0.5;
   }
+
+  input {
+    @apply bg-bg-subtle/90 backdrop-blur-sm;
+  }
 }
 
 @keyframes glide {

From abf92231f662bc10fb94ffc8c045f786b8af44b3 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Sun, 22 Feb 2026 10:40:32 +0000
Subject: [PATCH 3/3] chore: fix build

---
 app/pages/index.vue | 34 ++++++++++++++--------------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 847c50250..e31f1a8d8 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -100,7 +100,7 @@ function onMouseMove(event: MouseEvent) {
                     :placeholder="$t('search.placeholder')"
                     no-correct
                     size="large"
-                    class="w-full ps-8 pe-24"
+                    class="w-full ps-8 pe-24 bg-bg-subtle/90! backdrop-blur-sm"
                     @focus="isSearchFocused = true"
                     @blur="isSearchFocused = false"
                   />
@@ -159,25 +159,19 @@ function onMouseMove(event: MouseEvent) {
   }
 }
 
-.home-input-wrapper {
-  &::before {
-    content: '';
-    @apply absolute -inset-0.5 rounded-[0.875rem] -z-1;
-    background: linear-gradient(
-      -80deg,
-      transparent 0%,
-      var(--accent) 5%,
-      var(--accent) 75%,
-      transparent 80%
-    );
-    background-size: 300% 100%;
-    background-position: var(--mouse-x, 0) var(--mouse-y, 0);
-    opacity: 0.5;
-  }
-
-  input {
-    @apply bg-bg-subtle/90 backdrop-blur-sm;
-  }
+.home-input-wrapper::before {
+  content: '';
+  @apply absolute -inset-0.5 rounded-[0.875rem] -z-1;
+  background: linear-gradient(
+    -80deg,
+    transparent 0%,
+    var(--accent) 5%,
+    var(--accent) 75%,
+    transparent 80%
+  );
+  background-size: 300% 100%;
+  background-position: var(--mouse-x, 0) var(--mouse-y, 0);
+  opacity: 0.5;
 }
 
 @keyframes glide {