58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|