// cinematic-hero.jsx — Cinematic scroll hero (ported from 21st.dev, adapted for Jawwad Automation) // Requires: gsap + ScrollTrigger loaded as globals before this script // Requires: Tailwind CDN with preflight:false // Register ScrollTrigger with GSAP global (CDN sets window.gsap + window.ScrollTrigger) if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } const CinematicHero = ({ tagline1 = "Automate the work,", tagline2 = "own the results.", cardHeading = "Automation, delivered.", cardDescription = ( <> Jawwad{" "} builds ready-to-use automation systems that save businesses hours every week — AI, no-code tools, APIs, and custom code. ), metricValue = 12, metricLabel = "Hrs / Wk Saved", ctaHeading = "Start automating.", ctaDescription = "Let's build your first working automation in 3–7 days. Free 30-min audit — no commitment.", className = "", }) => { const containerRef = React.useRef(null); const mainCardRef = React.useRef(null); const mockupRef = React.useRef(null); const rafRef = React.useRef(0); // ── Mouse parallax + card sheen ───────────────────────────────────────── React.useEffect(() => { const onMove = (e) => { if (window.scrollY > window.innerHeight * 2) return; cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { if (!mainCardRef.current || !mockupRef.current) return; const rect = mainCardRef.current.getBoundingClientRect(); mainCardRef.current.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`); mainCardRef.current.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`); const xVal = (e.clientX / window.innerWidth - 0.5) * 2; const yVal = (e.clientY / window.innerHeight - 0.5) * 2; gsap.to(mockupRef.current, { rotationY: xVal * 12, rotationX: -yVal * 12, ease: 'power3.out', duration: 1.2 }); }); }; window.addEventListener('mousemove', onMove); return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(rafRef.current); }; }, []); // ── Cinematic scroll timeline ──────────────────────────────────────────── React.useEffect(() => { if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return; const mob = window.innerWidth < 768; const ctx = gsap.context(() => { // Initial states gsap.set('.ch-text-track', { autoAlpha: 0, y: 60, scale: 0.85, filter: 'blur(20px)', rotationX: -20 }); gsap.set('.ch-text-reveal', { autoAlpha: 1, clipPath: 'inset(0 100% 0 0)' }); gsap.set('.ch-main-card', { y: window.innerHeight + 200, autoAlpha: 1 }); gsap.set(['.ch-card-left', '.ch-card-right', '.ch-mockup-wrap', '.ch-badge', '.ch-widget'], { autoAlpha: 0 }); gsap.set('.ch-cta-wrap', { autoAlpha: 0, scale: 0.8, filter: 'blur(30px)' }); // Intro (runs immediately on load) gsap.timeline({ delay: 0.4 }) .to('.ch-text-track', { duration: 1.8, autoAlpha: 1, y: 0, scale: 1, filter: 'blur(0px)', rotationX: 0, ease: 'expo.out' }) .to('.ch-text-reveal', { duration: 1.4, clipPath: 'inset(0 0% 0 0)', ease: 'power4.inOut' }, '-=1.0'); // Scroll-pinned cinematic timeline gsap.timeline({ scrollTrigger: { trigger: containerRef.current, start: 'top top', end: '+=1400', pin: true, scrub: 1, anticipatePin: 1, }, }) // ① Text + grid blur out, card flies in from below .to(['.ch-hero-text', '.ch-bg-grid'], { scale: 1.15, filter: 'blur(20px)', opacity: 0.2, ease: 'power2.inOut', duration: 2 }, 0) .to('.ch-main-card', { y: 0, ease: 'power3.inOut', duration: 2 }, 0) // ② Card expands full-screen .to('.ch-main-card', { width: '100%', height: '100%', borderRadius: '0px', ease: 'power3.inOut', duration: 1.5 }) // ③ Mockup rises from depth .fromTo('.ch-mockup-wrap', { y: 300, z: -500, rotationX: 50, rotationY: -30, autoAlpha: 0, scale: 0.6 }, { y: 0, z: 0, rotationX: 0, rotationY: 0, autoAlpha: 1, scale: 1, ease: 'expo.out', duration: 2.5 }, '-=0.8') // ④ Widgets animate in .fromTo('.ch-widget', { y: 40, autoAlpha: 0, scale: 0.95 }, { y: 0, autoAlpha: 1, scale: 1, stagger: 0.15, ease: 'back.out(1.2)', duration: 1.5 }, '-=1.5') // ⑤ Progress ring fills, counter counts up .to('.ch-progress-ring', { strokeDashoffset: 80, duration: 2, ease: 'power3.inOut' }, '-=1.2') .to('.ch-counter', { innerHTML: metricValue, snap: { innerHTML: 1 }, duration: 2, ease: 'expo.out' }, '-=2.0') // ⑥ Floating badges pop in .fromTo('.ch-badge', { y: 100, autoAlpha: 0, scale: 0.7, rotationZ: -10 }, { y: 0, autoAlpha: 1, scale: 1, rotationZ: 0, ease: 'back.out(1.5)', duration: 1.5, stagger: 0.2 }, '-=2.0') // ⑦ Card copy slides in .fromTo('.ch-card-left', { x: -50, autoAlpha: 0 }, { x: 0, autoAlpha: 1, ease: 'power4.out', duration: 1.5 }, '-=1.5') .fromTo('.ch-card-right', { x: 50, autoAlpha: 0, scale: 0.8 }, { x: 0, autoAlpha: 1, scale: 1, ease: 'expo.out', duration: 1.5 }, '<') // ⑧ Hold, then swap to CTA .to({}, { duration: 1 }) .set('.ch-hero-text', { autoAlpha: 0 }) .set('.ch-cta-wrap', { autoAlpha: 1 }) .to({}, { duration: 0.5 }) // ⑨ Card content collapses .to(['.ch-mockup-wrap', '.ch-badge', '.ch-card-left', '.ch-card-right'], { scale: 0.9, y: -40, z: -200, autoAlpha: 0, ease: 'power3.in', duration: 1.2, stagger: 0.05 }) // ⑩ Card pulls back, CTA blooms .to('.ch-main-card', { width: mob ? '92vw' : '85vw', height: mob ? '92vh' : '85vh', borderRadius: mob ? '32px' : '40px', ease: 'expo.inOut', duration: 1.8 }, 'pullback') .to('.ch-cta-wrap', { scale: 1, filter: 'blur(0px)', ease: 'expo.inOut', duration: 1.8 }, 'pullback') // ⑪ Card exits upward .to('.ch-main-card', { y: -(window.innerHeight + 300), ease: 'power3.in', duration: 1.5 }); }, containerRef); return () => ctx.revert(); }, [metricValue]); return (