Extending the Magnetic Button
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Magnetic Button is a specialized UI component designed to enhance user interactivity by creating an attraction effect between the cursor and the element. Within this project, it serves as a primary Call-to-Action (CTA) mechanism, utilized for navigation and engagement in high-impact areas like the Hero section.
The implementation leverages the react-magnetic library to handle complex physics-based movements, allowing the component to be flexible and reusable across different sections of the portfolio. Its integration with other animation libraries like Framer Motion and smooth scrolling utilities ensures a cohesive and premium user experience.
Sources: MagneticButtom.jsx:1-15, src/components/3D-Hero/Hero3D.jsx:35-51, package.json:20
Architecture and Core Logic
Component Structure
The MagneticButton is a functional React component that wraps a standard anchor (<a>) tag. It utilizes the useMagnetic hook to bind mouse event listeners and apply transform styles dynamically based on cursor proximity.
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:3-14
Data Flow and Interactions
The button's behavior is governed by the strength parameter passed to the useMagnetic hook, which defines the intensity of the magnetic pull. In the current implementation, this is hardcoded to 0.3.
The following diagram illustrates the interaction flow between the user's cursor and the Magnetic Button:
Sources: MagneticButtom.jsx:4-7
Integration within the Hero System
3D Hero Layout
The Hero3D component integrates multiple MagneticButton instances to provide navigation to projects and contact sections. These buttons are positioned within a flex container and styled with Tailwind CSS to include backdrops, gradients, and shadows.
| Property | Value/Description |
|---|---|
| Container | flex flex-col sm:row gap-6 |
| Project Button | White bg, black text, rounded-full, shadow-2xl |
| Contact Button | Transparent, white border, backdrop-blur-sm |
Sources: src/components/3D-Hero/Hero3D.jsx:34-52
Dependency Ecosystem
The button exists within a broader ecosystem of animation and scrolling libraries defined in the project configuration.
Styling and Global Environment
CSS Configuration
The button's appearance is heavily reliant on global styles and Tailwind utility classes. The project uses a dark theme (#0a0a0a) which provides high contrast for the button variations.
body {
font-family: 'Inter', -apple-system, sans-serif;
background: #0a0a0a;
color: white;
}
Sources: src/styles/globals.css:15-19
Technical Specifications
The button inherits its font and core box-sizing properties from the global stylesheet, ensuring consistency across different viewport sizes.
| Feature | implementation | Source |
|---|---|---|
| Font Family | Inter, -apple-system | globals.css:16 |
| Base Scaling | box-sizing: border-box | globals.css:7 |
| Smooth Scrolling | Lenis integration | App.jsx:9-13 |
Conclusion
The Magnetic Button implementation provides a robust and reusable pattern for interactive elements. By combining the physics-based react-magnetic hook with Tailwind CSS for styling and Framer Motion for entrance animations (as seen in the Hero component), the system achieves a sophisticated interactive layer that remains performant and easy to extend for further UI elements.
Sources: MagneticButtom.jsx:1-15, src/components/3D-Hero/Hero3D.jsx:1-60, src/App.jsx:1-25