Enhancement: Add Interactive Cursor-Based Visual Effects to Improve User Engagement

[vaishnavikhatri3]

Description

The current landing page already features an attractive dark-themed interface and animated Rubik's Cube. However, cursor interactions are currently static, which makes the page feel less immersive than it could be.

Introducing cursor-based visual effects would significantly enhance the user experience by making the interface feel more dynamic, modern, and interactive.

Current Behavior

• Cursor movement does not trigger any visual feedback.
• Background elements remain static regardless of user interaction.
• The Rubik's Cube animation is independent of mouse movement.
• The page lacks interactive micro-animations that improve engagement.

Expected Behavior

The interface should respond smoothly to cursor movement through subtle visual effects without affecting performance.

Possible enhancements include:

Cursor Glow Effect

• Add a soft glow or spotlight that follows the cursor.
• Blend naturally with the existing dark theme.

Background Parallax Effect

• Move grid/background elements slightly based on cursor position.
• Create a sense of depth and immersion.

Cube Interaction

• Apply a subtle 3D tilt effect to the Rubik's Cube based on cursor movement.
• Add dynamic lighting or reflection effects that respond to mouse position.

Cursor Trail Animation

• Create a lightweight particle trail or fading cursor effect.
• Keep the effect smooth and non-distracting.

Hover Micro-Interactions

• Enhance buttons and interactive elements with modern hover animations.
• Add smooth transitions and scaling effects where appropriate.

Benefits

• Improves overall user engagement.
• Creates a more immersive experience.
• Makes the landing page feel modern and polished.
• Enhances visual appeal without modifying existing functionality.
• Provides a stronger first impression for new users.

Technical Suggestions

Possible implementation options:

• CSS Transforms & Transitions
• Framer Motion
• GSAP
• React Spring
• Three.js (for advanced 3D interaction effects)

Acceptance Criteria

• Cursor movement triggers smooth visual feedback.
• Background responds subtly to mouse movement.
• Rubik's Cube reacts with a lightweight 3D tilt effect.
• Animations remain smooth across different screen sizes.
• No noticeable performance degradation.
• Accessibility considerations are maintained (e.g., reduced-motion preferences).

Additional Notes

The effects should remain subtle and elegant rather than overwhelming. The goal is to improve interactivity while preserving the clean aesthetic of the existing design.

[vaishnavikhatri3]

Please assign this issue to me under gssoc'2026.

[VarankaTyagi]

/assign me this issue under GSSOC 2026
Thank You!