---

Interactive Particle Text Animation

An interactive HTML CSS JavaScript project that transforms text into animated particles which respond to mouse interactions. This showcases creative coding skills, animation handling, and DOM-canvas integration.

🚀 Features

• Customizable text and particle colors

• Smooth particle motion with mouse interaction

• Fully responsive and lightweight

• Pure HTML CSS JS with no external libraries

🖼 Preview

🔗 Live Demo: Interactive Particle Text Animation

📂 Project Structure

project/
│── index.html       # Main HTML file
│── style.css        # Styling for layout and text
│── script.js        # Animation logic

⚙️ How It Works

1. Canvas Rendering -- Text is drawn on a hidden canvas to capture pixel data.

2. Particle Generation -- Each pixel is converted into a particle object with its own position and velocity.

3. Interaction -- Mouse movement alters particle positions, creating a ripple-like effect.

4. Animation Loop -- The particles are continuously redrawn using requestAnimationFrame for smooth performance.

📦 Installation & Usage

1. Clone the repository:

   git clone https://github.com/YakshTechs/3DParticles.git
   
   

2. Open index.html in your browser.

3. Move your mouse around and watch the particles react.

🔧 Customization

• Change text in script.js:

  const displayText = "YAKSH DEVANI";
  
  

• Adjust colors in style.css or script.js.

• Modify particle size and speed for different effects.

💡 Skills Demonstrated

• Canvas API manipulation

• JavaScript animation techniques

• Event handling for interactivity

• Creative UI/UX micro-interactions

• Optimizing rendering performance

📜 License

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

---