Components
Folder
Interactive 3D folder animation with papers that can be opened and explored
Usage
import Folder from './Folder'
<div style={{ height: '600px', position: 'relative' }}>
<Folder size={2} color="#5227FF" className="custom-folder" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | '#5227FF' | Primary color of the folder |
size | number | 1 | Scale factor for the folder size |
items | React.ReactNode[] | [] | Content to display on papers (max 3) |
className | string | '' | Additional CSS classes |
Features
- Interactive Animation: Click to open/close the folder
- 3D Paper Effects: Papers fly out with realistic physics
- Magnetic Hover: Papers follow mouse movement when open
- Customizable Colors: Automatically generates darker shades
- Scalable Size: Adjust the overall size with the size prop