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 ๐จ๏ธ
Top comments (13)
Wow, your Heartbeats of Love project is absolutely stunning! ๐๐ I love how you've captured the essence of love through creative heart animations and interactive phases. It truly brings the story to life!
I would be thrilled if you could check out my submission and share your thoughts: My Submission Link ๐ฅฐโจ
Thank you ๐
I'll check out yours .
Wow, this is such an incredible project!
Thank you ๐ ๐
Welcome ๐
I'm a fan of your work !!
The website work, the page written, and the setting of the page with cute gifs, etc
I like your page!!
Thank you โบ๏ธ๐
Btw, page written?- the message in each of the phases?
Priya just fell in love with your work ๐
๐
More like just a person who compliments generously ๐
When an amazing artist & a smart coder are in the same person. This is just so so good. Keep going !!
Not an artist ๐ , but sincere thank you ๐โบ๏ธ
Wow! Greate work.
Thank you Hirushi ๐