Hero Section - Dashboard frontend revamp #450
Description
Is your feature request related to a problem? Please describe.
We currently render Hero section animations (e.g., the color-shifting “ball of light”) using custom CSS animations, while the rest of the app already relies on Framer Motion for animations. This CSS can lead to bigger build size chunks, which is not ideal, and we should (iteratively in other issues) remove most centralized CSS, in order to optimise Docker images' build size and time.
Describe the solution you'd like
Replace the existing CSS-based Hero animations with Framer Motion equivalents. Since Framer Motion is already a dependency, creating animations under it would improve consistency, simplify animation logic, and reduce custom CSS complexity. This will also align better with our existing animation patterns and tooling.
Describe alternatives you've considered
- Keeping the current CSS animations as-is
- Refactoring the CSS animations for better structure and reusability
However, both alternatives still leave us with two animation systems in parallel, which doesn’t scale well long term
Additional context
- Framer Motion is already used across the app, so this does not introduce a new dependency
- Moving animations to JS-driven motion components can improve debuggability and readability
- Reducing custom CSS may slightly help keep frontend Docker images smaller and easier to maintain