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
A three-step booking flow built around clear feedback and preserved context with a few design decisions ๐:
1๏ธโฃ ๐ฆ๐๐ฎ๐ฏ๐น๐ฒ ๐น๐ฎ๐๐ผ๐๐: one container across availability, details, and confirmation.
2๏ธโฃ ๐ฃ๐ฟ๐ฒ๐๐ฒ๐ฟ๐๐ฒ๐ฑ ๐ถ๐ป๐ฝ๐๐๐: Back retains your details and selected time.
3๏ธโฃ ๐๐ถ๐ฟ๐ฒ๐ฐ๐๐ถ๐ผ๐ป๐ฎ๐น ๐บ๐ผ๐๐ถ๐ผ๐ป: forward and backward slides communicate navigation.
4๏ธโฃ ๐๐ผ๐ฐ๐๐๐ฒ๐ฑ ๐ณ๐ฒ๐ฒ๐ฑ๐ฏ๐ฎ๐ฐ๐ธ: selected times flip; changed dates fade.
5๏ธโฃ ๐ฃ๐ฎ๐ฐ๐ฒ๐ฑ ๐ฐ๐ผ๐ป๐ณ๐ถ๐ฟ๐บ๐ฎ๐๐ถ๐ผ๐ป: sequential reveals, selective typewriting, and reading pauses.
6๏ธโฃ ๐๐ฐ๐ฐ๐ฒ๐๐๐ถ๐ฏ๐น๐ฒ ๐ถ๐ป๐๐ฒ๐ฟ๐ฎ๐ฐ๐๐ถ๐ผ๐ป๐: visible focus, animated validation, and reduced-motion support.
Built with React, shadcn/ui, and Motion
Inspired by Cal.com
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
โข Oct 14
Every modern website needs a Wall of Love, yet SVGatorโs template gallery didnโt have a single infinite testimonial marquee. We filled that gap with a production-ready, dual-row continuous marquee featuring smooth counter-directional drift and realistic rating badges.
What makes this special is that I did not touch the editor or move a single keyframe. This entire template was designed, structured, and animated 100% autonomously by an AI agent using SVGatorโs MCP server. The agent created the assets, configured the hierarchy, and calibrated the infinite mathematical loops entirely through MCP tool calls.
The motion engine is completely decoupled from the design. In under three minutes, the exact same engine transforms from an obsidian SaaS dark mode into an artisan bakery aesthetic with zero timeline adjustments. It is the ultimate proof of both template reusability and the power of SVGator MCP automation.
Garv, you've been busy! And this one runs smooth as anything ๐ค
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.
โข Oct 14
Loved this so much!
๐๐-๐๐จ๐ฐ๐๐ซ๐๐ ๐๐๐ซ๐๐๐ซ ๐๐ก๐จ๐ฉ ๐๐จ๐จ๐ค๐ข๐ง๐ ๐๐ฎ๐ญ๐จ๐ฆ๐๐ญ๐ข๐จ๐ง
๐๐ซ๐จ๐ฃ๐๐๐ญ ๐๐ฏ๐๐ซ๐ฏ๐ข๐๐ฐ
I built an end-to-end AI-powered booking and customer experience system for a barber shop using n8n, AI Voice Agents, Google Calendar, CRM, WhatsApp/SMS, and a real-time dashboard.
๐๐ก๐ ๐๐ซ๐จ๐๐ฅ๐๐ฆ
The business was losing opportunities through missed calls, manual scheduling, booking conflicts, slow follow-ups, and repetitive administrative work.
๐๐ก๐ ๐๐จ๐ฅ๐ฎ๐ญ๐ข๐จ๐ง
The AI Voice Agent handles customer calls, understands booking requests, checks live barber availability, and schedules appointments automatically. n8n manages the complete workflow, updates CRM records, sends confirmations and reminders, and keeps customer data synchronized across systems.
๐๐ฎ๐ฌ๐ข๐ง๐๐ฌ๐ฌ ๐๐๐ฅ๐ฎ๐
The automation helps reduce missed booking opportunities, prevent double-bookings, lower administrative workload, improve response times, and create a smoother customer experience.
๐๐ฎ๐ฌ๐ข๐ง๐๐ฌ๐ฌ ๐๐ฆ๐ฉ๐๐๐ญ
The owner gains real-time visibility into appointments, staff availability, customer activity, and revenue, while staff can focus more on serving customers instead of managing bookings manually.
๐๐๐ฌ๐ฎ๐ฅ๐ญ: ๐ ๐ฆ๐จ๐ซ๐ ๐๐๐๐ข๐๐ข๐๐ง๐ญ, ๐ฌ๐๐๐ฅ๐๐๐ฅ๐, ๐๐ง๐ ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ๐๐ซ-๐๐จ๐๐ฎ๐ฌ๐๐ ๐๐๐ซ๐๐๐ซ ๐ฌ๐ก๐จ๐ฉ ๐ฉ๐จ๐ฐ๐๐ซ๐๐ ๐๐ฒ ๐ฉ๐ซ๐๐๐ญ๐ข๐๐๐ฅ ๐๐ ๐๐ฎ๐ญ๐จ๐ฆ๐๐ญ๐ข๐จ๐ง.
โข 2d
Booking conflicts are the bit I'd test hardest. What does the voice agent do when two people ask for the same barber and slot within a minute of each other?