diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4421dc7d5..e31f1a8d8 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,19 +86,25 @@ 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
+                  ref="inputWrapper"
+                  class="home-input-wrapper relative w-full"
+                  @mousemove="onMouseMove"
+                >
+                  <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 bg-bg-subtle/90! backdrop-blur-sm"
+                    @focus="isSearchFocused = true"
+                    @blur="isSearchFocused = false"
+                  />
+                </div>
 
                 <ButtonBase
                   type="submit"
@@ -141,4 +158,28 @@ defineOgImageComponent('Default', {
     background-color: CanvasText;
   }
 }
+
+.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 {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -150% 0;
+  }
+}
 </style>