Chaotic Feature: Feature add effects

[Yash8077]

Description

This pull request introduces the Color Splash component, providing a visually engaging effect on user clicks. Below is a summary of the changes made:

Changes Made

Color Splash Component:

• Random Color and Effect Toggle: Created an interactive color splash effect where random bursts of color appear at the cursor on click, along with a randomized toggle between two effects: a color splash and a mirror shatter.
• Mirror Shatter Effect: Added a triangular "shatter" animation that radiates outward to resemble broken glass when triggered.
• Dynamic Placement and Animation: The effect particles originate from the cursor position and use CSS animations to fade out after appearing.

CSS Enhancements:

• Dedicated Styling: Created a CSS file (ColorSplash.css) to define animations, including a splashAnimation for circular particles and shatterAnimation for triangular shards.
• Animation Keyframes: Added keyframes for both animations to ensure smooth scaling, opacity transitions, and rotation of particles, enhancing visual appeal and immersion.

Testing

• Effect Randomization: Verified that each click alternates between the splash and shatter effects with randomized colors and directions.
• Animation Timing and Responsiveness: Confirmed animations work seamlessly on various screen sizes without affecting other components.
• Performance: Ensured that animation and DOM updates do not cause lag or performance issues across different devices.

Related Issues

Closes #209 Color Explosion Effects

Preview

VID-20241031-WA0023.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chaos-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 2:23pm

[github-actions]

Thank you for submitting your chaotic pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our chaotic CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[github-actions]

🎉 Thanks @Yash8077! Your pull request has added more chaos to ChaosWeb. We’ll review it shortly. Keep breaking the rules! 🚀