Folder Interaction

1"use client";
2import { motion } from "motion/react";
3import { useState } from "react";
4 
5function FolderInteraction() {
6  const [isOpen, setIsOpen] = useState(false);
7 
8  const pageVariants = {
9    spring: { type: "spring" as const, duration: 0.6 },
10  };
11 
12  return (
13    <div className="w-full  flex justify-center items-center">
14      <div
15        onClick={() => setIsOpen(!isOpen)}
16        className="w-80 h-52 relative wrapper"
17      >
18        <div
19          className="folder relative w-[87.5%] mx-auto items-center h-full flex justify-center "
20          style={{
21            background: "#18151B",
22            boxShadow:
23              "0px 0px 15.699999809265137px 16px rgba(79, 73, 85, 0.30) inset",
24            borderRadius: 10,
25          }}
26        >
27          {[
28            {
29              initial: { rotate: -3, x: -38, y: 2 },
30              open: { rotate: -8, x: -70, y: -55 },
31              transition: {
32                ...pageVariants.spring,
33                bounce: 0.15,
34                stiffness: 160,
35                damping: 22,
36              },
37              className: "z-10 shadow-md",
38            },
39            {
40              initial: { rotate: 0, x: 0, y: 0 },
41              open: { rotate: 1, x: 2, y: -75 },
42              transition: {
43                ...pageVariants.spring,
44                duration: 0.55,
45                bounce: 0.12,
46                stiffness: 190,
47                damping: 24,
48              },
49              className: "z-20 shadow-lg",
50            },
51            {
52              initial: { rotate: 3.5, x: 42, y: 1 },
53              open: { rotate: 9, x: 75, y: -60 },
54              transition: {
55                ...pageVariants.spring,
56                duration: 0.58,
57                bounce: 0.17,
58                stiffness: 170,
59                damping: 21,
60              },
61              className: "z-10 shadow-md",
62            },
63          ].map((page, i) => (
64            <motion.div
65              key={i}
66              initial={page.initial}
67              animate={isOpen ? page.open : page.initial}
68              transition={page.transition}
69              className={`absolute top-2 w-32 h-fit rounded-xl ${page.className}`}
70            >
71              <Page />
72            </motion.div>
73          ))}
74        </div>
75 
76        <motion.div
77          animate={{ rotateX: isOpen ? -40 : 0 }}
78          transition={{ type: "spring", duration: 0.5, bounce: 0.2 }}
79// … truncated