first commit

app/components/ScrollVideo.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, useScroll, useTransform, useSpring } from "framer-motion";
+
+export default function ScrollVideo() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  // Use scroll progress within this section
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"]
+  });
+
+  // Smooth out the scroll value
+  const smoothProgress = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  });
+
+  // Calculate the expansion: Starts at 25% circle, grows to 150% (to fully cover screen)
+  const clipPathValue = useTransform(smoothProgress, [0, 1], ["circle(25% at 50% 50%)", "circle(100% at 50% 50%)"]);
+  
+  // Also fade the overlay
+  const overlayOpacity = useTransform(smoothProgress, [0, 0.8], [0.3, 0]);
+
+  return (
+    <section 
+      ref={containerRef} 
+      className="relative h-[250vh] bg-white"
+    >
+      <div className="sticky top-0 h-screen w-full flex items-center justify-center overflow-hidden z-30">
+        <motion.div 
+          style={{ clipPath: clipPathValue }}
+          className="relative w-full h-full flex items-center justify-center bg-white will-change-transform shadow-2xl"
+        >
+          {/* YouTube Embed with Hardware Acceleration */}
+          <div className="absolute inset-0 pointer-events-none scale-110 will-change-transform">
+            <iframe
+              className="absolute top-1/2 left-1/2 w-[115vw] h-[115vh] -translate-x-1/2 -translate-y-1/2 object-cover pointer-events-none"
+              src="https://www.youtube.com/embed/avqL1kRkX0c?autoplay=1&mute=1&controls=0&loop=1&playlist=avqL1kRkX0c&playsinline=1&rel=0&modestbranding=1"
+              allow="autoplay; encrypted-media"
+              allowFullScreen
+            ></iframe>
+          </div>
+          
+          {/* Subtle Overlay */}
+          <motion.div 
+            style={{ opacity: overlayOpacity }}
+            className="absolute inset-0 bg-black/20 z-10 pointer-events-none" 
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+}