Adding 3d background

Is your feature request related to a problem?

The current interface uses a static background, which makes the UI feel flat and less engaging. A plain background reduces visual appeal and does not provide a modern, immersive experience for users.

💡 Describe the Solution

Implement a 3D background effect to enhance the UI and make it more dynamic and visually appealing.

Key points:

Subtle 3D animations such as floating shapes, abstract waves, or particle effects.

Smooth performance that does not interfere with usability or page load times.

Fully responsive on all devices and screen sizes.

Compatible with both light and dark themes.

Optional interactive effects like mouse-parallax for a more immersive experience.

🔁 Alternatives Considered

Using static gradient or image backgrounds: simpler but less modern and engaging.

Minimal CSS animations: lightweight but less immersive than 3D effects.

📚 Additional Context

Implementation can be done via WebGL, Three.js, or CSS-based 3D techniques.

Background should complement the app’s color palette and overall theme.

Include an option to toggle the 3D background on/off for user preference or accessibility.

Smooth transitions and subtle animation speed are recommended to avoid distraction.