Particle GSAP Header

Un header moderno e interattivo con effetti particellari e animazioni fluide, perfetto per siti web professionali.

🚀 Caratteristiche

• Next.js 15 con App Router
• TypeScript per la sicurezza dei tipi
• Tailwind CSS per lo styling
• Effetti particellari interattivi e responsivi
• GSAP per animazioni fluide del testo
• Design responsivo ottimizzato per mobile
• Sfondo video con fallback gradient
• Header modulare facilmente integrabile

📦 Included Libraries

• next - React framework
• typescript - Type safety
• tailwindcss - Utility-first CSS framework
• tsparticles - Particle effects library
• @tsparticles/react - React wrapper for tsParticles
• @tsparticles/engine - Core tsParticles engine
• @tsparticles/basic - Basic tsParticles preset
• gsap - Animation library

🛠️ Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser: Navigate to http://localhost:3000

📁 Project Structure

src/
├── app/
│   ├── globals.css          # Global styles and custom utilities
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Home page with all components
└── components/
    ├── ParticlesBackground.tsx  # Interactive particle background
    ├── AnimatedText.tsx         # GSAP text animations
    └── FloatingElements.tsx     # Floating animated elements

🎨 Components

ParticlesBackground

Interactive particle system with:

• Mouse hover repulsion effect
• Click to add particles
• Connected particle network
• Responsive particle density

AnimatedText

Smooth text animations featuring:

• Character-by-character animation
• 3D rotation effects
• Staggered timing
• Customizable delays

FloatingElements

Floating UI elements with:

• Continuous floating motion
• Rotation animations
• Hover scale effects
• Random positioning

🎯 Customization

Particle Effects

Modify particle settings in ParticlesBackground.tsx:

• Particle count, color, and size
• Animation speed and behavior
• Interaction modes and distances

Text Animations

Customize animations in AnimatedText.tsx:

• Animation duration and easing
• Stagger timing between characters
• 3D transformation effects

Styling

Update styles in globals.css and component classes:

• Color schemes and gradients
• Custom animations
• Responsive breakpoints

🚀 Deployment

The project is ready for deployment on platforms like:

• Vercel (recommended)
• Netlify
• Railway
• AWS Amplify

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🤝 Contributing

Feel free to contribute by:

1. Forking the repository
2. Creating a feature branch
3. Making your changes
4. Submitting a pull request

📄 License

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

---

Happy coding! 🎉