Inner Perspective Transition

"use client";

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

const PAGES = [
  { key: "home", label: "Home", bg: "#f5f5f5", color: "#1a1a1a" },
  { key: "about", label: "About", bg: "#0d0d0d", color: "#ffffff" },
  { key: "work", label: "Work", bg: "#1a1f2e", color: "#ffffff" },
];

const slideVariants = {
  initial: { top: "-100vh" },
  enter: { top: "-100vh" },
  exit: { top: 0, transition: { duration: 0.6, ease: [0.76, 0, 0.24, 1] } },
};

const perspectiveVariants = {
  initial: { scale: 1, y: 0, opacity: 1 },
  exit: { scale: 0.9, y: -150, opacity: 0.5, transition: { duration: 0.6, ease: [0.76, 0, 0.24, 1] } },
};

const opacityVariants = {
  initial: { opacity: 0 },
  enter: { opacity: 1, transition: { duration: 0.5, delay: 0.2 } },
};

export default function InnerPerspectiveTransition() {
  const [pageIndex, setPageIndex] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  const page = PAGES[pageIndex];

  function navigate(nextIndex) {
    if (isAnimating || nextIndex === pageIndex) return;
    setIsAnimating(true);
    setPageIndex(nextIndex);
    setTimeout(() => setIsAnimating(false), 800);
  }

  return (
    <div className={styles.demo}>
      <div className={styles.viewport}>
        {/* Slide panel that covers screen */}
        <AnimatePresence>
          <motion.div
            key={`slide-${pageIndex}`}
            className={styles.slide}
            variants={slideVariants}
            initial="initial"
            animate="enter"
            exit="exit"
          />
        </AnimatePresence>

        {/* Current page scales back on exit */}
        <AnimatePresence mode="wait">
          <motion.div
            key={`page-${pageIndex}`}
            className={styles.page}
            style={{ background: page.bg, color: page.color }}
            variants={perspectiveVariants}
            initial="initial"
            exit="exit"
          >
            <motion.div variants={opacityVariants} initial="initial" animate="enter">
              <h2 className={styles.pageTitle}>{page.label}</h2>
            </motion.div>
          </motion.div>
        </AnimatePresence>
      </div>

      <div className={styles.nav}>
        {PAGES.map((p, i) => (
          <button
            key={p.key}
            className={`${styles.navBtn} ${i === pageIndex ? styles.active : ""}`}
            onClick={() => navigate(i)}
          >
            {p.label}
          </button>
        ))}
      </div>
    </div>
  );
}