Skip to content

Comments

[Comp] Magentic Component#73

Open
fabroos wants to merge 3 commits intomainfrom
fabroos/magnetic-component
Open

[Comp] Magentic Component#73
fabroos wants to merge 3 commits intomainfrom
fabroos/magnetic-component

Conversation

@fabroos
Copy link
Collaborator

@fabroos fabroos commented Feb 11, 2026

Greptile Overview

Greptile Summary

This PR adds a well-crafted Magnetic component that creates a cursor-attraction effect. The implementation follows best practices with React Context for state management, useEffectEvent for stable callbacks, and proper accessibility support via prefers-reduced-motion. The component uses RAF-based animation with smooth interpolation and provides a clean API with asChild support via Radix Slot.

Key highlights:

  • Uses Context over prop drilling as per guidelines
  • Respects prefers-reduced-motion for accessibility
  • Animates only transform (compositor-friendly)
  • Clean documentation with complete examples and props tables
  • Proper registry configuration and metadata

Previous review comments already identified the remaining issues:

  • Performance: getBoundingClientRect() called in RAF loop (should cache on mouseenter)
  • Coordinate bug: Mixing viewport coords with scroll offset incorrectly
  • Unused ref: isHovered ref set but never read

Confidence Score: 4/5

  • Safe to merge with minor performance optimizations remaining
  • The component is well-structured and follows engineering guidelines. Previous comments already identified the performance issues (getBoundingClientRect in RAF loop, coordinate mixing, unused ref). These are optimization opportunities rather than critical bugs - the component functions correctly but could be more performant.
  • registry/joyco/blocks/magnetic.tsx - address previous performance comments before merge

Important Files Changed

Filename Overview
registry/joyco/blocks/magnetic.tsx Clean implementation with React Context, proper accessibility (prefers-reduced-motion), and efficient RAF-based animation; previous comments address remaining performance issues
content/components/magnetic.mdx Complete documentation with clear examples, props table, and accessibility notes
demos/magnetic-demo.tsx Simple, effective demo showcasing the magnetic effect

Last reviewed commit: c89b688

Context used:

  • Context from dashboard - Registry Guidelines (source)
  • Context from dashboard - AGENTS.md (source)

@vercel
Copy link
Contributor

vercel bot commented Feb 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
joyco-hub Ready Ready Preview, Comment Feb 13, 2026 2:57pm

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

7 files reviewed, 3 comments

Edit Code Review Agent Settings | Greptile

mousePos: React.RefObject<{ x: number; y: number }>
strength: number
ease: number
isHovered: React.RefObject<boolean>
Copy link
Contributor

Choose a reason for hiding this comment

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

isHovered ref is set but never read - can be removed from context and component

Prompt To Fix With AI
This is a comment left during a code review.
Path: registry/joyco/blocks/magnetic.tsx
Line: 17:17

Comment:
`isHovered` ref is set but never read - can be removed from context and component

How can I resolve this? If you propose a fix, please make it concise.

- Changed the implementation of Root and Inner components to use function syntax instead of forwardRef for better clarity.
- Introduced applyTick and applyLeave functions to encapsulate animation logic and reduce redundancy.
- Removed unnecessary comments and streamlined the useEffect hooks for improved performance and maintainability.
- Added an eslint-disable comment to the useEffect hook to indicate that applyTick/applyLeave are effect events and rootRef is a stable reference, improving code clarity and maintaining eslint compliance.
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.

1 participant