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
Back to feedPost
I built a motion design learning tool called LearnMotion.
Built entirely in Wonder for the #WonderChallenge.
Whenever I came across a beautiful text animation, logo reveal, or cool social media motion, I always had the same question:
"How did they make that?"
LearnMotion lets you upload a video (or paste a YouTube link), analyzes the motion, and breaks it down into a step-by-step guide you can recreate in simple motion design tools.
The part I enjoyed most was the workflow.
I started by chatting with @Wonder, which designed the entire interface, from the upload screen to the analysis page and the final motion breakdown page. I also used Wonder's shader to add subtle movement to the background, which felt fitting for an app that's all about understanding motion.
Then I connected Claude Code through MCP, and it turned those designs into a working application.
I love how Wonder made it easy to go from describing an idea to seeing it come to life.
Here's the link to the Wonder project and the live app
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Motion Graphics Designer for Gaming Product Video
Transformed outdated, text-heavy slide drafts into high impact, motion driven presentations built to capture and hold audience attention. The goal was to replace traditional static slides with sleek visual storytelling and fluid transitions.
One of my favorite UI experiments so far.
I challenged myself to create a cinematic Pepsi landing page where the interface feels like it’s floating within the experience rather than simply sitting on top of a background.
✨ What I explored:
1. AI-generated animated backgrounds
2. Scroll-driven storytelling with multiple Pepsi products
3. Glassmorphism & frosted-glass UI
4. Smooth blur, reflections, and premium lighting
5. Framer Motion animations
6. Fully responsive design
7. Built with React, Vite & Tailwind CSS
The goal wasn’t just to build another landing page it was to create an immersive experience where motion, depth, and interaction work together to tell a story.
I’m still refining the animations and interactions, but I’m really happy with where it’s heading.
What would you improve or add?
#React #TailwindCSS #FramerMotion #UI #UX #WebDesign #Frontend #Glassmorphism #LandingPage #MotionDesign #CreativeCoding
