[FEATURE] Add reusable Mouse Parallax component for immersive UI interactions

[Ankitpardeshiii]

Problem or use case

The current landing page already provides a premium experience with animated particles, orbital visualization, and smooth transitions. However, interactive depth is limited.

A reusable Mouse Parallax component would introduce subtle mouse-driven movement, improving the overall experience while remaining lightweight and reusable across the application.

Features

• Smooth cursor tracking
• Framer Motion spring animations
• Configurable movement strength
• Automatic reset on mouse leave
• Fully reusable
• TypeScript support
• Lightweight implementation
• Responsive design
• No external dependencies beyond Framer Motion

---

Proposed solution

Proposed Solution

Create a reusable MouseParallax component that wraps any React element and translates it smoothly based on cursor position.

<MouseParallax strength={20}>
    <Globe />
</MouseParallax>

Alternatives considered

Benefits

• More immersive landing page
• Better visual hierarchy
• Reusable across the application
• Improves perceived responsiveness
• Fits Kepler's futuristic design language

Expected behavior

When implemented, the Mouse Parallax component should provide smooth, cursor-responsive movement to wrapped UI elements, creating a subtle depth effect that enhances the user experience.

Expected behavior

• Mouse movement should gently translate the wrapped element based on cursor position.
• Movement should be smooth using Framer Motion spring animations.
• The component should expose a configurable strength prop to control the parallax intensity.
• The element should smoothly return to its original position when the cursor leaves the container.
• The component should work with any React child component (e.g., Globe, OrbitSatellites, images, cards, or other UI elements).
• The implementation should be lightweight, reusable, and responsive.
• On touch devices or environments without a mouse, the component should gracefully disable the parallax effect without affecting layout or usability.
• The component should integrate seamlessly with Kepler's existing design system and animation patterns.

Platform

Website

Screenshots or mockups

No screenshots are available at the moment since this is a feature proposal.

The expected behavior is that wrapped UI elements (e.g., Globe, OrbitSatellites, or Hero illustrations) will subtly follow the user's cursor with smooth spring animations, creating a layered depth effect while maintaining the existing Kepler design language.

Difficulty

Intermediate

Priority

Medium

Additional information

Additional Context

The component is designed to integrate seamlessly with the existing Hero section and can also be reused throughout the application.

[littlegod20]

/claim

[Agnasmaria]

Hi @krishkhinchi! I'd like to work on this issue. Could you please assign it to me?

[krishkhinchi]

@littlegod20, you can start working on this.