Interactive Particle Wallpaper in React
Here's the comprehensive prompt: Interactive Particle Wallpaper Project Objective: Create a visually stunning, interactive particle wallpaper using React, incorporating various particle behaviors, user controls, and performance optimizations. Requirements: Phase 1: Initial Implementation 1. Create a React component that generates a canvas based particle wallpaper. 2. Initialize 100 particles with random positions, sizes, speeds, and colors. 3. Implement basic particle movement and collision detection. 4. Add mouse interaction: particles respond to mouse movement. Phase 2: Additional Features 1. Implement various particle behaviors: Gravity Attraction Repulsion Orbiting Spiral 2. Add connection line styles: Gradient lines Dash patterns Thickness variation 3. Integrate user controls: Particle count slider Particle size slider Particle speed slider Gravity strength slider Attraction/Repulsion strength slider 4. Enhance visuals: Background gradients or images Particle trails or glow effects Interactive color changing Phase 3: Performance Optimizations 1. Utilize WebGL for improved rendering performance. 2. Optimize particle update and drawing logic. 3. Limit particle count for low end hardware. Phase 4: Interactive Features 1. Implement click and drag particle creation. 2. Add mouse wheel control for zooming. 3. Integrate keyboard shortcuts for settings. Phase 5: Advanced Features (Optional) 1. Integrate audio responsive particles. 2. Create 3D particle effects. 3. Use machine learning algorithms for particle behavior. Technical Requirements: 1. Use React hooks (e.g., useState, useEffect). 2. Utilize Canvas API for rendering. 3. Maintain clean, modular code structure. 4. Ensure cross browser compatibility. Deliverables: 1. Fully implemented React component code. 2. Example usage and demonstration. 3. Documentation for user controls and features. Evaluation Criteria: 1. Visual appeal and creativity. 2. Performance and optimization. 3. Code quality and maintainability. 4. User experience and interaction. Please create the Interactive Particle Wallpaper component, fulfilling all requirements and phases.
