A little interactive experiment for Verdant 🌱 Writing unique code for animations makes iterating...A little interactive experiment for Verdant 🌱 Writing unique code for animations makes iterating...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
A little interactive experiment for Verdant 🌱
Writing unique code for animations makes iterating on reactive micro-interactions so much smoother. It completely transforms how a brand narrative feels in the browser.
Sahil 's avatar
great work...
Damilola's avatar
Great one, Sofiia!
Esther 's avatar
Great job
Sujon's avatar
Cool work !
Maty's avatar
Hand-coding the animations instead of leaning on a template library really shows here, the vine movement feels organic rather than looped. How much of that motion did you sketch out ahead of time versus just tweak live in the browser until it felt right?
Sofiia's avatar
Thanks so much! I sketched out the general path and anchor points early on, but about 70% of the magic came from tweaking it directly in the browser. Physics, easing, and responsiveness never quite feel the same in a static sketch or timeline tool—you really have to feel how the...
DESH's avatar
Incredible creativity! 💫
Sandaruwani's avatar
love the interactive part.
Picto's avatar
Picto Design Studio logo
Nice work👏🔥🔥
Saira 's avatar
Interested
Nirali's avatar
Rongali's avatar
Impressive work, Sophiia. It looks highly unique.
Ngozichukwuka Julie's avatar
I love the hover experience 💚
Ali's avatar
teach me bro
Diego's avatar
The vine actually feels alive here instead of just decorative, which is rare for a loading animation. What's the render cost of something like this, does it stay light enough for mobile or is it more of a desktop showpiece?
Sofiia's avatar
Thanks! The hover state and cursor interaction were designed specifically for desktop since you lose those cursor dynamics on mobile.
But performance-wise, mobile was top of mind: the experience shifts to touch/tap feedback without draining battery or dropping below 60fps.
Diego's avatar
Swapping in touch/tap feedback instead of just disabling the interaction on mobile is the harder route but the right one. Did you prototype that touch version separately from the start, or was it more a case of stripping the desktop interaction down until it held steady at 60fps?
Mark's avatar
Only the 'a' breaks face in the wordmark, so the organic idea lives in one letter and the rest of the type stays quiet enough to sit over a moving background.
Folorunsho's avatar
Yurii's avatar
Daxesh's avatar
I like the font a, the way you style it. loved the design concept
Iván's avatar
Smooth animation, beautiful!
Hatypo's avatar
Nice work
Joyjit's avatar
Nice and unique experiment. It solves the purpose. But what is idea behind the italic 'a' on verdant? Please explain.
Sofiia's avatar
Thanks! The italicized ‘a’ serves as both a typographic anchor and an interactive catalyst. Visually, breaking the baseline rhythm of 'verdant' creates an intentional moment of organic tension—a subtle nod to nature and growth not following a rigid geometric grid.
Zara's avatar
Amazing!
Afnan 's avatar
Goood work
Zulker Naeen's avatar
Great work
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started