https://github.com/coslynx/virtuoso-3d-web-showcase
Interactive 3D product demo with WebGL immersion... Created at https://coslynx.com
https://github.com/coslynx/virtuoso-3d-web-showcase
3d-animation 3d-landing-page 3d-model 3d-visualization 3d-web code-generation coslynx developer-tools devops glsl gltf landing-page machine-learning r3f react-three-fiber shader three-js threejs-journey webgl webgl2
Last synced: about 1 month ago
JSON representation
Interactive 3D product demo with WebGL immersion... Created at https://coslynx.com
- Host: GitHub
- URL: https://github.com/coslynx/virtuoso-3d-web-showcase
- Owner: coslynx
- Created: 2025-05-29T12:32:14.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-29T12:32:34.000Z (about 1 year ago)
- Last Synced: 2025-08-08T02:48:18.207Z (10 months ago)
- Topics: 3d-animation, 3d-landing-page, 3d-model, 3d-visualization, 3d-web, code-generation, coslynx, developer-tools, devops, glsl, gltf, landing-page, machine-learning, r3f, react-three-fiber, shader, three-js, threejs-journey, webgl, webgl2
- Language: TypeScript
- Size: 33.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 3D Landing Page Template
A modern, performance-focused template for creating stunning 3D landing pages using React, Three.js, and GSAP.
## ✨ Features
- **🎯 Single Page Focus** - Clean, focused 3D landing page
- **🎨 3D Interactions** - Scroll-based 3D animations and scenes
- **⚡ Performance Optimized** - Efficient 3D rendering and animations
- **📱 Responsive Design** - Works beautifully on all devices
- **🌙 Dark/Light Theme** - Built-in theme switching
- **🎭 GSAP Animations** - Smooth, professional animations
- **🔧 TypeScript** - Full type safety
- **🎨 Tailwind CSS** - Utility-first styling
## 🏗️ What's Included
### Core Components
- **HomePage** - Main landing page with 3D sections
- **LandingHero** - Hero section with 3D background
- **ScrollScene** - Scroll-triggered 3D animations
- **AdvancedScene** - Interactive 3D scenes
- **MinimalLayout** - Clean navigation layout
### 3D Features
- Three.js integration with React Three Fiber
- GSAP scroll animations
- Interactive 3D models
- Performance-optimized rendering
- Responsive 3D scenes
### Developer Experience
- TypeScript for type safety
- ESLint + Prettier for code quality
- Hot reload development
- Production-ready build
## 🚀 Quick Start
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
```
## 📁 Project Structure
```
src/
├── components/
│ ├── 3d/ # 3D components and scenes
│ ├── layout/ # Layout components
│ └── sections/ # Page sections
├── hooks/ # Custom React hooks
├── context/ # React context (theme, etc.)
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── styles/ # Global styles
└── pages/
└── HomePage.tsx # Main landing page
```
## 🎨 Customization
This template is designed to be easily customizable:
1. **3D Models** - Replace models in `/public/models/`
2. **Styling** - Modify Tailwind classes or global CSS
3. **Animations** - Adjust GSAP animations in 3D components
4. **Content** - Update text and sections in `HomePage.tsx`
5. **Theme** - Customize colors in theme context
## 🔧 Technologies
- **React 18** - Modern React with hooks
- **TypeScript** - Type-safe development
- **Three.js** - 3D graphics library
- **React Three Fiber** - React renderer for Three.js
- **GSAP** - Professional animations
- **Tailwind CSS** - Utility-first CSS
- **Vite** - Fast build tool
## 📝 License
MIT License - feel free to use for personal and commercial projects.
---
**Perfect for:** Portfolio sites, product showcases, creative agencies, and any project that needs stunning 3D visuals.