feat(orb): add backgroundColor prop

[wook95]

Summary

This PR introduces a new backgroundColor prop to the Orb component across all four variants (Default JS, Tailwind JS, Default TS, and Tailwind TS). The GLSL shader has been enhanced to dynamically calculate background luminance and adjust the orb's transparency and lighting effects accordingly, ensuring optimal visibility on any background color.

Changes

• Multi-Variant Support: Applied consistent logic to all component variants as per project guidelines.
• Dynamic Shader Optimization:
  • Calculates bgLuminance using the W3C luminance formula within the shader.
  • Introduced fadeAmount to dynamically adjust noise and lighting based on the background brightness.
  • Replaced static shadow logic with a adaptive mix of darkCol and lightCol.
• Color Parsing Utilities: Added hexToVec3 and hslToRgb helper functions to support various CSS color formats (Hex, RGB, HSL).
• Demo Update: Added a color picker to the OrbDemo page to allow users to test the orb's behavior on different backgrounds in real-time.

Testing Conducted

• Verified on Desktop and Mobile.
• Tested with various background colors:
  • Dark (#000000): Maintains original glowing effect.
  • Light (#FFFFFF): Automatically adjusts luminance for visibility.
• Vibrant Colors: Shader correctly adapts to the hue and brightness of the container.
• Checked browser console for WebGL/React errors; none found.

[DavidHDev]

lgtm