Performance Optimization
Relevant source files
The following files were used as context for generating this wiki page:
Performance optimization in the Moe Kyaw Aung portfolio project focuses on delivering a smooth, high-fidelity user experience while managing resource-heavy components like 3D scenes and complex animations. The project leverages modern web technologies such as Vite for build orchestration, Lenis for smooth scrolling, and Framer Motion for hardware-accelerated transitions.
The architecture ensures that interactive elements like the 3D Spline scene and particle backgrounds do not compromise the responsiveness of the UI. This is achieved through efficient rendering loops, CSS-level optimizations, and specialized interaction hooks.
Sources: src/App.jsx, src/components/3D-Hero/Hero3D.jsx, package.json
Smooth Scrolling and Layout Performance
The application implements a smooth scrolling engine using the Lenis library to normalize scrolling behavior across different browsers and devices. This is integrated directly into the React lifecycle within the root App component.
Implementation Logic
The smooth scroll is managed via a requestAnimationFrame (RAF) loop. This ensures that the scroll position is updated in sync with the display's refresh rate, reducing jitter and input lag.
The diagram shows the recursive loop established to update the smooth scroll instance on every animation frame.
Sources: src/App.jsx:8-21, package.json:16
CSS Optimizations
To prevent layout shifts and flickering during heavy scrolling or 3D rendering, the project utilizes specific CSS rules:
- Overflow Management:
overflow-x: hiddenon the body and html elements prevents horizontal scroll recalculations. - Pointer Events: The CSS specifies
.lenis.lenis-scrolling iframe { pointer-events: none; }to prevent nested iframes from intercepting events during scroll transitions, which improves frame stability.
Sources: src/styles/globals.css:10-15, src/styles/globals.css:26-38
Animation and Rendering Efficiency
The project utilizes framer-motion and gsap for high-performance animations. framer-motion is used specifically for entrance animations and state-driven transitions, which typically offload work to the GPU.
3D Scene Integration
The Hero3D component integrates a Spline scene. To maintain performance:
- The Spline component is absolute-positioned and restricted to its own container to limit the paint area.
- A
ParticleBgcomponent is used as an overlay, likely utilizingtsparticles(as seen in dependencies) for efficient particle rendering.
| Component | Technology | Performance Role |
|---|---|---|
| Hero3D | @splinetool/react-spline | Renders WebGL content within isolated container |
| Motion Div | framer-motion | Hardware-accelerated entrance animations (opacity/Y-axis) |
| MagneticButton | react-magnetic | Decoupled mouse-tracking interaction |
Sources: src/components/3D-Hero/Hero3D.jsx:8-15, package.json:13-19, MagneticButtom.jsx:4-15
Build and Dependency Optimization
The project uses Vite as the build tool, which provides several out-of-the-box performance benefits including Hot Module Replacement (HMR) and optimized production bundling.
Build Configuration
The vite.config.js uses the @vitejs/plugin-react which optimizes the React transformation process, specifically using the automatic JSX transform to reduce bundle size and improve compilation speed.
Sources: vite.config.js:1-9, package.json:20-23
Dependency Management
The package.json identifies several key libraries optimized for performance:
- Lenis: Minimal footprint smooth scrolling.
- GSAP: High-performance animation engine used for complex timelines.
- Framer Motion: Optimized for React component lifecycle.
Sources: package.json:13-20
Conclusion
Performance optimization in this portfolio is centered on the intersection of visual richness and technical fluidity. By offloading heavy scroll logic to Lenis, utilizing hardware-accelerated animations via Framer Motion, and leveraging Vite's optimized build pipeline, the application maintains high frame rates despite the inclusion of complex 3D Spline scenes and particle systems.