"use client"; import React, { useEffect, useRef, useState } from "react"; interface ParagraphSegment { text: string; isBold: boolean; } interface ParagraphItem { segments: ParagraphSegment[]; } export default function Details({ className }: { className?: string }) { const containerRef = useRef(null); const [_scrollProgress, setScrollProgress] = useState(0); const [smoothScroll, setSmoothScroll] = useState(0); const [isMobile, setIsMobile] = useState(false); const scrollProgressRef = useRef(0); const smoothScrollRef = useRef(0); const videoRef = useRef(null); const [videoDuration, setVideoDuration] = useState(0); const videoTargetTimeRef = useRef(0); const videoCurrentTimeRef = useRef(0); // Monitor screen size to scale text spacing for mobile vs desktop useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 1024); }; checkMobile(); window.addEventListener("resize", checkMobile); return () => window.removeEventListener("resize", checkMobile); }, []); // Monitor scroll progress of the container relative to the viewport useEffect(() => { const handleScroll = () => { const container = containerRef.current; if (container) { const rect = container.getBoundingClientRect(); const totalScrollable = rect.height - window.innerHeight; if (totalScrollable > 0) { const progress = -rect.top / totalScrollable; const clamped = Math.min(Math.max(progress, 0), 1); scrollProgressRef.current = clamped; setScrollProgress(clamped); } } }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, []); // Preload video and extract duration dynamically useEffect(() => { const video = videoRef.current; if (!video) return; video.preload = "auto"; video.muted = true; video.playsInline = true; video.pause(); const handleMetadata = () => { if (video.duration && !isNaN(video.duration) && video.duration > 0) { setVideoDuration(video.duration); } }; if (video.readyState >= 1 && video.duration) { handleMetadata(); } video.addEventListener("loadedmetadata", handleMetadata); video.addEventListener("durationchange", handleMetadata); video.addEventListener("canplay", handleMetadata); return () => { video.removeEventListener("loadedmetadata", handleMetadata); video.removeEventListener("durationchange", handleMetadata); video.removeEventListener("canplay", handleMetadata); }; }, []); // Smooth lerped animation loops for text scrolling and video scrubbing useEffect(() => { let animId: number; const update = () => { smoothScrollRef.current += (scrollProgressRef.current - smoothScrollRef.current) * 0.08; setSmoothScroll(smoothScrollRef.current); const video = videoRef.current; const duration = video && video.duration && !isNaN(video.duration) && video.duration > 0 ? video.duration : videoDuration; if (video && duration > 0) { if (videoDuration !== duration) { setVideoDuration(duration); } // Map active scroll progress of the details section (from 0.0 to 0.65) to video duration for faster play speed const scrollActiveRange = Math.min(Math.max(smoothScrollRef.current / 0.65, 0), 1); videoTargetTimeRef.current = scrollActiveRange * duration; // Interpolate smoothly towards the target time (lerp factor 0.08 for fluid feel) videoCurrentTimeRef.current += (videoTargetTimeRef.current - videoCurrentTimeRef.current) * 0.08; // Apply scrub within safe video boundaries if (Math.abs(videoCurrentTimeRef.current - videoTargetTimeRef.current) > 0.002) { if (!video.seeking) { video.currentTime = Math.min(Math.max(videoCurrentTimeRef.current, 0), duration - 0.01); } } } animId = requestAnimationFrame(update); }; animId = requestAnimationFrame(update); return () => cancelAnimationFrame(animId); }, [videoDuration]); // Highly structured paragraph data with extra top and bottom paragraphs for seamless continuous cylindrical visual const paragraphData: ParagraphItem[] = [ { segments: [{ text: "A new paradigm for everyday technology.", isBold: false }], }, { segments: [{ text: "Redefining focus, style, and digital intelligence.", isBold: false }], }, { segments: [ { text: "So we set out to build ", isBold: false }, { text: "smart glasses ", isBold: true }, { text: "that keep you connected and informed,", isBold: false }, ], }, { segments: [ { text: "while letting you stay ", isBold: false }, { text: "present in the real world. ", isBold: true }, { text: "This is how ", isBold: false }, { text: "Glimpse was born.", isBold: true }, ], }, { segments: [ { text: "Built with ", isBold: false }, { text: "intelligent AI, ", isBold: true }, { text: "immersive optics, ", isBold: true }, { text: "and premium audio,", isBold: true }, ], }, { segments: [ { text: "and an ", isBold: false }, { text: "ultra-lightweight frame, ", isBold: false }, { text: "Glimpse transforms", isBold: false }, ], }, { segments: [ { text: "everyday eyewear ", isBold: true }, { text: "into a ", isBold: false }, { text: "powerful companion ", isBold: true }, ], }, { segments: [{ text: "for work, travel, and daily life.", isBold: false }], }, { segments: [ { text: "Every detail ", isBold: true }, { text: "is engineered to deliver ", isBold: false }, { text: "clarity, comfort, and seamless performance,", isBold: true }, ], }, { segments: [ { text: "so you can experience the world with ", isBold: false }, { text: "clarity.", isBold: true }, ], }, { segments: [{ text: "Designed to elevate your everyday experiences.", isBold: false }], }, { segments: [{ text: "Stay in the flow, stay in the moment.", isBold: false }], }, ]; // Map progress (0 to 1) smoothly across the list core indices (index 2 to 9) const activeCenter = 2 + smoothScroll * (paragraphData.length - 5); const spacingMultiplier = isMobile ? 80 : 120; return ( <>

{/* Sticky viewport frame */}

{/* Full screen width container aligning perfectly with the navigation bar */}

{/* Left Column: Dark Panel containing the Cylindrical Magnified Text */}

{/* Real-time absolute vertical slider frame with zero horizontal cropping and smooth overflow mask */}

{paragraphData.map((para, i) => { const distance = i - activeCenter; // Continuous Gaussian bell curve to compute peak focus smoothly const focus = Math.exp(-0.4 * (distance * distance)); // Magnify the active item to 1.35x and scale down the distant ones continuously (to 0.45x) const scale = 0.45 + 0.9 * focus; // Cinematic opacity and camera lens blur falloff const opacity = 0.12 + 0.88 * Math.pow(focus, 2.2); // Sharp focus deadzone to prevent browser pixelation/rasterization filter bugs const blurVal = focus > 0.82 ? 0 : (1 - focus / 0.82) * 14; // Compute vertical translation with visual lens compression (power 0.78 mimics physical curved perspective) const offsetY = Math.sign(distance) * Math.pow(Math.abs(distance), 0.78) * spacingMultiplier; return (

0 ? "blur(" + blurVal + "px)" : "none", }} className="text-left select-none transition-all duration-150 ease-out" >

{para.segments.map((seg, segIdx) => { // Highlight focused text colors const activeColor = seg.isBold ? "#FFFFFF" : "#D1D5DB"; const inactiveColor = "#4B5563"; const textColor = focus > 0.45 ? activeColor : inactiveColor; return ( {seg.text} ); })}

); })}

{/* Right Column: Premium Video Panel (With 20px horizontal margin/space on each side, zero cropping) */}

); }