// hero.jsx — Full-screen cinematic hero: soft-focus entrance + scroll parallax const { useState, useEffect, useRef, useLayoutEffect } = React; function Hero({ setView, tw = {} }) { const headlineSize = tw.headlineSize || 'default'; const headlineMode = tw.headlineMode || 'statement'; const showEyebrow = tw.showEyebrow !== false; const ctaStyle = tw.ctaStyle || 'links'; const socialGlow = tw.socialGlow || 'bright'; const eyebrowText = tw.eyebrowText || 'Independent film & visual studio — İstanbul'; const H1_SIZE = { default: { fontSize: 'clamp(38px, 7vw, 104px)', whiteSpace: 'nowrap', lineHeight: 1.0 }, large: { fontSize: 'clamp(44px, 8.5vw, 132px)', whiteSpace: 'nowrap', lineHeight: 1.0 }, huge: { fontSize: 'clamp(50px, 10.5vw, 168px)', whiteSpace: 'normal', lineHeight: 0.96 } }[headlineSize]; const [loaded, setLoaded] = useState(false); const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width:760px)').matches); useEffect(() => { const mq = window.matchMedia('(max-width:760px)'); const on = () => setIsMobile(mq.matches); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); const [entered, setEntered] = useState(false); const [linePulse, setLinePulse] = useState(0); const contentRef = useRef(null); const socialsRef = useRef(null); const h1Ref = useRef(null); useEffect(() => { const t = setTimeout(() => { setLoaded(true); // direct-DOM fallback so the hero can never stay hidden if a re-render is lost if (contentRef.current) contentRef.current.style.opacity = '1'; }, 120); return () => clearTimeout(t); }, []); // Entrance — characters condense out of soft focus. // No hard masks, no sharp cuts: opacity + blur + gentle rise, long ease. useLayoutEffect(() => { const h1 = h1Ref.current; if (!h1) return; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const chars = h1.querySelectorAll('.kchar'); if (!window.gsap || reduce || chars.length === 0) { setEntered(true); return; } window.gsap.set(chars, { opacity: 0, y: 22, filter: 'blur(12px)' }); const tween = window.gsap.to(chars, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 1.7, ease: 'power3.out', stagger: { each: 0.024 }, delay: 0.35, clearProps: 'all', onComplete: () => setEntered(true) }); return () => tween.kill(); }, []); // Scroll parallax: manifesto drifts up + fades as you scroll past useEffect(() => { let raf = null; const update = () => { raf = null; const el = contentRef.current; if (!el) return; const y = window.scrollY; const vh = window.innerHeight; const p = Math.min(1, y / (vh * 0.9)); el.style.transform = `translateY(${y * -0.22}px)`; el.style.opacity = String(Math.max(0, Math.min(1, 1 - p * 1.1))); // Mobile only: carry the social icons up with the same parallax so they // don't stay pinned while the headline/CTAs drift away on scroll. const soc = socialsRef.current; if (soc) { if (window.matchMedia('(max-width:760px)').matches) { // drop the entrance transition once scrolling so the fade tracks the // headline/CTAs instantly instead of lagging on its 1.1s ease soc.style.transition = 'none'; soc.style.transform = `translateY(${y * -0.22}px)`; soc.style.opacity = String(Math.max(0, Math.min(1, 1 - p * 1.1))); } else { soc.style.transform = ''; soc.style.opacity = ''; } } }; const onScroll = () => {if (!raf) raf = requestAnimationFrame(update);}; window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const lineCls = `hero-line${entered ? ' entered' : ''}`; return (
{/* Radial vignette */}
{/* Central manifesto */}
{showEyebrow &&
{eyebrowText}
}

{ctaStyle === 'solid' ? <> setView('works')} /> window.RBRouter.openShowreel()} /> : <> window.RBRouter.openShowreel()} /> setView('works')} /> }
{/* Social anchors — right rail, clear orange accent */}
{[ { label: 'Vimeo', icon: , href: 'https://vimeo.com/robust' }, { label: 'Instagram', icon: , href: 'https://www.instagram.com/robust.film/?hl=tr' }, { label: 'LinkedIn', icon: , href: 'https://www.linkedin.com/company/robustfims' }]. map(({ label, icon, href }) => setLinePulse((n) => n + 1)} /> )}
{/* Scroll cue */}
Scroll
{/* Mobile-only: a single orange down arrow (replaces the text + line) */}
); } /* ── Headline typewriter — types white prefix, then orange rotating word, one caret ── */ function HeadlineTyper({ prefix, words }) { const [prefixShown, setPrefixShown] = useState(0); const [orange, setOrange] = useState(''); const stateRef = useRef({ phase: 'prefix', pi: 0, wordIndex: 0, char: 0 }); useEffect(() => { const full = (idx) => words[idx] + '.'; const START = 450, PTYPE = 55, WTYPE = 90, DELETE = 45, HOLD = 2100, PAUSE = 350; let timeout; const tick = () => { const s = stateRef.current; if (s.phase === 'prefix') { s.pi++; setPrefixShown(s.pi); if (s.pi >= prefix.length) { s.phase = 'typeWord'; timeout = setTimeout(tick, 220); } else { timeout = setTimeout(tick, PTYPE); } } else if (s.phase === 'typeWord') { const w = full(s.wordIndex); s.char++; setOrange(w.slice(0, s.char)); if (s.char >= w.length) { s.phase = 'delete'; timeout = setTimeout(tick, HOLD); } else { timeout = setTimeout(tick, WTYPE); } } else if (s.phase === 'delete') { const w = full(s.wordIndex); s.char--; setOrange(w.slice(0, s.char)); if (s.char <= 0) { s.wordIndex = (s.wordIndex + 1) % words.length; s.phase = 'typeWord'; timeout = setTimeout(tick, PAUSE); } else { timeout = setTimeout(tick, DELETE); } } }; timeout = setTimeout(tick, START); return () => clearTimeout(timeout); }, []); return ( {prefix.slice(0, prefixShown)} {orange} ); } /* ── Solid primary CTA — filled orange pill, stronger affordance ── */ function HeroCtaSolid({ label, onClick }) { const [hov, setHov] = useState(false); const magRef = useMagnetic(0.12); return ( ); } /* ── Hero CTAs — plain text links (no boxes), animated underline ── */ function HeroCta({ label, primary, play, noArrow, onClick }) { const [hov, setHov] = useState(false); const magRef = useMagnetic(0.1); return ( ); } function SocialAnchor({ label, icon, href, onActivate }) { const [hov, setHov] = useState(false); const external = !!href; return ( { if (!external) e.preventDefault(); onActivate && onActivate(); }} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ color: hov ? 'var(--orange)' : '#ffffff', transition: 'color 0.3s ease, filter 0.3s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1)', filter: hov ? 'drop-shadow(0 0 5px rgba(var(--orange-rgb), 0.95)) drop-shadow(0 0 14px rgba(var(--orange-rgb), 0.6)) drop-shadow(0 0 28px rgba(var(--orange-rgb), 0.3))' : 'none', transform: hov ? 'translateY(-4px) scale(1.22)' : 'translateY(0) scale(1)', transformOrigin: 'center', display: 'flex', cursor: 'none' }}> {icon} ); } function IconVimeo() { return ( ); } function IconInstagram() { return ( ); } function IconLinkedIn() { return ( ); } Object.assign(window, { Hero });