it's cold outside

• 

  light mode

• 

  dark mode

it's cold outside

Inspiration

We were inspired by ambience mixers and youtube videos of Christmas ambience.

What it does

it’s cold outside allows you to explore a room full of Christmas sounds: sleigh bells, a crackling fireplace, a Christmas music box tune, a cat meowing, and more. To discover the sounds, hover over the animated objects in the room – some sounds are fleeting while others blend together to create a warm and festive Christmas spirit.

How we built it

We first designed and sketched a cozy Christmas scene with a toasty fireplace, Christmas tree, comfy armchairs, sleepy cat, twinkling Christmas lights, and a window looking out to a soft snowfall. Then we fleshed out the scene and animated it. Using react-videobg, we set the animation as the backdrop of our explorative website. We positioned cards near each animated element in the room and found audio clips that matched them. We trimmed and edited the sounds to suit our interactive site. With the help of a React hook API called use-sound, we added these sounds to the cards, which played on hover. Last, we made the cards transparent so that the sounds would be played when the user explored those areas of the room.

Challenges we ran into

1. The task of positioning cards near objects on the background animation was tedious and difficult. However, we were able to overcome this hurdle with some patience and css.
2. While drawing the background scene, the art software we were using crashed and part of our work was gone, so we had to redo what was lost.
3. Only one of us knew React before the hackathon. While one person was coding the cards and sounds into the website in React, the other tried to add a dark mode feature, but their inexperience with React made it challenging. They had a working dark/light mode toggle in Javascript, but weren't able to successfully incorporate it into the website in time.
4. The API use-sound was extremely helpful, but it took some time to figure out the mechanics of using it. After diving into the documentation, we were able to add sounds to our site.

Accomplishments that we're proud of

We're proud of our animated background scene, especially since it was our first time creating such a large piece. Experimenting with adding sounds to a React app was also exciting as we were able to enhance the sensory experience. Most importantly, we're proud that we were able to make our vision of a explorative and interactive site a reality.

What we learned

We learned how to incorporate sounds and background videos in a React app using the use-sound API and react-videobg. We also learned how to make invisible events happen on hover. Furthermore, we realized that it takes a lot of patience when working with the visual aspects of a website.

What's next for it’s cold outside

We registered a domain name, itscoldoutside.tech, but there was not enough time for the DNS propagation to take place (24 hours). In the future, we hope to implement the light and dark mode toggle, as well as make the site more responsive.

Built With

• react
• reactjs-videobg
• use-sound