Willem Loading Animation

"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function WillemLoading() {
  const containerRef = useRef<color: #79c0ff;">style="color: #ff7b72;">HTMLDivElement>(null);
  const textRef = useRef<color: #79c0ff;">style="color: #ff7b72;">HTMLHeadingElement>(null);

  useEffect(() => {
    const tl = gsap.timeline();
    tl.from(textRef.current, {
      y: 100,
      opacity: 0,
      duration: 1.2,
      ease: "power4.out",
    });
    tl.to(containerRef.current, {
      opacity: 0,
      duration: 0.8,
      delay: 0.5,
      ease: "power2.inOut",
    });
  }, []);

  return (
    <color: #79c0ff;">style="color: #ff7b72;">div color: #79c0ff;">ref={containerRef} color: #79c0ff;">className="fixed inset-0 z-50 flex items-center justify-center bg-black">
      <color: #79c0ff;">style="color: #ff7b72;">h1 color: #79c0ff;">ref={textRef} color: #79c0ff;">className="text-white text-6xl font-bold tracking-tight">
        Willem ©
      </color: #79c0ff;">style="color: #ff7b72;">h1>
    </color: #79c0ff;">style="color: #ff7b72;">div>
  );
}

/* Optional: Add custom styles for the loading animation */
.willem-loading {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}