🍏 MacOS Big Sur UI clone for the web built with React, TypeScript, and Styled-Components.
A macOS desktop clone. I created this project out of fascination for the Mac/Apple desktop UI and wanted to try to replicate it as closely as possible, even with the dynamic dock behavior.
Vite
React.js
TypeScript
Zustand
Framer Motion
I began by gathering all the necessary images for the dock and wallpaper. Then, I established constants and implemented Zustand for state management. Next, I worked on the navigation bar and system preference color functionalities. After that, I tackled the dynamic dock, which was a bit challenging to animate. Each dock item scales slightly when selected, creating a realistic effect. I also created a settings modal, allowing users to switch between dark and light modes and change background colors.
Start by adding an introductory loading screen, like the one you see on a Mac with the progress bar and Apple's logo. To make this project even better, think about making features like the calculator and calendar docks actually work. In other words, try to make your project function just like the real macOS desktop.
To run the project in your local environment, follow these steps:
npm install
or yarn
to install the required dependencies.npm run dev
or yarn dev
.