Component: Hero3D
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Hero3D component serves as the primary landing section of the portfolio application. It provides a visually immersive experience by integrating 3D elements, particle backgrounds, and interactive UI components. Occupying the full viewport height and width, it functions as the initial touchpoint for users, presenting the developer's name and core value proposition.
Sources: src/components/3D-Hero/Hero3D.jsx:7-9, src/styles/globals.css:12-16
This component is architected as a React functional component that leverages high-performance animation libraries and 3D rendering tools to create a "pixel-perfect" user interface. It is integrated into the main application flow within the Home page, which is subsequently rendered within the global App layout.
Sources: src/App.jsx:23-26, src/components/3D-Hero/Hero3D.jsx:25-27
Component Architecture
The Hero3D component is structured using a layered approach where background elements are placed in absolute positions relative to the main container, and interactive content is layered on top using z-indexing.
The diagram above illustrates the hierarchical structure and stacking of visual layers within the Hero section.
Sources: src/components/3D-Hero/Hero3D.jsx:7-60
Visual Layers and Styling
The component utilizes Tailwind CSS for layout and styling, combined with global CSS rules to ensure a seamless "dark mode" aesthetic. The container uses relative h-screen w-full overflow-hidden to ensure it fills the viewport while preventing scrollbars from appearing due to internal animations.
| Layer | Implementation | Purpose |
|---|---|---|
| 3D Background | <Spline /> | Renders a 3D scene from an external Spline design file. |
| Particle Overlay | <ParticleBg /> | Provides a dynamic particle system on top of the 3D scene. |
| Content | motion.div | Houses the primary text and CTA buttons with entry animations. |
| Scroll Indicator | motion.div | A visual cue at the bottom of the screen to indicate further content. |
Sources: src/components/3D-Hero/Hero3D.jsx:9-59, src/styles/globals.css:17-21
Key Dependencies and Integration
The component relies on several external libraries to achieve its high-fidelity visuals and interactions. These are managed via the project's dependency manifest.
This relationship map shows how specific libraries contribute to the functionality of the Hero3D component.
Sources: package.json:11-18, src/components/3D-Hero/Hero3D.jsx:1-4
Implementation Details
The 3D scene is loaded from a specific Spline design URL: https://prod.spline.design/f9mXvGfQ6oZ0k8rN/scene.splinecode. The text content features a gradient background clipped to the text to create a high-contrast visual effect.
// Example of the animated content wrapper
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, ease: "easeOut" }}
>
<h1 className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent">
Moe Kyaw Aung
</h1>
</motion.div>
Sources: src/components/3D-Hero/Hero3D.jsx:11-30
Interactive Elements
Magnetic Buttons
The component features two primary Call-to-Action (CTA) buttons that utilize the MagneticButton wrapper. This wrapper uses the useMagnetic hook with a strength factor of 0.3 to create a physical attraction effect when the user hovers near the buttons.
Sources: MagneticButtom.jsx:4-15, src/components/3D-Hero/Hero3D.jsx:35-51
Scroll Indicator
An animated scroll indicator is positioned at the bottom of the Hero3D section. It uses a repeat: Infinity transition to create a continuous vertical bouncing motion, guiding the user to scroll down the page.
Sources: src/components/3D-Hero/Hero3D.jsx:54-61
Smooth Scrolling Integration
The Hero3D component operates within an environment where smooth scrolling is managed globally. The App component initializes the Lenis smooth scroll library, which affects how navigation from the Hero buttons (e.g., #projects) is handled.
Summary
The Hero3D component is a sophisticated React module that combines 3D rendering (Spline), particle effects, and physics-based interactions (Magnetic Buttons) to create an engaging landing experience. It is tightly integrated with the project's global styling and smooth-scrolling architecture, ensuring a consistent user experience from the moment the application loads.