Interactive E-Commerce Product Card with Liquid Wave TransitionsInteractive E-Commerce Product Card with Liquid Wave Transitions
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
Meet Shop Card, my #svgatorchallenge entry: an e-commerce UI element where every tap feels like a tiny β€œyes” πŸ›οΈ
Swipe through the photos, pick a color and size, add to cart. Then a soft liquid wave rolls in, the card switches to dark mode πŸŒ™ and a new product appears: from a satin dress to a minimalist watch, with its own brand, colors and sizes.
The pack, each one in its own link πŸ”— ✨ Liquid wave transition (the showcase) -> SHOWCASE β˜€οΈ Light mode template, looping -> LIGHT MODE πŸŒ™ Dark mode template, looping -> DARK MODE πŸ›’ Interactive Add to cart button: click to add -> ADD BUTTON ❀️ Interactive Like button -> LIKE BUTTON
Built as a ready-to-use e-commerce template 🧩: every layer is labeled EDIT TEXT / IMAGE / COLOR and photos auto-fit their frame. Drop in your own product and the motion does the rest.
Would love to hear what you think! ✨
#svgatorchallenge #ecommerce #uielement #uidesign #motiondesign #microinteractions
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