Pixel Curtain Transition

"use client";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import styles from "./styles.module.css";

const NUM_COLS = 20;

// delay[0] drives the open sweep, delay[1] drives the close sweep
const blockAnim = {
  initial: { opacity: 0 },
  open:   (d) => ({ opacity: 1, transition: { duration: 0, delay: 0.05 * d[0] } }),
  closed: (d) => ({ opacity: 0, transition: { duration: 0, delay: 0.05 * d[1] } }),
};

const menuAnim = {
  initial:  { opacity: 0 },
  open:   { opacity: 1, transition: { delay: 1.1,  duration: 0.3 } },
  closed: { opacity: 0, transition: { duration: 0.15 } },
};

export default function PixelCurtainTransition({ color = "#111111" }) {
  const [isOpen, setIsOpen]       = useState(false);
  const [numBlocks, setNumBlocks] = useState(0);

  useEffect(() => {
    const calc = () => {
      const blockSize = window.innerWidth * 0.05; // 5vw per column
      setNumBlocks(Math.ceil(window.innerHeight / blockSize));
    };
    calc();
    window.addEventListener("resize", calc);
    return () => window.removeEventListener("resize", calc);
  }, []);

  return (
    <div className={styles.demo}>
      {/* Page content */}
      <div className={styles.page}>
        <h2 className={styles.pageTitle}>Component Vault</h2>
        <p className={styles.pageSub}>No-5 Studio</p>
      </div>

      {/* Burger toggle */}
      <button
        className={`${styles.burger} ${isOpen ? styles.burgerOpen : ""}`}
        onClick={() => setIsOpen((v) => !v)}
        aria-label="Toggle menu"
      >
        <span /><span /><span />
      </button>

      {/* Pixel curtain — columns sweep left→right on open, right→left on close */}
      {numBlocks > 0 && (
        <div className={styles.pixelBg} aria-hidden="true">
          {Array.from({ length: NUM_COLS }, (_, colIdx) => (
            <div key={colIdx} className={styles.column}>
              {Array.from({ length: numBlocks }, (_, blockIdx) => (
                <motion.div
                  key={blockIdx}
                  className={styles.block}
                  variants={blockAnim}
                  // [openDelay, closeDelay]: open sweeps left→right, close sweeps right→left
                  custom={[colIdx, NUM_COLS - 1 - colIdx]}
                  initial="initial"
                  animate={isOpen ? "open" : "closed"}
                  style={{ backgroundColor: color }}
                />
              ))}
            </div>
          ))}
        </div>
      )}

      {/* Menu */}
      <motion.nav
        className={styles.menu}
        variants={menuAnim}
        initial="initial"
        animate={isOpen ? "open" : "closed"}
      >
        {["Work", "About", "Lab", "Contact"].map((item) => (
          <p key={item} className={styles.menuItem}>{item}</p>
        ))}
      </motion.nav>
    </div>
  );
}

.demo {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #f5f5f0;
  color: #111;
}

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pageTitle {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0;
}

.pageSub {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.4;
  margin: 0;
}

.burger {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #111;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s;
}

.burgerOpen span:nth-child(1) { transform: translateY(6.5px) rotate(45deg);  background: #f5f5f0; }
.burgerOpen span:nth-child(2) { opacity: 0;                                   background: #f5f5f0; }
.burgerOpen span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: #f5f5f0; }

.pixelBg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100%;
  aspect-ratio: 1;
}

.menu {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  pointer-events: none;
}

.menuItem {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #f5f5f0;
  margin: 0;
  cursor: pointer;
  pointer-events: all;
  transition: opacity 0.2s;
}

.menuItem:hover {
  opacity: 0.5;
}