Skip to content

refactor: replace Hero CSS animations with Framer Motion .#460

Open
Hell1213 wants to merge 1 commit intoCCExtractor:mainfrom
Hell1213:fix/hero-framer-motion-450
Open

refactor: replace Hero CSS animations with Framer Motion .#460
Hell1213 wants to merge 1 commit intoCCExtractor:mainfrom
Hell1213:fix/hero-framer-motion-450

Conversation

@Hell1213
Copy link
Contributor

@Hell1213 Hell1213 commented Feb 5, 2026

Replaced CSS keyframe animations in the Hero section with Framer Motion. Removed 62 lines of custom CSS including keyframes and media queries from index.css. Implemented the same color-shifting glow effect using Framer Motion's animate prop with responsive sizing via Tailwind classes. Visual appearance remains identical.

Fixes: #450

Checklist

  • Ran npx prettier --write . (for formatting)
  • Ran gofmt -w . (for Go backend) - N/A (frontend only)
  • Ran npm test (for JS/TS testing)
  • Added unit tests, if applicable - Updated snapshot test
  • Verified all tests pass - 670 tests passing
  • Updated documentation, if needed - N/A

Additional Notes
This change consolidates animation logic by using the existing Framer Motion dependency instead of maintaining separate CSS animations. The glow effect behind the hero cards animates between pink and blue colors with the same timing and visual result as before.

Screencast.from.2026-02-06.00-29-13.mp4

Replaced custom CSS keyframe animations with Framer Motion in the Hero section to improve consistency and reduce build size. Removed 62 lines of CSS while maintaining identical visual appearance.

Fixes CCExtractor#450
@github-actions
Copy link

github-actions bot commented Feb 5, 2026

Thank you for opening this PR!

Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools.

Please take a moment to:

  • Check the "Files changed" tab
  • Leave comments on any lines for functions, comments, etc. that are important, non-obvious, or may need attention
  • Clarify decisions you made or areas you might be unsure about and/or any future updates being considered.
  • Finally, submit all the comments!

More information on how to conduct a self review:
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request

This helps make the review process smoother and gives us a clearer understanding of your thought process.

Once you've added your self-review, we'll continue from our side. Thank you!

Copy link
Contributor Author

@Hell1213 Hell1213 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced Hero section CSS animations with Framer Motion to reduce custom CSS and improve consistency with the rest of the app.

@Hell1213
Copy link
Contributor Author

Hell1213 commented Feb 5, 2026

hey @its-me-abhishek pls take a look , PR is ready to review , I have implemented fix going with framer .

Copy link
Collaborator

@its-me-abhishek its-me-abhishek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Hell1213 this looks great! I think you forgot about the Homepage though. Moreover can you make this a separate component? maybe in utils, for common access, and better testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Hero Section - Dashboard frontend revamp

2 participants