Ocean Dive

• 

  Landing page

• 

  First Layer

• 

  Twilight Layer

• 

  Abyss Layer

• 

  Last Layer

💡Inspiration

There are certain standard limits of diving and everyone is not able to explore species with real experience. We unleashed the surreal experience with a sound effect for deep dive into the ocean. It provides an interactive and fun way to learn more about the giant ocean.

😃What it does

An ultimate experience like no other. Ocean Dive offers an exciting and adventurous experience to navigate through all the layers of the sea which expose a variety of species and sea creatures. The fun part about the dive is that users can explore the deepest layer and learn more about the species. The environment and interactivity excite the user to explore and learn more about this deep dive at their own pace.

🔧 How we built it

We have built this project use React JS. We have built our own custom animations using pure css. We have use particle.js to set interactive underwater background. We are dynamically changing the background colour when the user goes deeper in the website, the background get darker.

💪Challenges we ran into

We are new to react js and it was quite difficult for us in starting to build using react, but later on we have learned from tutorials and build a complete website. Changing the background color on scroll is also quite challenging as we have to write our own logic for it. Two of our members are beginners and still we built this cool project.

🙌Accomplishments that we're proud of

We only had two goals: to make it interactive and adventurous. With 44 hours to spare, we managed to create a user experience that is interactive and engaging. Throughout the development, we ensured that we all felt included and had something to contribute. This was the best theme that we have worked on and looking forward to building more of such cool hacks!

📚What we learned

We have learned about different layers and species. What we learned most of all was how to use these versatile technologies: React, SCSS and Javascript primarily! We also learned how to add animations and sound effects to species with modularized code so every time it just has to render the different images using the same function.

💭What's next for Ocean Dive

There are so many ideas that would have been amazing implementations, but we had a limited scope of time. We want to enhance user experience with 3D models of species using Aframe for VR experience and users can claim proof of participation via an exclusive NFT drop in their wallet. Live virtual experience with sound effect and minted NFT in real-time as the user engage… what ISN’T next for Ocean Dive

Built With

• css
• github
• html
• javascript
• react
• scss