Sweep

A modern, open-source gradient generator for designers and developers

Live Demo · Report Bug · Request Feature

---

✨ Features

• 🎨 Powerful Gradient Editor

  • Linear and radial gradient support
  • Multi-stop color control with intuitive UI
  • Real-time preview with high-resolution rendering

• 🎛️ Advanced Effects

  • Adjustable noise and blur effects
  • Canvas-based rendering for smooth visuals
  • Customizable gradient angles and positions

• 📤 Multiple Export Options

  • CSS code generation
  • Tailwind CSS utility classes
  • High-quality JPG export
  • One-click copy to clipboard

• 🎭 Modern UX

  • Responsive design for all screen sizes
  • Dark mode support with next-themes
  • Smooth animations powered by Motion
  • Accessible components built with Radix UI

---

🚀 Quick Start

Prerequisites

• Node.js 18+ and pnpm installed
• Basic knowledge of React and Next.js

Installation

# Clone the repository
git clone https://github.com/Johuniq/sweep.git
cd sweep

# Install dependencies
pnpm install

# Start development server
pnpm dev

Visit http://localhost:3000 to see the app running.

---

📦 Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
UI Library	React 19
Language	TypeScript
Styling	Tailwind CSS v4
Components	Radix UI
Animations	Motion
Theme	next-themes
Analytics	Vercel Analytics

---

📁 Project Structure

sweep/
├── app/                          # Next.js App Router
│   ├── layout.tsx                # Root layout with providers
│   ├── page.tsx                  # Homepage entry
│   ├── globals.css               # Global styles
│   └── *.ts                      # Metadata routes (sitemap, robots, etc.)
│
├── components/                   # React components
│   ├── ui/                       # Reusable UI components
│   │   ├── gradient-generator/   # Main gradient editor
│   │   │   ├── color-stops-editor.tsx
│   │   │   ├── effect-controls.tsx
│   │   │   ├── export-controls.tsx
│   │   │   └── use-gradient-generator.ts
│   │   └── *.tsx                 # Other UI components
│   ├── home-page.tsx             # Homepage client component
│   ├── Navbar.tsx                # Navigation header
│   └── Footer.tsx                # Footer component
│
├── lib/                          # Utility functions
│   ├── utils.ts                  # General utilities
│   ├── seo.ts                    # SEO helpers and config
│   └── motion-utils.ts           # Animation utilities
│
└── public/                       # Static assets

---

🛠️ Available Scripts

pnpm dev        # Start development server (localhost:3000)
pnpm build      # Build for production
pnpm start      # Start production server
pnpm lint       # Run ESLint

---

🤝 Contributing

We love contributions! Whether it's bug fixes, feature additions, or documentation improvements, all contributions are welcome.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run tests and linting (pnpm lint && pnpm build)
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Please read our Contributing Guidelines and Code of Conduct before contributing.

---

🐛 Bug Reports & Feature Requests

Found a bug or have a feature idea? Please check existing issues first, then feel free to open a new one.

For bugs, please include:

• Your OS and browser version
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Built with Next.js and React
• UI components from Radix UI
• Icons from Lucide and Dicons
• Animations powered by Motion

---

🔗 Links

• Website: sweep.jolyui.dev
• GitHub: github.com/Johuniq/sweep
• Report Issues: GitHub Issues

---

📧 Contact

For security issues or private inquiries, contact: support@johuniq.tech

---

Made with ❤️ by Johuniq