A
Anonymous

Interactive Particle Wallpaper - Copy this React, Tailwind Component to your project

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

InteractiveParticleWallpaper - Create stunning interactive wallpapers with 100 particles, user controls, and effects, built with React. Download instantly!

Share

Last updated 1 month ago