feat(styling): added ray effects for the UI as decorative elements

[thecodacus]

Added ray effects for the UI as decorative elements

Overview

Added an ethereal purple ray background effect component that dynamically adapts to both light and dark themes. This enhancement creates a subtle, animated background that improves the visual appeal of our application while maintaining accessibility and performance.

Key Changes

1. New BackgroundRays Component

• Created a reusable React component for animated background rays
• Implemented theme-aware styling that responds to the data-theme attribute
• Used CSS Modules with SCSS for scoped, maintainable styling

2. Theme Integration

• Dynamic adaptation to light/dark themes using CSS blend modes
• Optimized opacity and color values for both themes
• Smooth transitions between theme states

Technical Details

PurpleRays Component

Key technical implementation details:

• Used CSS custom properties for flexible color management
• Implemented blend modes (screen/multiply) for theme compatibility
• Created complex animations using keyframes for a fluid effect
• Used CSS Modules with SCSS for style encapsulation
• Added theme detection using HTML data-theme attribute
• Implemented pointer-events: none to prevent interference with underlying content

System Changes

• Zero impact on application performance due to CSS-only animations
• No additional dependencies required
• GPU-accelerated animations for smooth performance

Testing

• Verified in both light and dark themes
• Tested across major browsers (Chrome, Firefox, Safari)
• Confirmed no impact on application performance
• Verified accessibility - background doesn't interfere with content readability

Future Improvements

• Add configuration props for customizing colors and animation speeds
• Implement responsive adjustments for different screen sizes
• Consider adding prefers-reduced-motion support
• Potential for theme-specific animation patterns

Preview

background.colos.effects.mp4

[Prathamesh-Shanbhag]

This looks so good - Thanks for the awesome work!

[karrot0]

Looks good, was wondering why the fork didn't have the bolt.new colors. Also that specific color looks really good.

[thecodacus]

I agree, but the opensource version they released is striped version of the bolt.new which has their branding.
we should bot be replicating their branding exactly as it is, but have some inspiration and make something unique to this

[PixifyAI]

If this is added this would go nice with it, made it the same color.

BaseChat.module.scss.txt
BaseChat.tsx.txt

[hgosansn]

Hello, i like how the purple ray look, arguably it's a little heavy solution for something purely aesthetic. I believe we could refactor and simplify it in a simple, gentle hue that uses the theme color. The transition on full page background opacity is a no go for me, still it's something that one can choose to opt in/out for themselves with stuff like https://userstyles.org/

[coleam00]

This is absolutely perfect, nice work @thecodacus!!