Interactive Animations
Relevant source files
The following files were used as context for generating this wiki page:
The interactive animations system in this portfolio project is a multi-layered architecture designed to provide a high-fidelity user experience. It combines 3D scene rendering, smooth scrolling physics, gesture-based magnetic interactions, and declarative motion transitions to create a cohesive and immersive interface.
The system leverages several industry-standard libraries including framer-motion for UI transitions, lenis for scroll orchestration, gsap for high-performance animations, and @splinetool/react-spline for real-time 3D content integration. These tools are orchestrated within a React environment to ensure performant rendering and state-driven animation triggers.
Sources: package.json:15-23, src/App.jsx:7-21, src/components/3D-Hero/Hero3D.jsx:7-14
Core Animation Technologies
The project utilizes a specific stack of libraries to handle different aspects of interactivity and visual feedback.
| Library | Primary Purpose | Key Implementation File |
|---|---|---|
framer-motion | Declarative UI transitions and scroll indicators | src/components/3D-Hero/Hero3D.jsx |
lenis | Smooth scroll physics and inertia | src/App.jsx |
react-magnetic | Cursor-attraction physics for interactive elements | MagneticButtom.jsx |
@splinetool/react-spline | Integration of 3D scenes | src/components/3D-Hero/Hero3D.jsx |
react-particles | Background particle systems | src/components/3D-Hero/Hero3D.jsx |
Sources: package.json:15-23
Smooth Scroll Architecture
The application implements a global smooth scrolling system using Lenis. This system overrides default browser scroll behavior to provide a consistent, momentum-based experience across different platforms.
The implementation uses a requestAnimationFrame (RAF) loop to synchronize the scroll position with the browser's refresh rate. This ensures that visual elements, particularly those involving parallax or scroll-triggered transitions, remain fluid.
The diagram above shows the initialization and execution loop of the smooth scroll system within the main application entry point.
Sources: src/App.jsx:7-21, src/styles/globals.css:26-44
Scroll CSS Configuration
The globals.css file contains specific configurations to ensure the Lenis engine operates correctly without layout shifts.
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
Sources: src/styles/globals.css:26-34
Interactive Magnetic Components
Interactive buttons within the portfolio utilize a "magnetic" effect where the element subtly follows the user's cursor when in proximity. This is achieved through the useMagnetic hook from the react-magnetic library.
MagneticButton Component
The MagneticButton component acts as a wrapper around standard anchor tags, applying a strength of 0.3 to the magnetic attraction.
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
3D and Motion Orchestration
The Hero3D component serves as the primary visual hub, orchestrating several layers of animations simultaneously:
- 3D Layer: A Spline scene rendered via
@splinetool/react-spline. - Particle Layer: An overlay particle effect.
- Motion Layer: Content reveals using
framer-motion. - UI Feedback: A looped scroll indicator.
Component Layering Sequence
The diagram illustrates the z-index and animation layering within the Hero3D section.
Sources: src/components/3D-Hero/Hero3D.jsx:7-60
Content Transitions
Text and button groups in the Hero section utilize framer-motion for entrance animations. The main container initializes at an opacity of 0 with a vertical offset of 50px, transitioning to its final state over a 1 second duration using an easeOut easing function.
Sources: src/components/3D-Hero/Hero3D.jsx:21-25
Summary
The interactive animation system is built on a foundation of smooth scrolling (lenis) and layered visual components. It effectively integrates complex 3D scenes with responsive UI elements that react to user input via magnetic physics and pre-defined motion paths, ensuring a high-performance interactive experience.