"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, useScroll, useTransform, useMotionValue, useMotionValueEvent } from "framer-motion"; import { ArrowUp, Star, Quote } from "lucide-react"; export default function Testimonial({ className }: { className?: string }) { const containerRef = useRef(null); const videoRef = useRef(null); const [isHovered, setIsHovered] = useState(false); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end end"], }); const interpolatedProgress = useMotionValue(0); const targetProgress = useRef(0); const currentProgress = useRef(0); const isSeeking = useRef(false); const pendingTime = useRef(null); useMotionValueEvent(scrollYProgress, "change", (latest: number) => { targetProgress.current = latest; }); const panelAX = useTransform(interpolatedProgress, [0, 0.42, 0.52, 1], ["0px", "0px", "-160%", "-160%"]); const panelAOpacity = useTransform(interpolatedProgress, [0, 0.42, 0.52, 1], [1, 1, 0, 0]); const panelBX = useTransform(interpolatedProgress, [0, 0.42, 0.52, 1], ["160%", "160%", "0px", "0px"]); const panelBOpacity = useTransform(interpolatedProgress, [0, 0.42, 0.52, 1], [0, 0, 1, 1]); useEffect(() => { const video = videoRef.current; if (!video) return; video.pause(); video.preload = "auto"; let rafId = 0; const updateFrame = () => { const target = targetProgress.current; const current = currentProgress.current; const diff = target - current; if (Math.abs(diff) > 0.0001) { currentProgress.current += diff * 0.08; } else if (current !== target) { currentProgress.current = target; } interpolatedProgress.set(currentProgress.current); if (video.duration && !isNaN(video.duration)) { const targetTime = currentProgress.current * video.duration; const boundedTime = Math.max(0, Math.min(targetTime, video.duration - 0.15)); if (!isSeeking.current) { isSeeking.current = true; video.currentTime = boundedTime; } else { pendingTime.current = boundedTime; } } rafId = requestAnimationFrame(updateFrame); }; const handleSeeked = () => { isSeeking.current = false; if (pendingTime.current !== null) { const nextTime = pendingTime.current; pendingTime.current = null; isSeeking.current = true; video.currentTime = nextTime; } }; video.addEventListener("seeked", handleSeeked); const syncInitialFrame = () => { if (video.duration) { const initialTime = targetProgress.current * video.duration; video.currentTime = Math.max(0, Math.min(initialTime, video.duration - 0.15)); } }; video.addEventListener("loadedmetadata", syncInitialFrame); rafId = requestAnimationFrame(updateFrame); return () => { cancelAnimationFrame(rafId); video.removeEventListener("seeked", handleSeeked); video.removeEventListener("loadedmetadata", syncInitialFrame); }; }, [interpolatedProgress]); return ( <>

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

); }

Elevate Your Coffee Experience

Elevate Your
Coffee
Experience