Transform your images into stunning dot art wallpapers optimized for both desktop and mobile devices. This web application uses advanced image processing algorithms to convert your photos into beautiful monochromatic dot patterns, perfect for minimalist wallpapers.
- Smart Image Processing: Converts any image into artistic dot patterns using brightness-based sampling
- Multi-Device Support: Generates wallpapers optimized for both laptops (3840×2400) and phones (1080×2340)
- Drag & Drop Interface: Simple, intuitive file upload with drag-and-drop support
- Real-time Preview: Instant preview of your wallpapers before downloading
- Intelligent Scaling: Automatically scales and centers artwork for optimal wallpaper composition
- Monochrome Aesthetic: Creates elegant white-on-black dot art perfect for any device
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/dharminnagar/dot-wallpapers.git
cd dot-wallpapers- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser
- Upload: Drag and drop or select an image file (PNG/JPG, max 10MB)
- Processing: The app analyzes your image using brightness sampling to create dot patterns
- Preview: See real-time previews of your laptop and phone wallpapers
- Download: Click to download high-resolution wallpapers optimized for your devices
The application uses a sophisticated dot art generation process:
- Sampling: Divides the image into a grid and samples pixel brightness
- Dot Placement: Places dots with opacity based on average brightness of each grid section
- Transparency Handling: Preserves transparency information for better results with transparent images
- Canvas Rendering: Uses HTML5 Canvas for high-performance image processing
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS + Custom CSS
- UI Components: ShadCN
- Icons: Lucide React
- Theme: next-themes for dark/light mode
- Code Quality: ESLint, Prettier, Husky, lint-staged
src/
├── app/
│ ├── favicon.ico
│ ├── globals.css # Global styles and Tailwind imports
│ ├── layout.tsx # Root layout with theme provider
│ └── page.tsx # Main application page with image processing logic
├── components/
│ ├── ui/ # Reusable UI components (Button, Card, Input, Label)
│ ├── image-upload.tsx # Drag & drop file upload component
│ ├── file-upload-05.tsx # Alternative upload component
│ └── theme-provider.tsx # Theme context provider
└── lib/
└── utils.ts # Utility functions and class name helpers
- Drag and drop interface with visual feedback
- File type validation (PNG, JPG)
- File size limit (10MB)
- Real-time file information display
- Laptop Wallpapers: 3840×2400 resolution
- Phone Wallpapers: 1080×2340 resolution
- Black background with centered artwork
- Intelligent padding and scaling
- Responsive design for all screen sizes
- Loading states with animations
- Hover effects for desktop interactions
- Mobile-optimized download buttons
- Clean, minimalist interface
- PNG (recommended for transparency)
- JPEG/JPG
- Maximum file size: 10MB
- Laptop Wallpaper: 3840×2400px (suitable for 4K displays)
- Phone Wallpaper: 1080×2340px (modern smartphone ratio)
- Format: PNG with transparency support
- Background: Pure black (#000000)
- Dots: White with varying opacity
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is open source and available under the MIT License.
Made with ❤️ using Next.js and TypeScript