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 designed and built Agent Workflow, a Framer code component that shows how an AI agent works in one animated block.
The problem: AI products are hard to explain. “How it works” sections are usually static diagrams that visitors scroll past.
What I built: A live pipeline. A trigger fires, a glowing pulse travels along curved connectors, each step goes Waiting → Running → Done, and the result card appears. Then it loops.
Details:
• React + Framer Motion, written in TypeScript
• Over 30 settings in the properties panel: steps, 14 icons, labels, colors, font, speed, autoplay and play-on-scroll
• Responsive: a horizontal flow on desktop, a vertical timeline on mobile
• Accessible: respects reduced-motion settings
• Light and dark themes
It’s free on the Framer Marketplace: https://www.framer.com/marketplace/components/agent-workflow/
Available for work: Framer websites, custom code components and AI product landing pages. Message me here on Contra or email asadhussainsyedi@gmail.com.
Loved this so much!
Thank You!
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
Related posts
A grid doesn't have to feel rigid.
With Bento Card, structure and interaction work together.
The grid keeps information organized, while subtle movement adds depth and personality without disrupting the layout.
It's not about making every card move.
It's about making a structured interface feel less static.
Clear structure. A little more character.
Nice Bro!
Another exciting project wrapped up! ✨
This time, we worked on Olympian by Design – a premium one-on-one coaching brand focused on personal transformation and high performance.
Our goal was to create more than just a beautiful website. We wanted the entire client journey to feel connected – from the first landing page visit to purchasing the program and going through the coaching experience.
We designed three custom pages from scratch, built them in Kajabi, created a branded member area, set up the coaching program, and refreshed the app with new onboarding screens.
All wrapped in a bold, dark, luxury-inspired design.
Because great design shouldn't stop at checkout. It should follow the client through the entire experience.
Great project
Our Peak3 website build covered 17 page templates and six CMS collections. At that scale, the questions about publishing deserve as much attention as the finished pages.
A blog post, a whitepaper and a careers entry need different information. Making them editable is only part of the design problem. The person adding the next entry also needs to understand what is missing and what happens when they publish it.
Here’s a hypothetical review I’d run before a CMS handoff: create a whitepaper entry, add the title and cover, then leave out the download file.
Does the editor flag the missing file? Can someone preview what the visitor will see? If the entry can still be published, does it create a download button that leads nowhere?
I’d use that test to decide which fields must be required and which incomplete states need an explanation.
Beautifully executed work
