Awesome Merge Picture

A tool to quickly create a preview image of a dark and light mode project.

Features

• Upload two images for comparison
• Interactive split-view with adjustable direction (vertical/horizontal)
• Customizable split position using sliders
• Export merged image
• Keyboard shortcut to toggle dashboard visibility
• Responsive design with a blurred gradient background

Technologies Used

• React
• Vite
• UnoCSS
• Framer Motion
• React Icons

Getting Started

Prerequisites

• Node.js (v20 or later recommended)
• pnpm

Installation

1. Clone the repository:

   git clone https://github.com/your-username/awesome-merge-picture.git
   cd awesome-merge-picture
   

2. Install dependencies:

   pnpm install
   

3. Start the development server:

   pnpm run dev

4. Open your browser 和 visit http://localhost:5173 to see the application.

Usage

1. Click the upload button to select two images.
2. Use the sliders to adjust the split position.
3. Toggle between vertical 和 horizontal split directions.
4. Press the spacebar to hide/show the dashboard.
5. Click the export button to download the merged image.

Building for Production

To create a production build, run:

pnpm run build

The built files will be in the dist directory.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source 和 available under the MIT License.