Windmills Green energy
Windmills Green energy
![](http://images.ctfassets.net/p6b6cn35z98r/HZA40DdeadBxqXTHWDzq5/cc32d7a3598b541a37f68b65d51ebd81/Frame_211_2x.png)
Brand
Zajno
Timeframe
2 days
Zajno role
Concept, art direction, product design, UI, UX, animation, engineeringFull-cycle product development
Awards
Awwwards x 1
CSS x 4
Internal Hackathon: making a product from scratch within two days
The Power of Sound is a web experience about the importance of green energy and its power to change – and save – our world. We made it at our first internal Hackathon at Zajno within 2 days using such technologies as HTML, CSS, GSAP and SVG animations. The result was so good that we decided to share it with the world and won Website Of The Day on CSS Design Awards.
![](http://images.ctfassets.net/p6b6cn35z98r/3L6RySmqXtFk91iMK9YKzK/044ca8694abbc3d89a7451335fbb90ff/Mask_Group_2x.png)
![](http://images.ctfassets.net/p6b6cn35z98r/r8jB71D8VwE5IFQgMOibn/83ed74c8e8a66cb64379f8c23337af78/Frame_27_2x.png)
Our planet needs alternative energy - alternative energy needs your voice
In the experience, we imagine a future where entire cities will be powered by sustainable energy sources — sound being one of them. Accordingly, visitors to our site are asked to generate electricity with their voices — and having made some noise, they are informed of how many lights they’d managed to power. Finally, they are invited to use their digital voice to raise awareness via social media.
![](http://images.ctfassets.net/p6b6cn35z98r/4uOV5rI1NRcf0R4DnhMNH8/6d6dbbfb1207c31790101269fac9eb68/Frame_24_2x.png)
![](http://images.ctfassets.net/p6b6cn35z98r/5Km8n6DO4CLW5uuOMWVNzv/2f311edd20377c5ccbc9c454e47acf7c/Frame_25_2x.png)
Every voice helps to make the change
We chose to use sound energy for several reasons. First, it is under development now and could yet turn out to be a revolutionary energy source. Second, sound and speech recognition have long been an area of our interest, so it was a nice opportunity to work with it. Finally, using voices to generate power is an analogy for raising one’s voice to generate awareness of the climate emergency. Environmental activists have changed the global agenda by speaking up – maybe we could do a little of the same.
![Windmills](http://images.ctfassets.net/p6b6cn35z98r/30OYlwf07pEeQQpIjdi9e2/f82bca3268653344c72ad7016d47dbbd/Desktop_-_119_2x.png)
“The internal Hackathon turned out to be an incredible experience that exceeded all our expectations and showed us what we are really capable of. We tried lots of new and fascinating things and even discovered new talents. It was an ultimate comfort zone escape that helped us unleash our creativity.”
Danil Goncharenko, Lead Front-end developer at Zajno
![Windmills](http://images.ctfassets.net/p6b6cn35z98r/5ym9GbDFC3hnZHhj0FPLQa/ebc31152710828c67127ed0519b65ad7/Frame_26_2x.png)
What is the result?
Website Of The Day on CSS Design Awards on July 17, 2020
10k users participated in the experience
138k lights were powered in total
Came up with the idea and the concept within 1 day
Created an MVP within 2 days of Hackathon
Made our 1st social project generating awareness of the problem
Worked with sound and speech recognition
Won 1 trophy on Awwwards and 4 on CSS Design Awards
![Windmills](http://images.ctfassets.net/p6b6cn35z98r/t6spDoDrbKCflxGDGBVzE/810091531cddf7bc3056d5ff85611cc0/Mask_Group_2x.png)
Awards & Recognitions
CSS Design
Website Of The Day
CSS Design
UI Design
CSS Design
UX Design
CSS Design
Innovation
Awwwards
Honorable Mention
![Windmills](/assets/img/lets-collaborate-visual.ec1d5.jpg)