diff --git a/shop/components/ScrollIndicator.tsx b/shop/components/ScrollIndicator.tsx
new file mode 100644
index 0000000..7d6dd1f
--- /dev/null
+++ b/shop/components/ScrollIndicator.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import React from 'react'
+import { motion, useScroll, useSpring } from 'framer-motion'
+
+export function ScrollIndicator() {
+  const { scrollYProgress } = useScroll()
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  })
+
+  return (
+    <motion.div
+      className="fixed top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-blue-600 via-cyan-400 to-emerald-400 origin-left z-50 pointer-events-none shadow-[0_0_12px_rgba(59,130,246,0.8)]"
+      style={{ scaleX }}
+    />
+  )
+}