A meticulously crafted macOS desktop clone built out of pure fascination for Apple's elegant UI design. This project replicates the macOS Big Sur experience as closely as possible, including the iconic dynamic dock behavior that Mac users know and love.
| Member | Position | Responsibilities |
|---|---|---|
| Sergio Sediq | Full Stack Developer | UI/UX Replication, State Management (Zustand), Dynamic Dock Animation (Framer Motion), Theme System, TypeScript Architecture |
- Vite - Lightning-fast build tool
- React.js - Component-based UI library
- TypeScript - Type-safe development
- Zustand - Lightweight state management
- Framer Motion - Smooth, realistic animations
- Light and Dark Mode - Seamlessly switch between themes for a personalized experience, just like real macOS
- Custom Background Colors - Tailor your desktop with various background color options
- System Color Preferences - Customize accent colors with options like blue, green, orange, and more
- Dynamic Dock Animation - Realistic magnification effect when hovering over dock items
- Settings Modal - Full-featured system preferences panel
- Responsive Design - Adapts to different screen sizes while maintaining the Mac aesthetic
I began this journey by carefully gathering all the necessary assets—dock icons, wallpapers, and UI elements that capture the essence of macOS.
First, I established the project constants and implemented Zustand for clean, efficient state management. This gave me a solid foundation to build upon.
Next came the navigation bar and system preference color functionalities. I wanted users to feel like they were truly customizing their Mac experience, so I made sure the color switching was smooth and instant.
Then came the most exciting (and challenging) part: the dynamic dock. Getting that iconic Mac dock behavior just right—where each icon scales and magnifies as your cursor approaches—required careful work with Framer Motion. Each dock item needed to scale smoothly based on cursor proximity, creating that satisfying, realistic effect that Mac users instantly recognize.
Finally, I built the settings modal, allowing users to switch between dark and light modes and change background colors, completing the authentic macOS experience.
Every pixel matters when recreating something as refined as macOS. I focused on:
- Pixel-perfect accuracy - Matching spacing, sizing, and proportions
- Smooth animations - Natural, physics-based motion
- Attention to detail - From shadow effects to blur overlays
- Performance - Maintaining 60fps even with complex animations
- Node.js 16+
- npm or yarn
- Clone the repository
git clone https://github.com/SergioSediq/macos-bigsur-clone.git
cd macos-bigsur-clone- Install dependencies
npm install
# or
yarn install- Run development server
npm run dev
# or
yarn dev- Open in browser
Navigate to http://localhost:5173 (or the port shown in your console)
macos-bigsur-clone/
├── src/
│ ├── components/ # React components
│ │ ├── Dock/ # Dynamic dock component
│ │ ├── MenuBar/ # Top menu bar
│ │ └── Settings/ # Settings modal
│ ├── store/ # Zustand state management
│ ├── assets/ # Images and icons
│ ├── constants/ # App constants
│ └── App.tsx # Main application
├── public/ # Static assets
└── package.json
The dock uses Framer Motion to create realistic scaling effects:
- Icons magnify smoothly as cursor approaches
- Adjacent icons scale proportionally
- Spring physics for natural motion
Complete light/dark mode implementation:
- Instant theme switching
- Persistent user preferences
- Smooth color transitions
System-wide accent color options:
- Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite
- Updates all UI elements consistently
- Authentic Boot Screen - Add the iconic Apple loading screen with progress bar
- Functional Apps - Make dock apps actually work:
- Working calculator with real calculations
- Functional calendar showing actual dates
- Notes app with text editing
- Safari with basic web browsing
- Window Management - Draggable, resizable application windows
- Spotlight Search - Cmd+Space search functionality
- Notification Center - Working notification system
- Mission Control - Multi-desktop workspace switching
- Launchpad - Grid view of all applications
- Persistence - Save user settings and open windows
- Sound Effects - macOS system sounds for interactions
- Implement actual app functionality
- Add keyboard shortcuts (Cmd+Q, Cmd+W, etc.)
- Create draggable windows with minimize/maximize/close
- Add right-click context menus
- Implement file system simulation
Add your wallpaper to src/assets/wallpapers/ and update:
// src/constants/wallpapers.ts
export const wallpapers = [
{ id: 1, url: '/wallpapers/your-wallpaper.jpg' },
// Add more wallpapers
];Update the dock configuration in src/constants/dock.ts:
export const dockApps = [
{
id: 'app-name',
name: 'App Name',
icon: '/icons/app-icon.png',
},
// Add more apps
];Implementing the magnetic dock effect required:
- Real-time cursor position tracking
- Distance-based scaling calculations
- Smooth spring animations
- Performance optimization for 60fps
Creating a seamless theme system involved:
- Global state management with Zustand
- CSS variable manipulation
- Persistent storage
- Instant UI updates
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
MIT License - feel free to use this project for learning or personal use!
- Inspired by macOS Big Sur's beautiful design language
- Built with love for Apple's attention to detail
- Special thanks to the React and Framer Motion communities
- Repository: github.com/SergioSediq/macos-bigsur-clone
- Apple Design Resources: developer.apple.com/design
Built with 🍎 by Sergio Sediq