lumina-3d-saas-demo

Showcase SaaS with immersive 3D, smooth animations, and parallax effects.

Developed with the software and tools below.

📑 Table of Contents

• 📍 Overview
• 📦 Features
• 📂 Structure
• 💻 Installation
• 🏗️ Usage
• 🌐 Hosting
• 📄 License
• 👏 Authors

📍 Overview

The repository contains a Minimum Viable Product (MVP) that is a 3D SaaS landing page featuring interactive 3D models, smooth animations, and parallax scrolling effects. The landing page showcases a SaaS product and is built using React, Three.js, and TypeScript.

📦 Features

	Feature	Description
🧊	3D Core	Manages Three.js scenes, rendering, and camera configurations. Implements core 3D rendering functionalities.
📦	Model Loading	Facilitates loading and managing 3D models efficiently using utilities like DRACO compression and LOD.
✨	Animations	Provides smooth animations and transitions using GSAP. Includes scroll-based and interactive animations.
💡	Lighting	Implements lighting systems to enhance visual appeal and realism in the 3D environment.
🧱	Materials	Creates and manages materials for 3D objects, supporting PBR and custom shader effects.
🖼️	UI Components	Includes reusable UI components such as Header, Footer, and layout structures. Provides a structured UI layout.
📷	Camera	Configures and controls camera movements and perspectives within the 3D scene. Provides utility and control
👆	Interaction	Manages user interactions with 3D objects using raycasting and event handling.
⚡️	Performance	Optimize for frame rate and memory usage to use Three.js with stability by providing features to optomize it, for a higher score.
📝	Base Template	Central for setting up structure for themes and components.

📂 Structure

lumina-3d-saas-demo/
├── public/                 
│   └── models/             
├── src/
│   ├── components/          
│   │   ├── 3d/             
│   │   │   ├── AdvancedScene.tsx
│   │   │   ├── ModelLoader.tsx  
│   │   │   ├── ScrollScene.tsx  
│   │   │   ├── ThreeScene.tsx   
│   │   ├── layout/          
│   │   │   ├── Footer.tsx      
│   │   │   ├── Header.tsx      
│   │   │   ├── MinimalLayout.tsx
│   │   ├── sections/        
│   │   │   ├── LandingHero.tsx
│   │   ├── App.tsx            
│   ├── hooks/              
│   │   ├── use3DAnimation.tsx 
│   │   ├── use3DInteraction.tsx
│   │   ├── useScrollAnimation.tsx
│   │   ├── useToggle.tsx
│   ├── pages/              
│   │   ├── AboutPage.tsx     
│   │   ├── ContactPage.tsx   
│   │   ├── ExperiencePage.tsx
│   │   ├── ModelShowcasePage.tsx
│   ├── styles/             
│   │   ├── base.css        
│   │   ├── components/       
│   │   ├── layout/           
│   │   ├── pages/             
│   ├── utils/              
│   │   ├── format.ts       
│   │   ├── modelManager.ts   
│   │   ├── sampleModelHelper.ts
│   ├── vite-env.d.ts       
│   ├── vite.config.ts      
│   ├── tsconfig.json       
│   ├── tailwind.config.js   
│   ├── index.html            
│   ├── main.tsx          
├── README.md               
├── package.json            

💻 Installation

Warning

🔧 Prerequisites

• Node.js v18 or higher
• npm v8 or higher

🚀 Setup Instructions

1. Clone the repository:

   git clone https://github.com/coslynx/lumina-3d-saas-demo.git
   cd lumina-3d-saas-demo

2. Install dependencies:

   npm install

🏗️ Usage

🏃‍♂️ Running the MVP

1. Start the development server:

   npm run dev

2. Access the application:

   • Web interface: http://localhost:5173

Tip

⚙️ Configuration

• src/components: This directory contains the core React components, including layout elements, UI components, and 3D renderings.
• src/hooks: This directory contains custom React hooks for managing state, animations, and 3D scene interactions.
• src/utils: This directory contains utility functions for various tasks, such as model loading, formatting, and theming.

📚 Examples

Provide specific examples relevant to the MVP's core features:

• 🌐 Interactive 3D Model Showcase: Navigate to /model-showcase to view and interact with the 3D model.
• ✨ Experience Parallax Scrolling: Scroll through the landing page to experience parallax effects, navigate to /experience to test it well..
• 🌙 Theme Toggle: Use the theme toggle in the header to switch between light and dark modes.

🌐 Hosting

🚀 Deployment Instructions

Deploying to Netlify

1. Create a Netlify account (if you don't have one) and install the Netlify CLI:

npm install -g netlify-cli

2. Build the project for production:

   npm run build

3. Deploy the application:

   netlify deploy --prod

   This command will deploy the contents of your dist directory to Netlify. Netlify will provide you with a production URL for your deployed application.

🔑 Environment Variables

The following environment variables are set in the .env file:

• VITE_APP_TITLE: The title of the application. Example: Lumina SaaS 3D Demo
• VITE_PUBLIC_URL: The public URL where the app is served. Example: /

Note

📜 License & Attribution

📄 License

This Minimum Viable Product (MVP) is licensed under the GNU AGPLv3 license.

🤖 AI-Generated MVP

This MVP was entirely generated using artificial intelligence through CosLynx.com.

No human was directly involved in the coding process of the repository: lumina-3d-saas-demo

📞 Contact

For any questions or concerns regarding this AI-generated MVP, please contact CosLynx at:

• Website: CosLynx.com
• Twitter: @CosLynxAI

🌐 CosLynx.com

Create Your Custom MVP in Minutes With CosLynxAI!