Building a contact form that doesn’t feel like a contact form

I wanted reaching out on the site to feel like texting a friend, not filling out a form. The iMessage widget on the About page is a small conversation: an incoming bubble asks what you want to talk about, then how to reach you, then anything else worth sharing. Each reply is a blue outgoing bubble; mine come back with a typing indicator and staggered delays so it reads like a real thread. Under the hood it’s a simple state machine (intro → contact → extra → done) with Framer Motion for bubble entrance and the three-dot typing animation. Messages auto-scroll to the bottom, and when you hover or focus the widget, page scroll locks so wheel events stay inside the chat instead of fighting the rest of the page.

The twist is what happens when the conversation ends. There’s no backend or email API — once the last answer lands, the widget assembles a mailto: link with the collected topic, contact method, and extra notes, and opens your email client with a pre-filled draft to me. That keeps the implementation lightweight (no server, no spam handling) while still turning a playful UI into something actionable. The glassy card, avatar, and bubble styling are mostly CSS and Tailwind; the behavior lives in one client component dynamically loaded on About so it doesn’t block the initial page load. It’s contact UX disguised as personality — form fields hidden inside something people already know how to use.