https://github.com/ddosnotification/sphere-chat-landing
Modern 3D-enhanced landing page for Sphere chat platform. Features Three.js animations, glass-morphism design, and GSAP animations. Production-ready template for immersive web experiences.
https://github.com/ddosnotification/sphere-chat-landing
3d-animation chat-application css-grid css3 frontend gsap-animation landing-page modern-ui responsive-design saas-landing-page template threejs ui-design web-design webgl website-template
Last synced: 5 months ago
JSON representation
Modern 3D-enhanced landing page for Sphere chat platform. Features Three.js animations, glass-morphism design, and GSAP animations. Production-ready template for immersive web experiences.
- Host: GitHub
- URL: https://github.com/ddosnotification/sphere-chat-landing
- Owner: ddosnotification
- License: mit
- Created: 2024-11-23T19:18:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-25T14:36:07.000Z (over 1 year ago)
- Last Synced: 2025-04-04T09:44:44.888Z (over 1 year ago)
- Topics: 3d-animation, chat-application, css-grid, css3, frontend, gsap-animation, landing-page, modern-ui, responsive-design, saas-landing-page, template, threejs, ui-design, web-design, webgl, website-template
- Language: CSS
- Homepage: https://ddosnotification.github.io/sphere-chat-landing/
- Size: 232 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌐 Sphere Chat Landing Page Template
> A modern, interactive landing page for Sphere - the next generation chat platform featuring stunning 3D animations and a sleek user interface.
## ✨ Features
- **Interactive 3D Background** - Engaging Three.js powered animations
- **Modern Design** - Clean, minimalist aesthetic with gradient accents
- **Responsive Layout** - Seamlessly adapts to all screen sizes
- **Smooth Animations** - GSAP-powered scroll animations and transitions
- **Performance Optimized** - Hardware-accelerated animations and efficient rendering
- **Cross-Browser Compatible** - Works flawlessly across all modern browsers
## 🛠️ Built With
- HTML5
- CSS3
- JavaScript
- [Three.js](https://threejs.org/) - 3D graphics
- [GSAP](https://greensock.com/gsap/) - Animations
- Custom shader materials
- Modern CSS features including:
- CSS Grid
- Flexbox
- Custom Properties
- Backdrop Filter
- CSS Animations
## 🏗️ Project Structure
```
sphere-chat-landing/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
├── assets/
│ └── images/
├── preview/
│ └── screenshot.png
└── README.md
```
## 🚦 Getting Started
1. Clone the repository:
```bash
git clone https://github.com/ddosnotification/sphere-chat-landing.git
```
2. Navigate to the project directory:
```bash
cd sphere-chat-landing
```
3. Open `index.html` in your browser or use a local server:
```bash
# Using Python
python -m http.server 8000
# Using Node.js
npx serve
```
4. Visit `http://localhost:8000` in your browser
## 📱 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 🎨 Color Palette
| Color | Hex Code | Usage |
|------------|-----------|--------------------------|
| Primary | `#6366F1` | Main brand color |
| Secondary | `#14B8A6` | Accents and highlights |
| Accent | `#F43F5E` | Call-to-action elements |
| Dark | `#1E293B` | Text and backgrounds |
| Light | `#F8FAFC` | Background and text |
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## 👏 Acknowledgments
- Three.js documentation and examples
- GSAP animation library
- Modern landing page design inspiration
- The open-source community
## 📧 Contact
[@ddosnotification](https://x.com/ddosntfcion)
Project Link: [https://github.com/ddosnotification/sphere-chat-landing](https://github.com/ddosnotification/sphere-chat-landing)
---
Made with ❤️ for better web experiences