feat: cursor trail added #419
Conversation
|
Someone is attempting to deploy a commit to the Sanchit Bajaj's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/app/layout.tsxOops! Something went wrong! :( ESLint: 8.47.0 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /node_modules/eslint-config-next/index.js#overrides[0]': Cannot find module 'typescript'
WalkthroughThe changes introduce a new cursor trail effect to the application by replacing the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Great job, @SrisharanVS! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project. Keep being the part of the community!
'We will promptly review your changes and offer feedback. Keep up the excellent work!
Kindly remember to check our Contributing Guidelines'
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (4)
src/redux/reducers/cursorReducer.ts (1)
15-19: Consider configurable initial trail lengthThe initial state looks good, but consider making the trail length configurable through environment variables or constants.
+const DEFAULT_TRAIL_LENGTH = 20; + const initialState: CursorState = { position: {x:0, y:0}, trailPositions: [], - trailLength:20, + trailLength: DEFAULT_TRAIL_LENGTH, }src/components/core/cursor/cursorTrailHandler.tsx (2)
8-24: Consider adding passive event listenerFor better scroll performance, especially on mobile devices, consider using passive event listeners.
- window.addEventListener("mousemove", handleMouseMove); + window.addEventListener("mousemove", handleMouseMove, { passive: true });
1-26: Add error boundary protectionConsider wrapping the component with an error boundary to gracefully handle any potential errors in the mouse tracking logic.
Would you like me to provide an example implementation of an error boundary component?
src/app/layout.tsx (1)
70-70: Consider improving component readability and accessibilityWhile the functionality is correct, the current formatting makes it difficult to read and maintain.
Consider restructuring for better readability:
- <ReduxProvider><CursorTrail /><CursorTrailHandler />{children}</ReduxProvider> + <ReduxProvider> + <CursorTrailHandler /> + <CursorTrail /> + {children} + </ReduxProvider>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
package.jsonis excluded by!**/*.jsonyarn.lockis excluded by!**/yarn.lock,!**/*.lock,!**/*.lock
📒 Files selected for processing (5)
src/app/layout.tsx(3 hunks)src/components/core/cursor/cursorTrail.tsx(1 hunks)src/components/core/cursor/cursorTrailHandler.tsx(1 hunks)src/redux/reducers/cursorReducer.ts(1 hunks)src/redux/store.ts(1 hunks)
🔇 Additional comments (5)
src/redux/reducers/cursorReducer.ts (1)
4-13: LGTM: Well-defined interfaces
The interfaces are well-structured and properly typed for the cursor state management.
src/redux/store.ts (2)
6-6: LGTM: Clean Redux store integration
The cursor reducer is properly integrated into the store configuration.
Also applies to: 13-13
17-18: LGTM: Proper type exports
The type exports follow Redux Toolkit best practices for TypeScript integration.
src/app/layout.tsx (1)
7-8: LGTM: Clean import additions
The new cursor trail component imports are properly organized.
src/components/core/cursor/cursorTrail.tsx (1)
1-80: Verify browser compatibility and add error handling
The implementation needs verification across different browsers and proper error handling.
Let's check for potential browser compatibility issues:
| setTrailLength(state, action:PayloadAction<number>) | ||
| { | ||
| state.trailLength = action.payload; | ||
| }, |
There was a problem hiding this comment.
Add validation for trail length
The setTrailLength reducer should validate the input to prevent negative or zero values.
setTrailLength(state, action:PayloadAction<number>) {
+ if (action.payload <= 0) {
+ throw new Error('Trail length must be greater than 0');
+ }
state.trailLength = action.payload;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| setTrailLength(state, action:PayloadAction<number>) | |
| { | |
| state.trailLength = action.payload; | |
| }, | |
| setTrailLength(state, action:PayloadAction<number>) | |
| { | |
| if (action.payload <= 0) { | |
| throw new Error('Trail length must be greater than 0'); | |
| } | |
| state.trailLength = action.payload; | |
| }, |
| @@ -0,0 +1,41 @@ | |||
| import { createSlice, PayloadAction } from "@reduxjs/toolkit"; | |||
| import PageLoader from "next/dist/client/page-loader"; | |||
There was a problem hiding this comment.
Remove unused import
The PageLoader import is not used in this file.
-import PageLoader from "next/dist/client/page-loader";| updateCursorPosition(state, action: PayloadAction<Position>) { | ||
| state.position = action.payload; | ||
| state.trailPositions.push(action.payload); | ||
| if(state.trailPositions.length > state.trailLength) | ||
| { | ||
| state.trailPositions.shift(); | ||
| } | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add performance optimization for trail updates
The current implementation might cause unnecessary re-renders by mutating the array on every mouse move.
Consider these optimizations:
- Throttle updates using a debounce/throttle mechanism
- Use array size check before push
updateCursorPosition(state, action: PayloadAction<Position>) {
state.position = action.payload;
- state.trailPositions.push(action.payload);
- if(state.trailPositions.length > state.trailLength)
- {
+ if (state.trailPositions.length >= state.trailLength) {
state.trailPositions.shift();
}
+ state.trailPositions.push(action.payload);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| updateCursorPosition(state, action: PayloadAction<Position>) { | |
| state.position = action.payload; | |
| state.trailPositions.push(action.payload); | |
| if(state.trailPositions.length > state.trailLength) | |
| { | |
| state.trailPositions.shift(); | |
| } | |
| }, | |
| updateCursorPosition(state, action: PayloadAction<Position>) { | |
| state.position = action.payload; | |
| if (state.trailPositions.length >= state.trailLength) { | |
| state.trailPositions.shift(); | |
| } | |
| state.trailPositions.push(action.payload); | |
| }, |
| useEffect(() => { | ||
| const handleMouseMove = (event: MouseEvent) => { | ||
| dispatch(updateCursorPosition({ x: event.clientX, y: event.clientY })); | ||
| }; | ||
|
|
||
| window.addEventListener("mousemove", handleMouseMove); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("mousemove", handleMouseMove); | ||
| }; | ||
| }, [dispatch]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize mouse move event handling
The current implementation dispatches an action on every mouse move, which could impact performance.
Consider throttling the mouse move handler:
+import { throttle } from 'lodash';
+
const CursorTrailHandler = () => {
const dispatch = useDispatch<AppDispatch>();
useEffect(() => {
- const handleMouseMove = (event: MouseEvent) => {
+ const handleMouseMove = throttle((event: MouseEvent) => {
dispatch(updateCursorPosition({ x: event.clientX, y: event.clientY }));
- };
+ }, 16); // ~60fps
window.addEventListener("mousemove", handleMouseMove);
return () => {
+ handleMouseMove.cancel();
window.removeEventListener("mousemove", handleMouseMove);
};
}, [dispatch]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| const handleMouseMove = (event: MouseEvent) => { | |
| dispatch(updateCursorPosition({ x: event.clientX, y: event.clientY })); | |
| }; | |
| window.addEventListener("mousemove", handleMouseMove); | |
| return () => { | |
| window.removeEventListener("mousemove", handleMouseMove); | |
| }; | |
| }, [dispatch]); | |
| import { throttle } from 'lodash'; | |
| useEffect(() => { | |
| const handleMouseMove = throttle((event: MouseEvent) => { | |
| dispatch(updateCursorPosition({ x: event.clientX, y: event.clientY })); | |
| }, 16); // ~60fps | |
| window.addEventListener("mousemove", handleMouseMove); | |
| return () => { | |
| handleMouseMove.cancel(); | |
| window.removeEventListener("mousemove", handleMouseMove); | |
| }; | |
| }, [dispatch]); |
| return ( | ||
| <> | ||
| {Array(10) | ||
| .fill(0) | ||
| .map((_, index) => ( | ||
| <div | ||
| key={index} | ||
| ref={(el) => { | ||
| if (el) trailRef.current[index] = el; | ||
| }} | ||
| style={{ | ||
| position: "fixed", | ||
| left: `0px`, // Initial position | ||
| top: `0px`, | ||
| width: `${15 - index}px`, // Increase size here | ||
| height: `${15 - index}px`, // Increase size here | ||
| backgroundColor: `rgba(255, 0, 0, ${0.5 - index * 0.05})`, // Fade with index | ||
| borderRadius: "50%", | ||
| pointerEvents: "none", | ||
| transform: "translate(-50%, -50%)", | ||
| }} | ||
| /> | ||
| ))} | ||
| </> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance accessibility and performance
The trail implementation could benefit from accessibility improvements and performance optimizations.
- Add ARIA attributes
- Use CSS transforms for better performance
- Consider reducing DOM elements for better performance
- Add media query support for reduced motion
+ const TRAIL_LENGTH = 10;
+ const BASE_SIZE = 15;
+ const BASE_OPACITY = 0.5;
return (
+ <div aria-hidden="true" className="cursor-trail-container">
- <>
- {Array(10)
+ {Array(TRAIL_LENGTH)
.fill(0)
.map((_, index) => (
<div
key={index}
ref={(el) => {
if (el) trailRef.current[index] = el;
}}
style={{
position: "fixed",
left: `0px`,
top: `0px`,
- width: `${15 - index}px`,
- height: `${15 - index}px`,
- backgroundColor: `rgba(255, 0, 0, ${0.5 - index * 0.05})`,
+ width: `${BASE_SIZE - index}px`,
+ height: `${BASE_SIZE - index}px`,
+ backgroundColor: `rgba(255, 0, 0, ${BASE_OPACITY - index * 0.05})`,
borderRadius: "50%",
pointerEvents: "none",
- transform: "translate(-50%, -50%)",
+ transform: "translate(-50%, -50%) translateZ(0)",
+ willChange: "transform",
}}
/>
))}
- </>
+ </div>Also, add this CSS to your global styles:
@media (prefers-reduced-motion: reduce) {
.cursor-trail-container {
display: none;
}
}| const trailPositions = useSelector((state: RootState) => state.cursor.trailPositions); | ||
| const restPosition = useSelector((state: RootState) => state.cursor.position); // Last cursor position | ||
| const trailRef = useRef<HTMLDivElement[]>([]); // Refs for trail elements | ||
| const animationFrameRef = useRef<number | null>(null); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider memoizing selector and adding type safety
The Redux selectors could benefit from memoization to prevent unnecessary re-renders, and the refs could use explicit typing.
Consider these improvements:
+ import { createSelector } from '@reduxjs/toolkit';
+ import { RefObject } from 'react';
+ const selectTrailPositions = createSelector(
+ (state: RootState) => state.cursor.trailPositions,
+ (trailPositions) => trailPositions
+ );
+ const selectRestPosition = createSelector(
+ (state: RootState) => state.cursor.position,
+ (position) => position
+ );
const CursorTrail = () => {
- const trailPositions = useSelector((state: RootState) => state.cursor.trailPositions);
- const restPosition = useSelector((state: RootState) => state.cursor.position);
- const trailRef = useRef<HTMLDivElement[]>([]);
+ const trailPositions = useSelector(selectTrailPositions);
+ const restPosition = useSelector(selectRestPosition);
+ const trailRef = useRef<Array<HTMLDivElement | null>>([]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const trailPositions = useSelector((state: RootState) => state.cursor.trailPositions); | |
| const restPosition = useSelector((state: RootState) => state.cursor.position); // Last cursor position | |
| const trailRef = useRef<HTMLDivElement[]>([]); // Refs for trail elements | |
| const animationFrameRef = useRef<number | null>(null); | |
| import { createSelector } from '@reduxjs/toolkit'; | |
| import { RefObject } from 'react'; | |
| const selectTrailPositions = createSelector( | |
| (state: RootState) => state.cursor.trailPositions, | |
| (trailPositions) => trailPositions | |
| ); | |
| const selectRestPosition = createSelector( | |
| (state: RootState) => state.cursor.position, | |
| (position) => position | |
| ); | |
| const CursorTrail = () => { | |
| const trailPositions = useSelector(selectTrailPositions); | |
| const restPosition = useSelector(selectRestPosition); | |
| const trailRef = useRef<Array<HTMLDivElement | null>>([]); | |
| const animationFrameRef = useRef<number | null>(null); |
| useEffect(() => { | ||
| const lerp = (start: number, end: number, factor: number) => { | ||
| return start + (end - start) * factor; | ||
| }; | ||
|
|
||
| const animateTrail = () => { | ||
| if (trailRef.current) { | ||
| trailRef.current.forEach((el, index) => { | ||
| if (el) { | ||
| // Current element position | ||
| const currentX = parseFloat(el.style.left || "0"); | ||
| const currentY = parseFloat(el.style.top || "0"); | ||
|
|
||
| // Target position: Interpolate toward trail position or rest position | ||
| const targetX = index < trailPositions.length ? trailPositions[index].x : restPosition.x; | ||
| const targetY = index < trailPositions.length ? trailPositions[index].y : restPosition.y; | ||
|
|
||
| // Smoothly move toward the target position | ||
| const newX = lerp(currentX, targetX, 0.2); // Adjust 0.2 for faster catch-up | ||
| const newY = lerp(currentY, targetY, 0.2); | ||
|
|
||
| // Update element position | ||
| el.style.left = `${newX}px`; | ||
| el.style.top = `${newY}px`; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| animationFrameRef.current = requestAnimationFrame(animateTrail); | ||
| }; | ||
|
|
||
| animationFrameRef.current = requestAnimationFrame(animateTrail); | ||
|
|
||
| return () => { | ||
| if (animationFrameRef.current) { | ||
| cancelAnimationFrame(animationFrameRef.current); | ||
| } | ||
| }; | ||
| }, [trailPositions, restPosition]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize animation performance and add cleanup
The animation logic could benefit from performance optimizations and better cleanup handling.
- Debounce animation frame updates
- Add error boundaries
- Improve cleanup handling
useEffect(() => {
+ let isActive = true;
const lerp = (start: number, end: number, factor: number) => {
return start + (end - start) * factor;
};
const animateTrail = () => {
+ if (!isActive) return;
if (trailRef.current) {
trailRef.current.forEach((el, index) => {
if (el) {
+ try {
// Current element position
const currentX = parseFloat(el.style.left || "0");
const currentY = parseFloat(el.style.top || "0");
// Target position
const targetX = index < trailPositions.length ? trailPositions[index].x : restPosition.x;
const targetY = index < trailPositions.length ? trailPositions[index].y : restPosition.y;
+ // Skip update if change is minimal
+ if (Math.abs(currentX - targetX) < 0.1 && Math.abs(currentY - targetY) < 0.1) {
+ return;
+ }
// Update position
const newX = lerp(currentX, targetX, 0.2);
const newY = lerp(currentY, targetY, 0.2);
el.style.left = `${newX}px`;
el.style.top = `${newY}px`;
+ } catch (error) {
+ console.error('Error updating trail position:', error);
+ }
}
});
}
animationFrameRef.current = requestAnimationFrame(animateTrail);
};
animationFrameRef.current = requestAnimationFrame(animateTrail);
return () => {
+ isActive = false;
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
+ animationFrameRef.current = null;
}
};
}, [trailPositions, restPosition]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| const lerp = (start: number, end: number, factor: number) => { | |
| return start + (end - start) * factor; | |
| }; | |
| const animateTrail = () => { | |
| if (trailRef.current) { | |
| trailRef.current.forEach((el, index) => { | |
| if (el) { | |
| // Current element position | |
| const currentX = parseFloat(el.style.left || "0"); | |
| const currentY = parseFloat(el.style.top || "0"); | |
| // Target position: Interpolate toward trail position or rest position | |
| const targetX = index < trailPositions.length ? trailPositions[index].x : restPosition.x; | |
| const targetY = index < trailPositions.length ? trailPositions[index].y : restPosition.y; | |
| // Smoothly move toward the target position | |
| const newX = lerp(currentX, targetX, 0.2); // Adjust 0.2 for faster catch-up | |
| const newY = lerp(currentY, targetY, 0.2); | |
| // Update element position | |
| el.style.left = `${newX}px`; | |
| el.style.top = `${newY}px`; | |
| } | |
| }); | |
| } | |
| animationFrameRef.current = requestAnimationFrame(animateTrail); | |
| }; | |
| animationFrameRef.current = requestAnimationFrame(animateTrail); | |
| return () => { | |
| if (animationFrameRef.current) { | |
| cancelAnimationFrame(animationFrameRef.current); | |
| } | |
| }; | |
| }, [trailPositions, restPosition]); | |
| useEffect(() => { | |
| let isActive = true; | |
| const lerp = (start: number, end: number, factor: number) => { | |
| return start + (end - start) * factor; | |
| }; | |
| const animateTrail = () => { | |
| if (!isActive) return; | |
| if (trailRef.current) { | |
| trailRef.current.forEach((el, index) => { | |
| if (el) { | |
| try { | |
| // Current element position | |
| const currentX = parseFloat(el.style.left || "0"); | |
| const currentY = parseFloat(el.style.top || "0"); | |
| // Target position | |
| const targetX = index < trailPositions.length ? trailPositions[index].x : restPosition.x; | |
| const targetY = index < trailPositions.length ? trailPositions[index].y : restPosition.y; | |
| // Skip update if change is minimal | |
| if (Math.abs(currentX - targetX) < 0.1 && Math.abs(currentY - targetY) < 0.1) { | |
| return; | |
| } | |
| // Update position | |
| const newX = lerp(currentX, targetX, 0.2); | |
| const newY = lerp(currentY, targetY, 0.2); | |
| el.style.left = `${newX}px`; | |
| el.style.top = `${newY}px`; | |
| } catch (error) { | |
| console.error('Error updating trail position:', error); | |
| } | |
| } | |
| }); | |
| } | |
| animationFrameRef.current = requestAnimationFrame(animateTrail); | |
| }; | |
| animationFrameRef.current = requestAnimationFrame(animateTrail); | |
| return () => { | |
| isActive = false; | |
| if (animationFrameRef.current) { | |
| cancelAnimationFrame(animationFrameRef.current); | |
| animationFrameRef.current = null; | |
| } | |
| }; | |
| }, [trailPositions, restPosition]); |
Sanchitbajaj02
added
🏆 good first issue
2 participants
Related Issue
Fixes #416
Description
Added a cursor trail
Screenshots
Summary by CodeRabbit
New Features
Bug Fixes
Documentation