Circle Menu
Dialog Form
Dominoes List Scroll
Dominoes Scroll Indicator
Eagle Vision
Electric AI Input
File Input
Flip Scroll
Glowing Scroll Indicator
Horizontal Scroll
Icon Wheel
Image Pile
Interactive CTA
Interactive Folder
Interest Picker
Jelly Loader
Leave Rating
Mask Cursor Effect
Magnet Tabs
Masonry Grid
OTP Input
Photo Gallery
Pixelated Carousel
Rolling Ball Scroll Indicator
Rubik Cube
Sidebar
Sine Wave
Skeumorphic Music Card
Social Media Card
Stacked Input Form
Stack Scroll
Trading Card
Interactive Folder
An animated folder component that expands to reveal file contents with smooth spring animations and interactive hover effects.
Install dependencies
npm i framer-motion lucide-react Component
Create a file interactive-folder.tsx in your components folder and paste this code
'use client';
import { AnimatePresence, motion } from 'framer-motion';
import { X } from 'lucide-react';
import Image from 'next/image';
import React, { useState } from 'react';
const DUMMY_FILES = [
{
id: 1,
name: 'assignment.doc',
image: '/fileicons/DOC.svg'
},
{
id: 2,
name: 'me.jpg',
image: '/fileicons/JPG.svg'
},
{
id: 3,
name: 'johnmayer.mp3',
image: '/fileicons/MP3.svg'
},
{
id: 4,
name: 'bali.mp4',
image: '/fileicons/MP4.svg'
},
{
id: 5,
name: 'ebook.pdf',
image: '/fileicons/PDF.svg'
},
{
id: 6,
name: 'notes.txt',
image: '/fileicons/TXT.svg'
},
{
id: 7,
name: 'statement.xlsx',
image: '/fileicons/XLSX.svg'
},
{
id: 8,
name: 'export.zip',
image: '/fileicons/ZIP.svg'
}
];
const FolderIcon = () => (
<Image src="/folder.svg" alt="Folder Icon" width={64} height={64} className="w-full h-full" />
);
type FileIconProps = {
size: number;
image: string;
};
const FileIcon = ({ size, image }: FileIconProps) => (
<Image src={image} alt="File Icon" width={size} height={size} />
);
const InteractiveFolder = ({ folderName = 'New Folder' }: { folderName?: string }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="flex items-center justify-center flex-col">
<motion.div
initial={{
filter: 'blur(10px)',
width: '50px',
height: '50px'
}}
animate={{
height: isOpen ? '210px' : '50px',
width: isOpen ? '350px' : '64px',
backgroundColor: isOpen ? '#f1f1f1' : '#1BA3F8',
borderRadius: isOpen ? '10px' : '10px',
cursor: isOpen ? 'default' : 'pointer',
filter: 'blur(0px)',
boxShadow: isOpen ? '0px 5px 10px 0 rgba(0, 0, 0, 0.1)' : 'none'
}}
whileHover={{
boxShadow: !isOpen
? '0px 3px 10px 0 rgba(0, 0, 0, 0.25)'
: '0px 5px 10px 0 rgba(0, 0, 0, 0.1)',
rotateZ: !isOpen ? '-4deg' : '0deg',
translateY: !isOpen ? '-3px' : '0px'
}}
whileTap={{
boxShadow: !isOpen
? '0px 0px 0px 0 rgba(0, 0, 0, 0.25)'
: '0px 5px 10px 0 rgba(0, 0, 0, 0.1)',
translateY: !isOpen ? '0px' : '0px',
rotateZ: !isOpen ? '-2deg' : '0deg',
scale: !isOpen ? 0.95 : 1
}}
transition={{
type: 'spring',
stiffness: 300,
damping: 25
}}
onClick={() => !isOpen && setIsOpen(!isOpen)}
className="overflow-hidden"
>
<AnimatePresence mode="popLayout">
{!isOpen && (
<motion.div
initial={{
filter: 'blur(10px)',
opacity: 0
}}
animate={{
filter: 'blur(0px)',
opacity: 1
}}
exit={{
filter: 'blur(10px)',
opacity: 0
}}
whileHover={{
translateY: '3px',
rotateZ: '4deg'
}}
transition={{
type: 'spring',
stiffness: 300,
damping: 30
}}
>
<FolderIcon />
</motion.div>
)}
{isOpen && (
<motion.div
initial={{
filter: 'blur(10px)',
opacity: 0
}}
animate={{
filter: 'blur(0px)',
opacity: 1
}}
exit={{
filter: 'blur(10px)',
opacity: 0
}}
transition={{
type: 'spring',
stiffness: 300,
damping: 30
}}
className="h-full w-full flex flex-col overflow-hidden relative"
>
{/* folder container header */}
<div className="h-7 w-full bg-white flex items-center justify-between">
<div className="bg-[#f1f1f1] h-full flex items-center justify-center">
<motion.p
layout="position"
layoutId="folder-name"
className="text-black font-medium px-2 text-sm whitespace-nowrap truncate"
>
{folderName}
</motion.p>
</div>
<div className="flex-1 flex items-center justify-end px-1 h-full rounded-bl-lg">
<button
onClick={() => setIsOpen(false)}
className="hover:bg-black/10 rounded-full cursor-pointer p-0.5"
>
<X className="text-black" size={14} />
</button>
</div>
</div>
<div className="rounded-b-lg h-full w-full flex items-start justify-start">
<div
style={{
gridTemplateColumns: 'repeat(4, 50px)'
}}
className="grid items-start justify-start gap-x-2 gap-y-4 overflow-y-scroll w-full p-2 py-4"
>
{DUMMY_FILES.map((file, index) => (
<motion.div
key={'folder-item' + folderName + index}
initial={{
opacity: 0
}}
animate={{
opacity: 1
}}
exit={{
opacity: 0
}}
transition={{
type: 'spring',
stiffness: 300,
damping: 30
}}
className="w-[50px] h-[54px] gap-2 flex flex-col items-center justify-start overflow-hidden"
>
<FileIcon size={30} image={file.image} />
<p className="text-xs text-black truncate text-left w-full">{file.name}</p>
</motion.div>
))}
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</motion.div>
{!isOpen && (
<motion.div
initial={{
opacity: 0
}}
animate={{
opacity: 1
}}
exit={{
opacity: 0
}}
transition={{
type: 'spring',
stiffness: 300,
damping: 30
}}
layoutId="folder-name"
className="text-white font-medium text-sm whitespace-nowrap truncate"
>
{folderName}
</motion.div>
)}
</div>
);
};
export default InteractiveFolder;
Usage
<InteractiveFolder />