"use client"; import React, { useRef, useEffect } from "react"; import { motion, useScroll, useTransform, useSpring } from "framer-motion"; import { ChevronDown } from "lucide-react"; export default function Header({ className }: { className?: string }) { const containerRef = useRef(null); const videoRef = useRef(null); // Set up the scroll progress tracker over a 300vh scrollable runway const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end end"], }); // Apply a spring to the scroll progress to get that premium, momentum-based smooth scrubbing feel const smoothProgress = useSpring(scrollYProgress, { damping: 35, stiffness: 90, restDelta: 0.001, }); // Keep the background video frame in perfect frame-accurate sync with smooth LERP scroll scrubbing useEffect(() => { const video = videoRef.current; if (!video) return; // Ensure the video is explicitly paused and won't autoplay video.pause(); video.currentTime = 0; // State parameters for smooth LERP interpolation and seek management let targetProgress = 0; let currentProgress = 0; const lerpFactor = 0.08; // Buttery smooth inertia coefficient let isSeeking = false; let pendingSeekTime: number | null = null; let animationFrameId: number; // Function to safely seek without overwhelming the browser's video decoder const performSeek = (time: number) => { if (isNaN(time) || !isFinite(time)) return; // Keep within video duration bounds const maxDuration = video.duration || 7; const safeTime = Math.max(0, Math.min(time, maxDuration - 0.05)); if (isSeeking) { // If a seek is already active, queue this newest target time as the next destination pendingSeekTime = safeTime; } else { isSeeking = true; video.currentTime = safeTime; } }; // Listeners for seek states to execute queued frames instantly once the hardware decoder is free const handleSeeking = () => { isSeeking = true; }; const handleSeeked = () => { isSeeking = false; if (pendingSeekTime !== null) { const nextTime = pendingSeekTime; pendingSeekTime = null; performSeek(nextTime); } }; video.addEventListener("seeking", handleSeeking); video.addEventListener("seeked", handleSeeked); // Force video to stay paused in case of focus or OS media interruptions const preventAutoPlay = () => { video.pause(); }; video.addEventListener("play", preventAutoPlay); // The central requestAnimationFrame render loop const tick = () => { const container = containerRef.current; if (!container) { animationFrameId = requestAnimationFrame(tick); return; } // Calculate pure viewport-aware scroll progress const rect = container.getBoundingClientRect(); const totalScrollableHeight = container.clientHeight - window.innerHeight; if (totalScrollableHeight > 0) { // Calculate the absolute progress (0.0 to 1.0) based on sticky container scroll const scrolled = -rect.top; const progress = Math.max(0, Math.min(scrolled / totalScrollableHeight, 1)); targetProgress = progress; } // Linear interpolation (LERP) for fluid deceleration currentProgress += (targetProgress - currentProgress) * lerpFactor; // Close the gap when values are extremely close to conserve CPU if (Math.abs(targetProgress - currentProgress) < 0.0001) { currentProgress = targetProgress; } // Sync the video currentTime with the interpolated progress const duration = video.duration || 7; const targetTime = currentProgress * duration; // Only invoke seek if targetTime is different from current time if (Math.abs(video.currentTime - targetTime) > 0.01) { performSeek(targetTime); } animationFrameId = requestAnimationFrame(tick); }; // Kick off the frame-accurate animation loop animationFrameId = requestAnimationFrame(tick); // Initial metadata load to lock the first frame instantly const handleMetadata = () => { video.pause(); video.currentTime = 0; }; video.addEventListener("loadedmetadata", handleMetadata); return () => { cancelAnimationFrame(animationFrameId); video.removeEventListener("seeking", handleSeeking); video.removeEventListener("seeked", handleSeeked); video.removeEventListener("play", preventAutoPlay); video.removeEventListener("loadedmetadata", handleMetadata); }; }, []); // Subtitle fades out quickly const subtitleOpacity = useTransform(smoothProgress, [0, 0.15], [1, 0]); const subtitleY = useTransform(smoothProgress, [0, 0.15], [0, -25]); // Main Title "LAOUNGE" transformation const logoScale = useTransform(smoothProgress, [0, 0.35], [1, 0.228]); const logoX = useTransform(smoothProgress, [0, 0.35], [0, 0]); const logoY = useTransform(smoothProgress, [0, 0.35], [-10, -20]); // Header Nav Links & CTA Button fade in const navOpacity = useTransform(smoothProgress, [0.22, 0.4], [0, 1]); const navY = useTransform(smoothProgress, [0.22, 0.4], [-30, 0]); // Glass Box Container fades and slides away to the left const boxOpacity = useTransform(smoothProgress, [0, 0.24], [1, 0]); const boxX = useTransform(smoothProgress, [0, 0.24], [0, -100]); const boxScale = useTransform(smoothProgress, [0, 0.24], [1, 0.92]); // Right Paragraph fades and slides away to the right const rightParagraphOpacity = useTransform(smoothProgress, [0, 0.24], [1, 0]); const rightParagraphX = useTransform(smoothProgress, [0, 0.24], [0, 100]); const rightParagraphScale = useTransform(smoothProgress, [0, 0.24], [1, 0.92]); // Bottom scroll helper indicator const indicatorOpacity = useTransform(smoothProgress, [0, 0.1], [0.7, 0]); // Stage 2 transforms const secondStageLeftOpacity = useTransform(smoothProgress, [0.52, 0.78], [0, 1]); const secondStageLeftX = useTransform(smoothProgress, [0.52, 0.78], [-120, 0]); const secondStageRightOpacity = useTransform(smoothProgress, [0.58, 0.86], [0, 1]); const secondStageRightX = useTransform(smoothProgress, [0.58, 0.86], [120, 0]); return ( <>

{/* Sticky Frame representing the viewport */}

{/* Background Video Layer */}

{/* Subtle elegant gradient overlay for pristine typography legibility */}

{/* Global Floating Header (Always on Top) */}

{/* Brand Logo Group */}

MADE FOR YOU. BUILT FOR MOMENTS. {/* Animating logo - scales and translates smoothly into position */} LAOUNGE

{/* Premium Header Menu Items & CTA Button (Revealed dynamically during scroll) */}

{item}

{/* Dynamic Center Stage: Handles the spatial transitions of the landing elements */}

{/* Stage 1 Container: Glass box on left, Description paragraph on right */}

{/* Left Box Component (Glassmorphism) */}

Every detail is designed to make your coffee break feel better

{/* Dotted/Dashed Divider */}

{/* Bottom right text inside the box */}

Beautiful, durable,
and made to elevate
every sip.

{/* Right Side Paragraph Component */}

Every detail is designed to make your coffee break feel better. From the perfect grip to premium insulation, Oryzo brings comfort, style, and warmth together in every cup.

Every detail is designed to make your coffee break feel better

ISN'T JUST A COFFE FOR YOU !