[Enhancement]: Enhance UI/UX with Smooth Page Transitions

[gunjanghate]

Overview

Currently, the website does not have any transition effects between pages or section loads, which makes navigation feel static and abrupt. This feature will introduce smooth, modern transitions using Framer Motion, improving the overall UI/UX and making the platform feel more polished and professional.

---

Affected Area / Components

* **UI/UX:** components/layout, pages/index.js, pages/ai-agents.js, pages/prompts.js
* **Animation Framework:** Framer Motion integration across pages

---

User Story / Use Case

As a user, I want smooth and professional transitions between pages 
so that the navigation feels engaging, polished, and modern rather 
than abrupt and static.

---

Proposed Solution

* Integrate Framer Motion into the project.
* Add fade/slide page transitions when navigating between routes (Landing, AI Agents, Prompts, etc.).
* Introduce subtle blur + opacity animations for section/component load.
* Ensure transitions are lightweight, minimal, and performance-optimized.
* Implement modular animation helpers for easier future customization.

---

Wireframes / Mockups (if any)

No wireframes currently — animations will be demonstrated via a prototype PR with visual preview.

---

Acceptance Criteria

* [ ] Page transitions are implemented using Framer Motion.
* [ ] Landing, AI Agents, and Prompts pages have smooth fade/slide effects.
* [ ] Section components have subtle entry animations (blur/fade).
* [ ] Animations are non-intrusive, accessible, and performant.
* [ ] No breaking changes introduced to navigation or routing.

---

Impact

This feature enhances UI/UX for all users by improving the flow between pages. 
It increases visual appeal, professionalism, and overall engagement of the platform, 
benefiting both new and returning users.

---

Alternatives Considered

* Using CSS-only transitions – simpler but less flexible and less smooth.
* Using GSAP – powerful but heavier for this use case.
* Framer Motion is chosen for its React/Next.js integration, flexibility, and community adoption.

---

Additional Notes

* Will keep animations subtle to avoid distraction.
* Accessibility and performance will be tested.
* The implementation will not block other features and will be modular.

[Keshav833]

hii @gunjanghate , i would like to work on this.

[gunjanghate]

I opened the issue with the interest of contributing in it as well so I want to get assigned to this issue

[gunjanghate]

@kstij1 please assign this issue

[kstij1]

Thanks for sharing this detailed proposal! Just to clarify, the landing page at weam.ai is separate from the open-source project and we’re already planning a full revamp this month, so contributions won’t be needed on that part at the moment.

That said, you’re very welcome to check out https://app.weam.ai for potential issues and contribute there. We’ve also listed issues on GitHub that are open for contributions. Your help in these areas would be greatly appreciated, and we’re excited to see your contributions!