Soul: A 3D Scrolling Site

Soul is an immersive, 3D scrolling website that offers a unique journey of reflection and inspiration. As you scroll, you'll discover beautifully crafted lines that resonate with the essence of life, touching your heart and soul, all while exploring a captivating 3D space environment.

Features

• 3D Scrolling Experience: Utilizes Three.js to create a captivating 3D background that responds to user scrolling.
• Interactive 3D Elements: Includes various 3D objects like a torus, planets, stars, a satellite, and a rocket.
• Dynamic Camera Movement: Camera position and rotation change based on scroll position.
• Inspirational Quotes: Features a collection of thought-provoking quotes designed to inspire and enlighten.
• Responsive Design: Adapts seamlessly to various screen sizes, ensuring a great experience on both desktop and mobile devices.
• Background Music: Includes an option to play ambient music, enhancing the overall atmosphere of the site.
• Custom Typography: Uses a combination of custom fonts to create a visually appealing and unique typographic style.

Technologies Used

• HTML5
• CSS3
• JavaScript
• Three.js for 3D graphics and animations
• Custom fonts from Adobe Typekit

Getting Started

To run this project locally:

1. Clone the repository
2. Install dependencies (if using a package manager)
3. Open index.html in your browser

Note: For the best experience, use a modern web browser with WebGL support.

Project Structure

• index.html: Main HTML file
• style.css: CSS styles for the project
• main.js: JavaScript file for 3D background, animations, and interactions
• Images/: Directory containing texture images and other assets
• music.mp3: Background music file

Key JavaScript Features

• Scene setup using Three.js
• Creation of various 3D objects (torus, planets, stars, satellite, rocket)
• Texture mapping for realistic object appearances
• Dynamic lighting with point and ambient lights
• Camera movement tied to scroll position
• Animation loop for continuous rendering and object rotations
• Background music toggle functionality

Customization

Feel free to modify the 3D elements, textures, colors, or quotes to suit your preferences. The main JavaScript file (main.js) contains the logic for creating and animating the 3D scene, which can be adjusted to change the visual experience.

Contributing

Contributions, issues, and feature requests are welcome. Feel free to check issues page if you want to contribute.

P.S - Those lines are written by me 😊

Screenshot

---