https://github.com/andrejkoller/particle-component
✨ An animated particle grid effect with hover interactions.
https://github.com/andrejkoller/particle-component
component html5 javascript particles react tailwindcss
Last synced: 5 months ago
JSON representation
✨ An animated particle grid effect with hover interactions.
- Host: GitHub
- URL: https://github.com/andrejkoller/particle-component
- Owner: andrejkoller
- License: mit
- Created: 2025-10-30T09:15:39.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-12-04T13:52:38.000Z (7 months ago)
- Last Synced: 2025-12-07T21:57:04.032Z (6 months ago)
- Topics: component, html5, javascript, particles, react, tailwindcss
- Language: JavaScript
- Homepage: https://particle-component.vercel.app
- Size: 68.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Short description
An interactive Next.js landing page featuring an animated particle grid effect with hover interactions. Perfect for modern web design and creative portfolios.
## ✨ Features
- Interactive Particle Grid: 250 animated particles that respond to mouse hover with smooth scale transitions
- Modern UI Design: Clean and minimalist interface with custom typography
- Responsive Layout: Built with Tailwind CSS for optimal viewing on all devices
- Smooth Animations: CSS transitions with customizable delays and easing
- Colorful Highlights: Multi-colored keyword highlighting in the copy text
- Call-to-Action Buttons: Two distinct CTA buttons with hover effects
## 🛠️ Technologies Used
- **Framework**: [Next.js 16.0.1](https://nextjs.org) (React 19.2.0)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com)
- **Language**: JavaScript (ES6+)
- **Development**: ESLint for code quality
## 📋 Prerequisites
- Node.js 18+ installed on your machine
- npm, yarn, pnpm, or bun package manager
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/andrejkoller/particle-component.git
cd particle-component
```
2. Install dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
```
3. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## 📸 Screenshots
