Feat:Implemented Bouncing Div with DVD Logo

[Yash8077]

Description:
This pull request introduces several updates and improvements to the project. Below is a summary of the changes made:

Changes Made:

1. BouncingDiv Component Enhancements:

   • Added SVG Logo: Integrated the classic DVD logo SVG to replace the placeholder graphic, allowing for a more recognizable visual element.
   • Trail Effect Adjustments: Modified the trail effect to make it thinner, ensuring it appears as a sleek line following the logo.
   • Pointer Events: Implemented pointerEvents: 'none' on the bouncing div and trails to ensure underlying elements remain clickable.

2. Bouncing Logic Improvements:

   • Rotation on Bounce: Added a rotation effect that changes the angle of the logo by 90 degrees each time it bounces off a wall.
   • Color Change on Bounce: The logo now changes to a random color every time it hits the edge of the window, enhancing the visual dynamism of the component.

3. Responsiveness and Interactivity:

   • Ensured the bouncing behavior continues while the user interacts with other elements on the page, improving the user experience.

4. Code Quality:

   • Added comments where necessary to explain key parts of the logic.

5. Documentation Updates:

   • Updated any relevant documentation to reflect the new features and functionality of the BouncingDiv component.

Testing:

• Verified that the component works as expected across different screen sizes.
• Ensured that the bouncing behavior is smooth and does not interfere with user interactions.

Related Issues:

• Closes Chaotic Feat:Bouncing Div Like DVD Logo Effect #109, "Chaotic Feat: Bouncing Div Like DVD Logo Effect".

Preview

Screen.Recording.2024-10-22.193419.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 22, 2024 2:05pm

[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! 😊