Skip to content

README.md

Latest commit

 

History

History
175 lines (152 loc) · 8.07 KB

README.md

File metadata and controls

175 lines (152 loc) · 8.07 KB

hyperview-3d-landing

Showcase SaaS products with interactive 3D landing pages

Developed with the software and tools below.

React Three.js TypeScript Tailwind CSS
git-last-commit GitHub commit activity GitHub top language

📑 Table of Contents

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

📍 Overview

This repository showcases a 3D landing page for SaaS products built using React, Three.js, and TypeScript, providing an interactive experience.

📦 Features

Feature Description
🔷 Interactive 3D Models Utilizes Three.js and React Three Fiber for rendering interactive 3D models, enabling users to explore products in detail.
✨ Animations Leverages GSAP and Framer Motion for creating smooth, engaging animations and transitions, enhancing the user experience.
📱 Responsive Design Designed to adapt seamlessly across various devices, ensuring a consistent and engaging experience on desktops, tablets, and mobile phones. Built with Tailwind CSS.
🌙 Theme Switching Allows users to toggle between light and dark themes using a custom hook, providing a personalized viewing experience.
🚀 Performance Optimized Implements memory management, lazy loads 3D objects and uses LOD to deliver smooth and performant renders.
💎 Customizable Materials The ability to apply textures and themes to enhance the scene.
🎭 Base Template The ability to setup threejs quickly with base elements like lights, camera, and more.
🎮 Interaction Support This allows for users to use mouse or keyboard to move aroudn the created 3D scene.

📂 Structure

3d-landing-page/
├── src/
│   ├── components/          # Reusable React components
│   │   ├── 3d/              # Three.js related components
│   │   │   ├── core/      # scene, camera, renderer
│   │   │   ├── models/    # 3D assets
│   │   │   └── effects/   # shaders, postprocessing
│   │   ├── layout/          # viewport, containers
│   │   └── sections/        # hero, features
│   ├── hooks/             # animation, scroll, three
│   ├── pages/             # index, model
│   ├── styles/            # theme, components
│   ├── utils/             # three, animation, perf
│   ├── App.tsx              # Application
│   ├── main.tsx             # Application
│   └── vite-env.d.ts       # Environment
├── index.html           # HTML
├── vite.config.ts       # Vite
├── tailwind.config.js   # Tailwind
├── tsconfig.json        # Typescript
├── README.md            # Info
├── package.json         # Dependencies

💻 Installation

Warning

🔧 Prerequisites

  • Node.js v18+
  • npm 6+

🚀 Setup Instructions

  1. Clone the repository:

    git clone https://github.com/coslynx/hyperview-3d-landing.git
cd hyperview-3d-landing

  2. Install dependencies:

    npm install

🏗️ Usage

🏃‍♂️ Running the MVP

  1. Start the development server:

    npm run dev

  2. Access the application:

Tip

⚙️ Configuration

No need for much configuration, only to provide the API and connect the different features to the server

📚 Examples

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

  • 3D model configuration:

    <ModelLoader modelUrl="/models/scene.glb" />

  • Base ThreeJS Setup:

            <ThreeScene >
              ... components
        </ThreeScene>

  • Landing Page:

                <LandingHero
                  modelUrl="/models/laptop.glb"
                  headline="Experience Immersive 3D Web Design"
                  subheadline="Create stunning, interactive 3D landing pages with ease."
                  ctaLabel="Get Started"
                  ctaLink="/models"
                />

🌐 Hosting

🚀 Deployment Instructions

Provide detailed, step-by-step instructions for deploying to the most suitable platform for this MVP. For example:

Deploying to Netlify

  1. Build the project:
npm run build
  1. Drag and drop the 'dist' folder. You will get a web address for the website and you can assign it to a domain or subdomain you have.

📄 License & Attribution

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: hyperview-3d-landing

📞 Contact

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

🌐 CosLynx.com

Create Your Custom MVP in Minutes With CosLynxAI!