"use client"; import { motion } from "motion/react"; import { useId, useState } from "react"; function FolderInteraction() { const [isOpen, setIsOpen] = useState(false); const uid = useId().replace(/:/g, ""); const blurClipId = `bgblur_${uid}`; const fillGradId = `paint0_${uid}`; const strokeGradId = `paint1_${uid}`; const pageVariants = { spring: { type: "spring" as const, duration: 0.6 }, }; return (

setIsOpen(!isOpen)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setIsOpen(!isOpen); } }} className="wrapper relative h-52 w-80" >

{[ { initial: { rotate: 3, x: 38, y: 2 }, open: { rotate: 8, x: 70, y: -55 }, transition: { ...pageVariants.spring, bounce: 0.15, stiffness: 160, damping: 22, }, className: "z-10 shadow-md", }, { initial: { rotate: 0, x: 0, y: 0 }, open: { rotate: -1, x: -2, y: -75 }, transition: { ...pageVariants.spring, duration: 0.55, bounce: 0.12, stiffness: 190, damping: 24, }, className: "z-20 shadow-lg", }, { initial: { rotate: -3.5, x: -42, y: 1 }, open: { rotate: -9, x: -75, y: -60 }, transition: { ...pageVariants.spring, duration: 0.58, bounce: 0.17, stiffness: 170, damping: 21, }, className: "z-10 shadow-md", }, ].map((page, i) => ( ))}

); } export default FolderInteraction; const Page = () => (

{Array.from({ length: 8 }).map((_, i) => (

))}

);