Component State Management
Relevant source files
The following files were used as context for generating this wiki page:
Component state management in this project focuses on orchestrating interactive UI elements, smooth scrolling behaviors, and external library integrations within a React-based environment. The system leverages React's built-in hooks alongside third-party libraries like Framer Motion, Lenis, and react-magnetic to handle visual states and user interactions.
The architecture emphasizes a declarative approach to state, where UI components react to lifecycle events (such as mounting) and user-triggered input (such as mouse movement or scrolling).
Sources: src/App.jsx:1-25, package.json:15-25, src/components/3D-Hero/Hero3D.jsx:1-60
Scroll and Animation Lifecycle Management
The application manages global scrolling state using the Lenis library, which is initialized within the root component. This state is not stored in a traditional React useState variable but is managed via a persistent instance within a useEffect hook, controlling the requestAnimationFrame (RAF) loop for the entire application.
Smooth Scroll Implementation
The scroll state is globally synchronized to the browser's refresh rate to ensure consistent performance across different hardware.
This diagram illustrates the lifecycle of the smooth scroll state management.
Sources: src/App.jsx:7-20
Interactive Component State
Individual components manage their own interaction states, specifically for animations and mouse-tracking "magnetic" effects.
Magnetic Interaction State
The MagneticButton component utilizes the useMagnetic hook to manage the internal state of a DOM element's position relative to the cursor. This hook returns a binding object that applies necessary event listeners and style transformations.
| Parameter | Type | Default | Description |
|---|---|---|---|
strength | Number | 0.3 | The intensity of the magnetic pull effect |
Sources: MagneticButtom.jsx:1-14
Animation States (Framer Motion)
Visual transitions in the Hero3D component are managed through declarative state properties:
- Initial State: Defines the starting point (e.g.,
opacity: 0,y: 50). - Animate State: Defines the target state (e.g.,
opacity: 1,y: 0). - Transition State: Governs the timing and easing of the state change.
Sources: src/components/3D-Hero/Hero3D.jsx:21-25
Global CSS and Layout States
The project uses CSS classes and data attributes to reflect the current scroll state managed by Lenis. These states are applied to the html and body elements to modify standard browser behavior.
| Selector | Target Element | Purpose |
|---|---|---|
.lenis.lenis-smooth | html | Enables custom smooth scrolling behavior |
.lenis.lenis-stopped | html | Disables scrolling (sets overflow to hidden) |
.lenis.lenis-scrolling | iframe | Disables pointer events during active scrolls |
Sources: src/styles/globals.css:25-41
External Library Integration
The project coordinates state between React and specialized external engines:
- Spline: The
Hero3Dcomponent integrates a 3D scene via the@splinetool/react-splinepackage, managing the loading and rendering state of external.splinecodeassets. - GSAP: Used for advanced timeline-based animations (referenced in dependencies).
- Particles: Managed via
react-particlesto maintain the background simulation state.
This diagram shows the initialization flow for high-level visual components.
Sources: package.json:17-23, src/components/3D-Hero/Hero3D.jsx:1-15
Conclusion
Component state management in the portfolio is characterized by a hybrid approach: local React hooks handle component-specific interactivity, while global lifecycle hooks (useEffect) manage high-performance scrolling and animation loops. This ensures that the UI remains responsive and synchronized with complex 3D and particle systems.