"use client"; import React, { useRef, useEffect } from "react"; import { motion, useScroll, useTransform, useMotionValue, useMotionValueEvent } from "framer-motion"; export default function CoffeeView({ className }: { className?: string }) { const containerRef = useRef(null); const videoRef = useRef(null); // Setup Framer Motion's useScroll hook tracked to the parent wrapper container const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end end"], }); // A motion value to hold the smoothly LERP-ed scroll progress const interpolatedProgress = useMotionValue(0); // Keep track of scroll & LERP states using refs const targetProgress = useRef(0); const currentProgress = useRef(0); const isSeeking = useRef(false); const pendingTime = useRef(null); // Sync scrollYProgress changes to targetProgress ref useMotionValueEvent(scrollYProgress, "change", (latest: number) => { targetProgress.current = latest; }); // Smooth text slide-in properties based on interpolatedProgress (LERPed progress) // Left side text: slides in from left (-150px) to resting state (0px) const leftX = useTransform(interpolatedProgress, [0.1, 0.5, 1], ["-150px", "0px", "0px"]); const leftOpacity = useTransform(interpolatedProgress, [0.1, 0.5, 1], [0, 1, 1]); // Right side text: slides in from right (150px) to resting state (0px) const rightX = useTransform(interpolatedProgress, [0.1, 0.5, 1], ["150px", "0px", "0px"]); const rightOpacity = useTransform(interpolatedProgress, [0.1, 0.5, 1], [0, 1, 1]); // Single requestAnimationFrame render loop to LERP progress and update video frame useEffect(() => { const video = videoRef.current; if (!video) return; // Ensure video is initially paused to let scroll handle playback time video.pause(); video.preload = "auto"; let rafId: number; const updateFrame = () => { const target = targetProgress.current; const current = currentProgress.current; const diff = target - current; // Smooth LERP interpolation if (Math.abs(diff) > 0.0001) { currentProgress.current += diff * 0.08; } else if (current !== target) { currentProgress.current = target; } // Update the motion value so text animations stay in perfect organic lock-step interpolatedProgress.set(currentProgress.current); // Frame-accurate seeking queue if (video.duration && !isNaN(video.duration)) { const targetTime = currentProgress.current * video.duration; const boundedTime = Math.max(0, Math.min(targetTime, video.duration - 0.02)); if (!isSeeking.current) { isSeeking.current = true; video.currentTime = boundedTime; } else { pendingTime.current = boundedTime; } } rafId = requestAnimationFrame(updateFrame); }; // Callback when the video finishes seeking a frame 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); // Initial frame sync once metadata is loaded const syncInitialFrame = () => { if (video.duration) { const initialTime = targetProgress.current * video.duration; video.currentTime = Math.max(0, Math.min(initialTime, video.duration - 0.02)); } }; video.addEventListener("loadedmetadata", syncInitialFrame); // Start the loop rafId = requestAnimationFrame(updateFrame); return () => { cancelAnimationFrame(rafId); video.removeEventListener("seeked", handleSeeked); video.removeEventListener("loadedmetadata", syncInitialFrame); }; }, [interpolatedProgress]); return ( <>

{/* Sticky full-screen wrapper so content remains in viewport during scroll progress */}

{/* Background Video Layer */}

{/* Subtle vignette or overlay to ensure readability */}

{/* Foreground Content Row */}

{/* Left Side Typography Layout (Slides in from Left) */}

RICH &
EROMATIC
LOUNGE
COFFE

{/* Right Side Typography Layout (Slides in from Right) */}

It's a emotion for
us and we always

); }

RICH & EROMATIC LOUNGE COFFE

RICH &
EROMATIC
LOUNGE
COFFE