"use client"; import React, { useState, useEffect, useRef } from "react"; export default function DerixHeader({ className }: { className?: string }) { const [scrollProgress, setScrollProgress] = useState(0); const containerRef = useRef(null); const placeholderRef = useRef(null); // Track viewport dimensions and placeholder rect dynamically const [dimensions, setDimensions] = useState({ viewportWidth: 1440, viewportHeight: 900, placeholderLeft: 0, placeholderTop: 34, placeholderWidth: 90, placeholderHeight: 62, }); const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); const handleScroll = () => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); // Total scrollable distance for the transition (80% of window height) const scrollThreshold = window.innerHeight * 0.8; const scrolled = -rect.top; const progress = Math.min(Math.max(scrolled / scrollThreshold, 0), 1); setScrollProgress(progress); }; const updateSizes = () => { if (placeholderRef.current) { const rect = placeholderRef.current.getBoundingClientRect(); setDimensions({ viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, placeholderLeft: rect.left, placeholderTop: rect.top, placeholderWidth: 90, placeholderHeight: 62, }); } }; window.addEventListener("scroll", handleScroll, { passive: true }); window.addEventListener("resize", updateSizes); // Initial calculations handleScroll(); const timer = setTimeout(updateSizes, 60); return () => { window.removeEventListener("scroll", handleScroll); window.removeEventListener("resize", updateSizes); clearTimeout(timer); }; }, []); // Safe fallback measurements for SSR/first paints const targetLeft = isMounted ? dimensions.placeholderLeft : 0; const targetTop = isMounted ? dimensions.placeholderTop : 34; const targetWidth = isMounted ? dimensions.viewportWidth : 1440; const targetHeight = isMounted ? dimensions.viewportHeight : 900; // Interpolated position/bounds for the scaling video container const currentWidth = isMounted ? 90 + (targetWidth - 90) * scrollProgress : 90; const currentHeight = isMounted ? 62 + (targetHeight - 62) * scrollProgress : 62; const currentLeft = isMounted ? targetLeft * (1 - scrollProgress) : 0; const currentTop = isMounted ? targetTop * (1 - scrollProgress) : 34; const currentBorderRadius = 12 * (1 - scrollProgress); const isReady = isMounted && dimensions.placeholderLeft > 0; // Interactive style colors const textColor = scrollProgress > 0.45 ? "#FFFFFF" : "#1B1C1A"; const headerColor = scrollProgress > 0.45 ? "#FFFFFF" : "#000000"; return ( <>

{/* Sticky Hero Area & Layout Controller */}

{/* Scaled/Expanding Video Background */}

0.05 ? "0 10px 40px rgba(0,0,0,0.12)" : "none", opacity: isReady ? 1 : 0, }} >

{/* Top Header Section */}

{/* DERIX Typography */}

DERIX

{/* Anchor Placeholder for Video positioning */}

{/* MENU Typography */}

{/* Center Main Typography content overlay */}

{/* FLY. FILM. Line */}

FLY. FILM. FLY. FILM.

{/* INSPIRE. Line */}

INSPIRE. INSPIRE.

{/* Dynamic micro scroll indicator at bottom */}

); }