/* Hero — preserves the original scroll-scrubbed video mechanic. v2: text anchored to corners (film-title style) instead of dead center. Center of frame stays clean for the video subject. */ const { useEffect: useEffectH, useRef: useRefH } = React; function Hero() { const containerRef = useRefH(null); const videoRef = useRefH(null); const scrollHintRef = useRefH(null); const labelRef = useRefH(null); const line1Ref = useRefH(null); const line2Ref = useRefH(null); const subtitleRef = useRefH(null); const btnRef = useRefH(null); const sideTagRef = useRefH(null); const p2LabelRef = useRefH(null); const p2TitleRef = useRefH(null); const p2SubRef = useRefH(null); const p2BtnRef = useRefH(null); const p2SideRef = useRefH(null); useEffectH(() => { const container = containerRef.current; const video = videoRef.current; if (!container || !video) return; gsap.registerPlugin(ScrollTrigger); let gsapCtx; const initAll = () => { video.pause(); video.currentTime = 0; // ---- Scroll → video scrub, rAF-throttled + delta-skip ---- // Without throttling, every scroll event triggers an expensive seek; // on iOS that pegs the decoder and feels laggy. We coalesce into one // write per frame and skip seeks smaller than the inter-keyframe gap. let targetTime = 0; let lastApplied = -1; let ticking = false; const MIN_DELTA = 0.035; // ~30fps worth of video; smaller = juddery const applyFrame = () => { ticking = false; if (!video.duration) return; if (Math.abs(targetTime - lastApplied) < MIN_DELTA) return; // fastSeek when available — hops to nearest keyframe, much smoother if (typeof video.fastSeek === 'function') { try { video.fastSeek(targetTime); } catch (e) { video.currentTime = targetTime; } } else { video.currentTime = targetTime; } lastApplied = targetTime; }; const onScroll = () => { const containerTop = container.offsetTop; const containerHeight = container.offsetHeight; const viewportHeight = window.innerHeight; const scrolled = window.scrollY - containerTop; const scrollable = containerHeight - viewportHeight; const progress = Math.max(0, Math.min(1, scrolled / scrollable)); targetTime = progress * (video.duration || 0); if (!ticking) { ticking = true; requestAnimationFrame(applyFrame); } }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); gsapCtx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: container, start: 'top top', end: 'bottom bottom', scrub: 1.2 }, }); tl.to(scrollHintRef.current, { autoAlpha: 0, duration: 0.05 }, 0.04); // PHASE 1 IN tl.fromTo(labelRef.current, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.09, ease: 'power2.out' }, 0) .fromTo(sideTagRef.current, { autoAlpha: 0, x: 18 }, { autoAlpha: 1, x: 0, duration: 0.10, ease: 'power2.out' }, 0.02) .fromTo(line1Ref.current, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, duration: 0.11, ease: 'power2.out' }, 0.02) .fromTo(line2Ref.current, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, duration: 0.11, ease: 'power2.out' }, 0.05) .fromTo(subtitleRef.current, { autoAlpha: 0, y: 18 }, { autoAlpha: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.08) .fromTo(btnRef.current, { autoAlpha: 0, y: 18 }, { autoAlpha: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.10); // PHASE 1 DRIFT tl.to(line1Ref.current, { y: -14, duration: 0.30, ease: 'none' }, 0.12) .to(line2Ref.current, { y: -14, duration: 0.30, ease: 'none' }, 0.12) .to(subtitleRef.current, { y: -8, duration: 0.30, ease: 'none' }, 0.12) .to(btnRef.current, { y: -8, duration: 0.30, ease: 'none' }, 0.12); // PHASE 1 OUT tl.to(labelRef.current, { autoAlpha: 0, y: -18, duration: 0.07, ease: 'power2.in' }, 0.42) .to(sideTagRef.current, { autoAlpha: 0, x: 18, duration: 0.07, ease: 'power2.in' }, 0.42) .to(line1Ref.current, { autoAlpha: 0, y: -28, duration: 0.07, ease: 'power2.in' }, 0.43) .to(line2Ref.current, { autoAlpha: 0, y: -28, duration: 0.07, ease: 'power2.in' }, 0.44) .to(subtitleRef.current, { autoAlpha: 0, y: -18, duration: 0.07, ease: 'power2.in' }, 0.42) .to(btnRef.current, { autoAlpha: 0, y: -18, duration: 0.07, ease: 'power2.in' }, 0.43); // PHASE 2 IN tl.fromTo(p2LabelRef.current, { autoAlpha: 0, y: 20 }, { autoAlpha: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.60) .fromTo(p2SideRef.current, { autoAlpha: 0, x:-18 }, { autoAlpha: 1, x: 0, duration: 0.10, ease: 'power2.out' }, 0.61) .fromTo(p2TitleRef.current, { autoAlpha: 0, y: 56 }, { autoAlpha: 1, y: 0, duration: 0.12, ease: 'power2.out' }, 0.62) .fromTo(p2SubRef.current, { autoAlpha: 0, y: 22 }, { autoAlpha: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.66) .fromTo(p2BtnRef.current, { autoAlpha: 0, y: 18 }, { autoAlpha: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.70); // PHASE 2 OUT tl.to(p2LabelRef.current, { autoAlpha: 0, y: -14, duration: 0.10, ease: 'power2.in' }, 0.84) .to(p2SideRef.current, { autoAlpha: 0, x: -18, duration: 0.10, ease: 'power2.in' }, 0.84) .to(p2TitleRef.current, { autoAlpha: 0, y: -34, duration: 0.10, ease: 'power2.in' }, 0.84) .to(p2SubRef.current, { autoAlpha: 0, y: -22, duration: 0.10, ease: 'power2.in' }, 0.84) .to(p2BtnRef.current, { autoAlpha: 0, y: -16, duration: 0.10, ease: 'power2.in' }, 0.85); }, container); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }; let cleanup; if (video.readyState >= 1) { cleanup = initAll(); } else { const handler = () => { cleanup = initAll(); }; video.addEventListener('loadedmetadata', handler, { once: true }); return () => { video.removeEventListener('loadedmetadata', handler); gsapCtx?.revert(); }; } return () => { cleanup?.(); gsapCtx?.revert(); }; }, []); return (
{/* Video */} {/* Subtle dark grade — keeps video vibrant, lifts type at edges */}
{/* Side vignettes — frame the subject without flattening it */}
{/* Film grain (tiny noise, optional but glues type to plate) */}
")', backgroundSize: '180px 180px', }} /> {/* Bottom blend into the page cream */}
{/* ── Content overlay ── */}
{/* Editorial frame ticks */}
N · 48° 51′ E · 002° 21′
REEL 01 · 04:23 ABOVE / 36,000 FT
{/* ── PHASE 1 — corner-anchored on desktop, centered on mobile ── */}

A Travel Atelier — Est. 2009

Be happy. Travel more.

Quiet, hand-built journeys for travelers who'd rather feel a place than tick it off a list.

Begin your itinerary
{/* ── PHASE 2 — corner-anchored on desktop, centered on mobile ── */}

Above the noise

Above the
ordinary.

Curated by people, not algorithms. We design no more than 240 trips a year — so we can answer the phone, every time.

See where we go
{/* Scroll hint — center bottom */}
Scroll
); } window.Hero = Hero;