A
Anonymous

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.

Prompt
Component Preview

About

Build a visually engaging, customizable interactive particle wallpaper using React and Tailwind CSS, featuring advanced behaviors, controls, and performance optimizations.

Share

Last updated 1 month ago