fix(skeleton): restore category glyph hover animations#500
Merged
Conversation
Move cg keyframes to globals.css so animate-cg-* utilities compile. Keep group-hover/cg in TSX for most glyphs; CSS transform rules only for SVG scale-x/y edge cases (text, list, graphs, widget). Co-authored-by: Cursor <cursoragent@cursor.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughCategory glyph animations are refactored to use global utilities. Keyframes and theme animation tokens move to ChangesCentralize Category Glyph Animations
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying animata with
|
| Latest commit: |
32e7ec5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e474c661.animata.pages.dev |
| Branch Preview URL: | https://fix-category-glyph-animation.animata.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@animata/skeleton/category-glyphs.css`:
- Around line 73-127: Update the contributor spec (category-glyphs-spec.md) to
reflect that the CSS block now owns hover transform rules for the category
glyphs rather than TSX: explicitly list the selectors (.group/cg:hover and the
affected classes .cg-text-line-1/.cg-text-line-2/.cg-text-line-3,
.cg-list-grow/.cg-list-shrink,
.cg-graph-bar/.cg-graph-bar-2/.cg-graph-bar-3/.cg-graph-bar-4, and
.cg-widget-hour/.cg-widget-minute) and state that hover transform/transition
timing behavior is implemented in CSS under the prefers-reduced-motion media
query; remove or update any line that claims hover transforms live only in TSX
and add a short note to contributors to check this CSS block when changing glyph
hover behavior.
In `@styles/globals.css`:
- Around line 113-116: The cg-* animation tokens (--animate-cg-ping,
--animate-cg-bounce, --animate-cg-shimmer, --animate-cg-twinkle) were added to
styles/globals.css but are specific to the category-glyph component; move these
CSS variables and their corresponding keyframes into the co-located stylesheet
animata/skeleton/category-glyphs.css (and the other cg-related blocks referenced
around lines 411-449) so component-specific keyframes live with CategoryGlyph
styles, and remove them from styles/globals.css, leaving only truly
shared/global animation tokens in globals.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2c11c31a-e0ba-4e90-82a2-9d2f1c967d4a
📒 Files selected for processing (3)
animata/skeleton/category-glyphs.cssanimata/skeleton/category-glyphs.tsxstyles/globals.css
Document the three hover patterns (Tailwind, keyframe loops, CSS scale exceptions), why cg keyframes live in globals.css, and add Storybook stories for glyphs with non-default hover behavior. Co-authored-by: Cursor <cursoragent@cursor.com>
hari
approved these changes
Jun 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Move cg keyframes to globals.css so animate-cg-* utilities compile. Keep group-hover/cg in TSX for most glyphs; CSS transform rules only for SVG scale-x/y edge cases (text, list, graphs, widget).
Summary by CodeRabbit
New Features
Refactor
Documentation