This project is a Next.js application that demonstrates a beautiful click effect using Heroicons and particle animation. When users click anywhere on the page, heart icons will appear and animate with a particle effect.
Experience the click effect live at: clickeffects.pages.dev
- Particle Animation: Heart icons animate with random velocity and fade out
- Customizable Effects: Adjustable parameters for particle size, speed, and colors
- Responsive Design: Works seamlessly across different screen sizes
- Heroicons Integration: Uses high-quality SVG icons from Heroicons library
- Next.js 15.1.0
- React 19
- TypeScript
- Heroicons
- Cloudflare Pages (for deployment)
- Node.js (version 18 or higher)
- npm (version 9 or higher)
- Clone the repository:
git clone https://github.com/your-username/clickeffects.git
- Navigate to the project directory:
cd clickeffects - Install dependencies:
npm install
npm run dev
Open http://localhost:3000 in your browser to view the application.
npm run build
This project is configured for deployment on Cloudflare Pages. To deploy:
npm run deploy
The click effect can be customized by modifying the DEFAULT_CONFIG in components/ClickEffect.tsx:
const DEFAULT_CONFIG = {
radius: 100, // Spread radius of particles
minSize: 10, // Minimum particle size
maxSize: 30, // Maximum particle size
colors: [ // Array of particle colors
'#FFCCE1',
'#E195AB',
'#FFF5D7',
'#F2F9FF',
'#FFCCE1',
'#FFCCE1'
],
speedFactor: 1 // Animation speed multiplier
};
/clickeffects
├── components/ # React components
│ └── ClickEffect.tsx # Main click effect component
├── app/ # Next.js app directory
│ ├── page.tsx # Main page
│ └── layout.tsx # Root layout
├── public/ # Static assets
├── styles/ # CSS modules
├── next.config.ts # Next.js configuration
├── package.json # Project dependencies
└── README.md # This file
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a new branch (
git checkout -b feature/YourFeatureName) - Commit your changes (
git commit -m 'Add some feature') - Push to the branch (
git push origin feature/YourFeatureName) - Open a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Heroicons for the beautiful icons
- Next.js for the framework
- Cloudflare Pages for deployment