For this challenge I decided to spread Christmas cheer by creating a website that uses audio to distort the movie picture. Moreover, my selection of music and images strove to encompass as many movie genres and cultures as posssible. The genres encompass thriller, action, family, drama, alien and comedy. If you enjoyed Money Heist then Christmas Heist will give you a run for your money.
Huge Note: Because I am using very state of the art live renders some film distortions on phones and low-end machines will break or not work. Try another one. Notwithstanding, based on my extensive testing most computers can run the website from GitHub Pages effortlessly. Very modern phones can also handle it relatively well along with a good number of tablets. For the really brave rig a HDMI set up in a store or house and play the animations. Your event or store will be lit. 🔥
The mechanism of the project innovates on the concept of a pre-screening and start of a movie. Using keyframing and Javascript the movie display on the first scene is the studio that is making the movie. The names encompass both actual and fictional studios. The second scene displays the executive producer of the work. The third scene is the most exciting of all.
It displays the tag for the movie and beneath it the movie name. Beneath the movie name is the credits for the movie. The film image is an image that matches the movie name. Moreover, the image pulsates in different ways based on the genre and the vibe being aimed for. At the top left is a list of numbers from 1 to 8 which when clicked navigate among the 8 movies that I pioneered. At the middle is a sound icon that allows the music to be paused and played. Pausing causes the vibrations and pulsations to stop. The project is entirely a front-end implementation.
Due to the nature of film posters and the goal of the project the website targets screens with 16:9 and 16:10 aspect ratios- read iPads, tablets, computers, televisions, e.t.c. On phones it looks decent but not something that will blow your mind. I have also deployed the project on GitHub Pages to give a working representation of what I have worked on.
The project can be executed locally on localhost and projected to a television or used as a screensaver on a computer. Nonetheless, the target use is displaying it on a television during Christmas for it to set the vibe in the home. It can also be used without any audio and played in a store since the pulsations are really mesmerising.
For those who like more energetic and action film concepts navigate towards the end of the 8 film concepts. Here is an example of what to expect:
For those who desire a more calming and homely vibe the first ones are just your cup of tea:
