Asset Pipeline
Relevant source files
The following files were used as context for generating this wiki page:
The asset pipeline in the Moe Kyaw Aung portfolio project is a sophisticated build and delivery system centered around Vite. It manages the integration of traditional web assets (JavaScript, CSS, HTML), specialized 3D scene files, and interactive physics-based components. The pipeline ensures that high-fidelity assets, such as Spline 3D models and particle systems, are efficiently bundled and served to provide a seamless user experience.
Sources: vite.config.js:1-9, package.json:1-30
Build and Module System
The project utilizes Vite as its primary build tool, leveraging its ESM-based development server and Rollup-based production bundler. The environment is configured as a Node.js module ("type": "module") to support modern JavaScript syntax and features.
Core Dependencies
The pipeline processes several specialized libraries to handle different asset types:
| Category | Package | Purpose |
|---|---|---|
| Framework | react | UI component architecture |
| 3D Assets | @splinetool/react-spline | Rendering .splinecode scenes |
| Animation | framer-motion, gsap | Orchestrating UI transitions and keyframes |
| Visual Effects | react-particles | Dynamic background generation |
| Interaction | lenis, react-magnetic | Smooth scrolling and interactive UI elements |
Sources: package.json:6-24, vite.config.js:1-9
Asset Integration Flow
The pipeline follows a specific flow where assets are imported into the React component tree, processed by Vite, and injected into the DOM.
This diagram illustrates how various asset types (3D scenes, styles, and scripts) converge through the React entry point into the final production bundle.
Sources: src/main.jsx:1-11, index.html:1-14, src/components/3D-Hero/Hero3D.jsx:1-10
Specialized Asset Handling
3D and Particle Scenes
The pipeline manages external 3D assets by referencing remote Spline scenes. These are integrated via the <Spline /> component, which acts as a bridge between the React lifecycle and the Spline runtime.
<Spline
className="absolute inset-0 w-full h-full"
scene="https://prod.spline.design/f9mXvGfQ6oZ0k8rN/scene.splinecode"
/>
Sources: src/components/3D-Hero/Hero3D.jsx:10-13
CSS and Styling Pipeline
The project uses Tailwind CSS, which is processed during the build phase. The globals.css file serves as the entry point for the CSS pipeline, importing base, component, and utility layers.
- Global Reset: Standards-based box-sizing and margin resets.
- Scroll Behavior: Integration with Lenis for smooth scrolling, controlled via specific CSS classes like
.lenis-smooth. - Theming: Default dark background (
#0a0a0a) and Inter font family defined at the body level.
Sources: src/styles/globals.css:1-50
Configuration and Scripts
The pipeline is controlled through a set of NPM scripts that interface with the Vite CLI.
| Script | Command | Description |
|---|---|---|
dev | vite | Starts the development server on port 3000. |
build | vite build | Compiles assets for production deployment. |
preview | vite preview | Serves the production build locally for testing. |
Sources: package.json:6-10, vite.config.js:4-8
Execution Sequence
The initialization of the asset pipeline during runtime follows a strict sequence to ensure all interactive and visual components are ready.
The sequence diagram shows the order of operations from the initial HTML load to the start of the animation loops.
Sources: index.html:12, src/main.jsx:6-11, src/App.jsx:7-20
Conclusion
The asset pipeline effectively bridges modern web development tools with high-performance 3D and animation libraries. By utilizing Vite's plugin-react and a centralized entry point in main.jsx, the system ensures that complex assets like Spline scenes and particle backgrounds are rendered efficiently while maintaining smooth performance through Lenis and GSAP integrations.