Component: Magnetic Button

Introduction

The MagneticButton is a specialized React component designed to enhance user interaction by providing a "magnetic" attraction effect to the cursor. It serves as a primary Call-to-Action (CTA) element within the portfolio's landing experience, specifically integrated into the Hero3D section. By leveraging external physics-based libraries, the component creates a dynamic, high-end feel that aligns with the "Supreme Fullstack Developer" aesthetic of the site.

Sources: MagneticButtom.jsx:1-15, src/components/3D-Hero/Hero3D.jsx:30-45

Component Architecture

The MagneticButton is a functional component that wraps a standard HTML anchor tag (<a>). It utilizes the react-magnetic library to handle the mathematical calculations required for the cursor attraction effect.

Core Logic

The component initializes a magnetic binding using a custom hook which returns a set of event handlers. These handlers are spread onto the anchor element to track mouse movement relative to the button's bounding box.

import { useMagnetic } from 'react-magnetic'

export default function MagneticButton({ children, href, className }) {
  const bind = useMagnetic({ strength: 0.3 })

  return (
    <a 
      {...bind()}
      href={href}
      className={`inline-block ${className}`}
    >
      {children}
    </a>
  )
}

Sources: MagneticButtom.jsx:1-15

Data Flow and Interactions

The following diagram illustrates how the MagneticButton processes user input and interacts with the react-magnetic library:

The component accepts children, href, and className as props, allowing it to be styled flexibly while maintaining its core navigation and magnetic functionality.
Sources: MagneticButtom.jsx:3-14

Implementation in Hero3D

The MagneticButton is prominently used in the Hero3D component to direct users to projects and contact information. It is positioned within a flex container that sits above a Spline 3D scene and a particle background.

Layout Configuration

Sources: src/components/3D-Hero/Hero3D.jsx:31-44

Visual Hierarchy Diagram

This diagram shows the stacking context of the MagneticButton within the hero section.

Dependency Integration

The component's behavior is dependent on the broader project environment, including CSS global styles and smooth scrolling libraries.

Key Dependencies

• react-magnetic: Provides the useMagnetic hook and internal animation logic.
• Lenis: Used in App.jsx to ensure that when a MagneticButton is clicked (e.g., href="#projects"), the resulting scroll is smooth rather than an instant jump.
• Tailwind CSS: Used via className props to define the visual state and transitions (e.g., transition-all duration-300).

Sources: package.json:16-24, src/App.jsx:7-22, src/styles/globals.css:1-20

Conclusion

The MagneticButton is a critical UI component that bridges the gap between static navigation and the immersive 3D environment of the portfolio. By abstracting the complex physics of cursor attraction into a reusable wrapper, it provides a consistent interactive language for all primary actions within the application.

Sources: MagneticButtom.jsx:1-15, src/components/3D-Hero/Hero3D.jsx:31-44