"use client";

import { useRef, useState } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import styles from "./styles.module.css";

/**
 * Willem Loading Animation (Osmo).
 *
 * The word is split into two halves that hug a zero-width center box. An image
 * grows out of the gap, flicks through a stack of photos, then bursts to fill
 * the frame while the real header (nav + wordmark) is revealed underneath.
 *
 * Faithful to the original GSAP timeline (easings / durations / staggers /
 * relative-position labels preserved). Two deliberate adaptations for the vault:
 *   - the burst is clipped to the component frame (absolute loader inside an
 *     overflow-hidden wrapper) instead of taking over the page + locking scroll;
 *   - it auto-plays on mount and replays via a button, since there is no real
 *     page-load event to gate on. The image still bursts to viewport units so it
 *     is guaranteed to cover (and be clipped by) the frame, staying centered.
 */
export default function WillemLoader({
  word = "Willem",
  images = [],
  logo = "Osmo ©",
  navLinks = [],
  cta = "Get in touch",
  wordmark = "Willem",
  wordmarkSuffix = "©",
}) {
  const containerRef = useRef(null);
  const [runKey, setRunKey] = useState(0);

  const mid = Math.ceil(word.length / 2);
  const startLetters = word.slice(0, mid).split("");
  const endLetters = word.slice(mid).split("");

  const [base, ...extras] = images;
  const markLetters = wordmark.split("");

  useGSAP(
    () => {
      const q = gsap.utils.selector(containerRef);

      const loaderLetters = q("[data-loader-letter]");
      const box = q("[data-box]");
      const grow = q("[data-grow]");
      const h1Start = q("[data-h1-start]");
      const h1End = q("[data-h1-end]");
      const coverExtra = q("[data-cover-extra]");
      const headerLetters = q("[data-header-letter]");
      const navAnchors = q("[data-nav-link]");

      const tl = gsap.timeline({ defaults: { ease: "expo.inOut" } });

      // 1. Loader letters type up from below (masked by overflow-hidden halves).
      tl.from(loaderLetters, { yPercent: 100, stagger: 0.025, duration: 1.25 });

      // 2. Center gap opens: box + image grow, halves nudge apart.
      tl.fromTo(box, { width: "0em" }, { width: "1em", duration: 1.25 }, "< 1.25");
      tl.fromTo(grow, { width: "0%" }, { width: "100%", duration: 1.25 }, "<");
      tl.fromTo(h1Start, { x: "0em" }, { x: "-0.05em", duration: 1.25 }, "<");
      tl.fromTo(h1End, { x: "0em" }, { x: "0.05em", duration: 1.25 }, "<");

      // 3. Flick through the stacked photos (top one fades first).
      tl.fromTo(
        coverExtra,
        { opacity: 1 },
        { opacity: 0, duration: 0.05, ease: "none", stagger: 0.5 },
        "-=0.05"
      );

      // 4. Burst the image to fill (and be clipped by) the frame.
      tl.to(grow, { width: "100vw", height: "100dvh", duration: 2 }, "< 1.25");
      tl.to(box, { width: "110vw", duration: 2 }, "<");

      // 5. Reveal the real header underneath.
      tl.from(
        headerLetters,
        { yPercent: 100, duration: 1.25, ease: "expo.out", stagger: 0.025 },
        "< 1.2"
      );
      tl.from(
        navAnchors,
        { yPercent: 100, duration: 1.25, ease: "expo.out", stagger: 0.1 },
        "<"
      );
    },
    { scope: containerRef, dependencies: [runKey], revertOnUpdate: true }
  );

  return (
    <section ref={containerRef} className={styles.header}>
      {/* Loader overlay */}
      <div className={styles.loader}>
        <div className={styles.h1}>
          <div className={styles.h1Start} data-h1-start>
            {startLetters.map((ch, i) => (
              <span key={i} className={styles.letter} data-loader-letter>
                {ch}
              </span>
            ))}
          </div>

          <div className={styles.box} data-box>
            <div className={styles.boxInner}>
              <div className={styles.growImage} data-grow>
                <div className={styles.growWrap}>
                  {extras.map((src, i) => (
                    <img
                      key={i}
                      className={`${styles.coverExtra} ${styles[`extra${i + 1}`]}`}
                      data-cover-extra
                      src={src}
                      loading="lazy"
                      alt=""
                    />
                  ))}
                  {base && (
                    <img
                      className={styles.coverImage}
                      src={base}
                      loading="lazy"
                      alt=""
                    />
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className={styles.h1End} data-h1-end>
            {endLetters.map((ch, i) => (
              <span key={i} className={styles.letter} data-loader-letter>
                {ch}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Real header content, revealed after the burst */}
      <div className={styles.content}>
        <div className={styles.top}>
          <nav className={styles.nav}>
            <div className={styles.navStart}>
              <a href="#" className={styles.navLink} data-nav-link>
                {logo}
              </a>
            </div>
            <div className={styles.navEnd}>
              <div className={styles.navLinks}>
                {navLinks.map((link, i) => (
                  <a
                    key={i}
                    href={link.href || "#"}
                    className={styles.navLink}
                    data-nav-link
                  >
                    {link.label}
                  </a>
                ))}
              </div>
              <div className={styles.navCta}>
                <a href="#" className={styles.navLink} data-nav-link>
                  {cta}
                </a>
              </div>
            </div>
          </nav>
        </div>

        <div className={styles.bottom}>
          <div className={styles.h1}>
            {markLetters.map((ch, i) => (
              <span key={i} className={styles.letterWhite} data-header-letter>
                {ch === " " ? " " : ch}
              </span>
            ))}
            {wordmarkSuffix && (
              <span
                className={`${styles.letterWhite} ${styles.space}`}
                data-header-letter
              >
                {wordmarkSuffix}
              </span>
            )}
          </div>
        </div>
      </div>

      <button
        type="button"
        className={styles.replay}
        onClick={() => setRunKey((k) => k + 1)}
      >
        Replay
      </button>
    </section>
  );
}
Willem Loading Animation

Preview

Source

Dependencies

Related Components
