Open
Conversation
Contributor
|
@Priyank-Lal is attempting to deploy a commit to the itshover's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughThis PR introduces six new animated React icon components (AvatarIcon, DocumentScanIcon, GridLoaderIcon, HammerIcon, TagIcon, UploadIcon) using motion/react. Each component uses forwardRef to expose imperative animation controls, animates on hover and via ref methods, and is registered in the icon registry alongside shared type definitions. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Icon as Animated Icon<br/>(forwardRef)
participant Motion as motion/react<br/>(useAnimate)
User->>Icon: Hover over icon
Icon->>Icon: onHoverStart triggered
Icon->>Motion: startAnimation()
Motion->>Motion: Execute animation sequence<br/>(e.g., scale, rotate, translate)
User->>Icon: Hover away
Icon->>Icon: onHoverEnd triggered
Icon->>Motion: stopAnimation()
Motion->>Motion: Reset to initial state
alt Imperative Control
User->>Icon: ref.startAnimation()
Icon->>Motion: startAnimation()
Motion->>Motion: Execute animation
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
Contributor
Greptile SummaryThis PR adds 6 new animated icons following the project's established patterns. All icons implement Key changes:
Critical issue: Confidence Score: 2/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant IconGallery
participant GridLoaderIcon
participant MotionAnimate
User->>IconGallery: hover over grid-loader-icon
IconGallery->>GridLoaderIcon: onHoverStart()
GridLoaderIcon->>GridLoaderIcon: start()
GridLoaderIcon->>MotionAnimate: animate(".grid-dot", {...}, {repeat: Infinity})
Note over MotionAnimate: Animation continues infinitely
MotionAnimate-->>GridLoaderIcon: returns AnimationControls (not stored!)
User->>IconGallery: hover ends
IconGallery->>GridLoaderIcon: onHoverEnd()
GridLoaderIcon->>GridLoaderIcon: stop()
GridLoaderIcon->>MotionAnimate: animate(".grid-dot", {r: 3, opacity: 1})
Note over MotionAnimate: New animation starts but infinite animation still running
Note over GridLoaderIcon,MotionAnimate: BUG: Infinite animation never stopped!
rect rgb(220, 240, 220)
Note over GridLoaderIcon: FIXED VERSION with useRef
GridLoaderIcon->>GridLoaderIcon: animationControls.current.forEach(c => c.stop())
GridLoaderIcon->>MotionAnimate: stop infinite animation
Note over MotionAnimate: Infinite animation properly cancelled
end
|
Comment on lines
+12
to
+26
| const start = async () => { | ||
| animate( | ||
| ".grid-dot", | ||
| { | ||
| r: [3, 0, 3], | ||
| opacity: [1, 0, 1], | ||
| }, | ||
| { | ||
| duration: 1.5, | ||
| repeat: Infinity, | ||
| ease: "easeInOut", | ||
| delay: (i) => i * 0.2, | ||
| }, | ||
| ); | ||
| }; |
Contributor
There was a problem hiding this comment.
logic: infinite animation won't stop properly - needs useRef to track controls
Suggested change
| const start = async () => { | |
| animate( | |
| ".grid-dot", | |
| { | |
| r: [3, 0, 3], | |
| opacity: [1, 0, 1], | |
| }, | |
| { | |
| duration: 1.5, | |
| repeat: Infinity, | |
| ease: "easeInOut", | |
| delay: (i) => i * 0.2, | |
| }, | |
| ); | |
| }; | |
| const [scope, animate] = useAnimate(); | |
| const animationControls = useRef<Array<ReturnType<typeof animate>>>([]); | |
| const start = async () => { | |
| animationControls.current.forEach((control) => control.stop()); | |
| animationControls.current = []; | |
| animationControls.current.push( | |
| animate( | |
| ".grid-dot", | |
| { | |
| r: [3, 0, 3], | |
| opacity: [1, 0, 1], | |
| }, | |
| { | |
| duration: 1.5, | |
| repeat: Infinity, | |
| ease: "easeInOut", | |
| delay: (i) => i * 0.2, | |
| }, | |
| ), | |
| ); |
Prompt To Fix With AI
This is a comment left during a code review.
Path: icons/grid-loader-icon.tsx
Line: 12:26
Comment:
**logic:** infinite animation won't stop properly - needs `useRef` to track controls
```suggestion
const [scope, animate] = useAnimate();
const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
const start = async () => {
animationControls.current.forEach((control) => control.stop());
animationControls.current = [];
animationControls.current.push(
animate(
".grid-dot",
{
r: [3, 0, 3],
opacity: [1, 0, 1],
},
{
duration: 1.5,
repeat: Infinity,
ease: "easeInOut",
delay: (i) => i * 0.2,
},
),
);
```
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+28
to
+33
| const stop = () => { | ||
| animate( | ||
| ".grid-dot", | ||
| { r: 3, opacity: 1 }, | ||
| { duration: 0.3, ease: "easeOut" }, | ||
| ); |
Contributor
There was a problem hiding this comment.
logic: stop won't cancel infinite animation - need to stop tracked controls first
Suggested change
| const stop = () => { | |
| animate( | |
| ".grid-dot", | |
| { r: 3, opacity: 1 }, | |
| { duration: 0.3, ease: "easeOut" }, | |
| ); | |
| const stop = () => { | |
| animationControls.current.forEach((control) => control.stop()); | |
| animationControls.current = []; | |
| animate( | |
| ".grid-dot", | |
| { r: 3, opacity: 1 }, | |
| { duration: 0.3, ease: "easeOut" }, | |
| ); |
Prompt To Fix With AI
This is a comment left during a code review.
Path: icons/grid-loader-icon.tsx
Line: 28:33
Comment:
**logic:** stop won't cancel infinite animation - need to stop tracked controls first
```suggestion
const stop = () => {
animationControls.current.forEach((control) => control.stop());
animationControls.current = [];
animate(
".grid-dot",
{ r: 3, opacity: 1 },
{ duration: 0.3, ease: "easeOut" },
);
```
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+1
to
+2
| import { forwardRef, useImperativeHandle } from "react"; | ||
| import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; |
Contributor
There was a problem hiding this comment.
syntax: missing useRef import needed for animation control tracking
Suggested change
| import { forwardRef, useImperativeHandle } from "react"; | |
| import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; | |
| import { forwardRef, useImperativeHandle, useRef } from "react"; | |
| import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: icons/grid-loader-icon.tsx
Line: 1:2
Comment:
**syntax:** missing `useRef` import needed for animation control tracking
```suggestion
import { forwardRef, useImperativeHandle, useRef } from "react";
import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
```
How can I resolve this? If you propose a fix, please make it concise.
Member
|
please add videos. |
Author
okay so i have added videos in the PR description, you can review it |
Member
|
LGTM. Please resolve the merge conflicts. |
Author
Okay it seems to be fixed now, no merge conflicts |
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.
Description
This PR adds 6 new animated icons to the library, each with unique hover animations following the project's established patterns.
New Icons:
avatar-icon- User profile icon with head bounce animationupload-icon- Upload arrow with smooth repositioning effectgrid-loader-icon- 4-dot grid with sequential pulse animationdocument-scan-icon- Document with scanning line and corner bracketstag-icon- Price tag with smooth swing rotation around the holehammer-icon- Tool/build icon with hammer swing animationImplementation Details
All icons:
forwardRefandAnimatedIconHandlemotion/reactfor animations withuseAnimatehookstartAnimationandstopAnimationmethods viauseImperativeHandleicons/index.tsandlib/icons.tssize,color,strokeWidth,classNameType of Change
Checklist
npm run checkpasses (lint, format, typecheck)npm run registry:buildpassesnpm run buildpasses (production build verified)Testing
Tested locally by:
npm run devand verifying icons appear in/iconsgallerynpm run check) - all passednpm run build) - successfulPreview
Avatar Icon
Screen.Recording.2026-01-15.at.06.59.50.mov
Upload Icon
Screen.Recording.2026-01-15.at.07.01.45.mov
Grid-Loader Icon
Screen.Recording.2026-01-15.at.07.02.11.mov
Document-Scan Icon
Screen.Recording.2026-01-15.at.07.02.46.mov
Tag Icon
Screen.Recording.2026-01-15.at.07.03.40.mov
Hammer Icon
Screen.Recording.2026-01-15.at.07.04.14.mov
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.