Dino Luzzi Website

Buy Dino Screen with tilting bottl
Dino Car screen

Inspiration

Our website style was primarily inspired by modern UI trends that often mix together flat and 3d elements. We thought we could put our expertise to use by giving the Dino Luzzi website a fresh new look.

What it does

The website highlights the main features of Dino Luzzy Energy Drink in a readable format while engaging the user through the inclusion of interactive 3d elements. The third section of the website allows the user to control the Dino Luzzi racecar using the scroll wheel to learn more about the energy drink and the brand behind it.

How we built it

We began the hackathon by brainstorming different ways we could make the Dino Luzzi site more interactive and fun. We considered ideas such as personality quizzes or a Pepsi-Man style game but ultimately landed on the idea of a modern website with an interactive section where the user could control the iconic Dino Luzi racecar.

We knew we were going to build the website using React and through research online we decided on using NextJS, React-Three-Fiber, TailwindCSS, and Framer-Motion to allow us to add 3d interactive elements to the website.

First, we sketched out the website layout on paper and blocked out the pages using React. After that we spent the rest of the time styling the website and getting the 3d models working correctly.

Challenges we ran into

The biggest challenge we faced was, unexpectedly, getting the website scrolling to work. We wanted the webpage to move in sections rather than continuously to create visual interest and we wanted the user to be able to transition seamlessly between the scroll wheel navigating the webpage to the scroll wheel controlling the car and vice versa. Additionally, having two separate 3d contexts led to performance and navigational issues that took many hours to sort out.

Accomplishments that we're proud of

We are most proud of getting through many sticky moments where we weren't sure if we would be able to solve a problem in time, particularly making the custom scrolling motion to work correctly. In addition, this was all of our first times working with 3d web technologies so there was a large knowledge gap that needed to be crossed to get the project done in time and we are now much more comfortable working with these frameworks.

What we learned

The biggest skill we learned through this hackathon was how to work effectively as a team, particularly under a strict deadline and stressful circumstances. And, of course, we learned more about the Dino Luzzi brand and its racing team than we had ever known before.

What's next for Dino Luzzi Website

The first thing we would implement is lazy loading throughout the website to make the UI even more responsive and smooth. We would also build out additional pages of information to give the customer deeper insight into the energy drink. One feature we didn't have time to implement was making the car drive along a curved path to wind around the content instead of a straight one going through the middle.