Skip to content

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.

License

Notifications You must be signed in to change notification settings

ddosnotification/sphere-chat-landing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌐 Sphere Chat Landing Page Template

Sphere Chat Version License

A modern, interactive landing page for Sphere - the next generation chat platform featuring stunning 3D animations and a sleek user interface.

Sphere Chat Preview

✨ 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 - 3D graphics
  • 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:
git clone https://github.com/ddosnotification/sphere-chat-landing.git
  1. Navigate to the project directory:
cd sphere-chat-landing
  1. Open index.html in your browser or use a local server:
# Using Python
python -m http.server 8000

# Using Node.js
npx serve
  1. 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 file for details

👏 Acknowledgments

  • Three.js documentation and examples
  • GSAP animation library
  • Modern landing page design inspiration
  • The open-source community

📧 Contact

@ddosnotification

Project Link: https://github.com/ddosnotification/sphere-chat-landing


Made with ❤️ for better web experiences

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published