"use client"; import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import Image from "next/image"; import dynamic from "next/dynamic"; import gsap from "gsap"; import heroImage from "../../public/images/hero.webp"; import HeroSwitch from "@/components/HeroSwitch"; import Logo from "@/components/Logo"; import RelightCanvas from "@/components/RelightCanvas"; import type { RelightOptions } from "@/lib/relight/effect"; import type { HeroSubject, LightingMood } from "@/lib/relight/presets"; import { onPreloaderDone } from "@/lib/preloader"; const CRT_STILL = "/images/statue-new-map.webp"; const BAKED_STILL = "/images/statue-graded.webp"; const PANEL = "bg-noir text-bone flex min-h-[44svh] flex-col justify-center px-6 py-16 md:px-12 md:py-20 lg:min-h-dvh lg:px-16 xl:px-24"; const CodeReveal = dynamic(() => import("@/components/home2/CodeReveal")); const SkeletonFluid = dynamic( () => import("@/components/home4/SkeletonFluid"), { ssr: false }, ); const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; type Props = { variant?: "photo" | "relight" | "crt"; relight?: RelightOptions; subjects?: readonly HeroSubject[]; moods?: readonly LightingMood[]; shapes?: readonly LightingMood[]; revealCode?: string; gradeControls?: boolean; }; export default function SplitHero({ variant = "photo", relight, subjects, moods, shapes, revealCode, gradeControls = false, }: Props) { const rootRef = useRef(null); const [subjectIndex, setSubjectIndex] = useState(0); const [moodIndex, setMoodIndex] = useState(0); const [shapeIndex, setShapeIndex] = useState(0); const [live, setLive] = useState(false); useEffect(() => { if (variant !== "crt") return; return onPreloaderDone(() => setLive(true)); }, [variant]); const shape = shapes?.[shapeIndex]?.lighting; const grade = moods?.[moodIndex]?.lighting; const mood = useMemo( () => (grade || shape ? { ...grade, ...shape } : undefined), [grade, shape], ); const base = subjects?.[subjectIndex]?.options ?? relight; const options = useMemo( () => (base && mood ? { ...base, ...mood } : base), [base, mood], ); const switchGroups = [ moods && moods.length > 1 ? { name: "Lighting", choices: moods, active: moodIndex, onChange: setMoodIndex, } : null, shapes && shapes.length > 1 ? { name: "Shape", choices: shapes, active: shapeIndex, onChange: setShapeIndex, } : null, subjects && subjects.length > 1 ? { name: "Hero", choices: subjects, active: subjectIndex, onChange: setSubjectIndex, } : null, ].filter((group) => group !== null); useIsomorphicLayoutEffect(() => { const root = rootRef.current; if (!root) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { return; } let unsubscribe = () => {}; const ctx = gsap.context(() => { const tl = gsap.timeline({ paused: true, defaults: { ease: "power3.out" }, }); if (variant === "photo") { tl.fromTo( "[data-frame]", { scale: 1.14 }, { scale: 1, duration: 3.2, ease: "expo.out" }, 0, ); } tl.fromTo( "[data-veil]", { opacity: 1 }, { opacity: 0, duration: 3.6, ease: "power2.out" }, 0, ) .fromTo( "[data-logo]", { y: 16, opacity: 0 }, { y: 0, opacity: 1, duration: 1.8 }, 0.5, ) .fromTo( "[data-line]", { yPercent: 125 }, { yPercent: 0, duration: 2.1, ease: "power4.out" }, 0.8, ) .fromTo( "[data-body]", { y: 18, opacity: 0 }, { y: 0, opacity: 0.8, duration: 2.0 }, 1.25, ); if (variant === "photo") { tl.to("[data-frame]", { scale: 1.05, duration: 38, ease: "sine.inOut", repeat: -1, yoyo: true, }); } unsubscribe = onPreloaderDone(() => tl.play()); }, root); return () => { unsubscribe(); ctx.revert(); }; }, [variant]); const panel = ( <>

Crispin Mårtens

Works with the backers and shapers of what comes next.

); return (

{variant === "crt" ? ( <>

{live && ( )} ) : variant === "photo" ? (

) : ( options && ( ) )} {revealCode ? ( {panel} ) : (

{panel}

)} {variant === "relight" && switchGroups.length > 0 && ( )}

); }