An interactive mini web page exploring different shapes of Love
View Website
·
View Figma
·
Report Bug
Table of Contents
❤️ This is a small web project exploring the shapes of love.
📌 SVG images and morphing them with react-spring.
🧑💻 Design & Front-end developement by me.
This project has started from Ariana Grande - positions (Official Live Performance) by Vevo
From the lyrics, I got the idea of "versatile and diverse sides of love".
+ from the video, I got the neon-like color motifs of the stage lightings.
At first, it was very hard to come up with a nice idea for a web project. However I could find a starting point after listening to Bam Yang Gang by BIBI. Also this song's AI generated cover with the voice of the late Kim Kwang-seok helped me set the mood of this project.
With these inspirations, I went from Ariana's "Switchin' the positions for you" to "How many shapes can your love have?"
Also, positions are a lot harder to show on web. Shapes are easy. We can use svg!
Maybe somebody would wonder why it is in Japanese, but that is solely becuase I found this awesome looking font called DotGothic16 on Google Fonts. I just really wanted to use it.
UI Design was simple, the overall mood was "A mysterious mail from somewhere". That's why I added the glitches and the typewriter effects. I wanted to keep the UI as minimal and raw as possible so that users can focus more on the actual shapes.
The shapes are all svgs and are accented with shadows and gradient. It was intended to be a little similar to the neon lightings in Ariana's video. The svg paths used all have different node count so I had to interpolate in between the nodes to animate the shape changes (morph?).
It was a fun time developing because it's my first time doing something complex with svgs.
I consider myself as the advocate of love. But love does have a lot of different sides. It can be happiness, sadness, anger or something more. So with this project I wanted to create an short experience for users to think about how many shapes love may have. Also I intended the UI to be neutral, dark, and pixelated for more private and isolated mood.
I wish users would feel like they got a weird invitation and go into a secret web space to think about the two questions I ask in the intro.
Are you in love?
What is the shape of your love?
And I hope you guys love love as much as I love it 💖
I don't know if anyone wants to clone this project, but here is how.
git clone https://github.com/jujusnake/ainokatachi-web.git
npm install
npm run dev
Thank you 🙏
SVG images are from
- Figma's Blobs plugin
- Lucide Icons (with modifications)
- This awsome website https://svgsilh.com/