We had an assignment in dev class, make a futuristic HUD. I had no idea of what to do at first so I added a constraint to myself, make it minimalistic too. I went for the black & white approach. I wanted to make it as beautiful as I could with only those two colors. The goal was also to show that we could do complex animation. I didn't want to make too much animation as I feel it could be overbearing. So I tried to keep it simple, but also interesting.
- A resolution of at least 1280 x 720 px.
- A modern browser (Chrome, Edge, Firefox & Safari).
- A functioning mouse.
- Rain effect : Make it rain ! You can change the speed of the wind in the menu.
- Ripple effect : Make it ripple ! You can change the size of the ripple in the menu.
- Wave effect : Make it wave ! All right, it's not really a wave but I had no idea of how to name it.. you can have either an animation or a hover effect, you can change that in the menu.
- Cube effect : Make it square ! It's the 3-d cube that we've seen in class, nothing new, except that you can have two.. so it's kinda better.
- The menu : By clicking the right arrow, the menu appears. There's is a lot of option that you can test.
- The main HUD follows your mouse !
- It is responsive until a certain resolution, then, a little message appears.
- The rain drops are generate in js at launch, that's why we have a loading screen, just for the drops to fall down.
I used the Ailerons typeface for this project.
You can go see the project on my website.
See on github.