This is a submission for Frontend Challenge - February Edition, CSS Art: February.
Inspiration
Call me sentimental, but I've always been captivated by the essence of love since forever. This project is a heartfelt reflection of that passion. I wanted to create something simple yet profound—a beating heart. But a solitary heartbeat felt too plain, so I infused it with an audio component and added different phases: the steady rhythm of normalcy❤️, the quickened pace upon seeing a crush💓, the exhilaration of excitement, and the flutter when love performs its magic💗, or you know, when they do ☺️
Demo
The website is live at:- A Beating Heart
Or you can watch it in action here:-
Journey
Reflecting on this journey fills me with joy, it has been full of learning, and I got stuck many times, but it has been worth it. Here's a snapshot of the process:
- Learning to craft a heart shape ❤️: I discovered that even a minor adjustment could completely alter its form.
- Animating the heartbeat 💓: I brought the heart to life with rhythmic pulses.
- Enhancing with sound 🔊: I synchronized audio to match the heartbeat, enriching the sensory experience.
- Interactive phases 🎯: Users can click on different hearts to experience various emotional states.
- Enjoying the process 🎉: This project was a delightful endeavour, and I'm proud of its outcome, the learning, the obstacles, everything.
So, that's it!
If you're still here, Thank you ☺️🙏🏻❣️.
Please share your thoughts, feedback, and suggestions in the comment section below 🗨️
