The Animated Folder Box is a premium Framer component that turns your projects into an engaging, folder-inspired interaction. On hover, the folder opens in 3D space to reveal stacked project cards, creating a playful yet professional portfolio experience. Clicking a project launches a smooth animated lightbox with image transitions, navigation controls, and external links—perfect for showcasing work without overwhelming the layout.
Designed with flexibility in mind, every visual detail is customizable, from folder colors and card borders to fonts and hover states. The lightbox supports keyboard navigation, animated transitions, and responsive scaling for all screen sizes.
Features:
3D Folder Animation: Smooth hover interaction that opens the folder naturally
Stacked Project Cards: Animated project previews with hover states
Lightbox Viewer: Full-screen image preview with animated transitions
Keyboard Navigation: Use arrow keys and escape for seamless browsing
Project Linking: Open project links directly from the lightbox
Fully Customizable: Control colors, borders, fonts, spacing, and hover styles
Responsive Layout: Adapts beautifully to different screen sizes
Framer Property Controls: Edit content visually without touching code
Best For:
Designer and developer portfolios
Agency case study showcases
Creative landing pages
Framer prototypes needing interactive project previews
Modern websites that want playful but polished UI interactions
Launchly
