Intercom animated button made with vue and tailwindcss

IntercomButton.vue

<template>
  <button
    class="bg-neutral-950 rounded-full p-2 h-12 w-12 flex items-center justify-center text-white cursor-pointer"
    @click="model = !model"
  >
    <Transition
      name="chat-icon"
      enter-active-class="transition-all duration-400 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
      leave-active-class="transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]"
      enter-from-class="opacity-0 scale-0 rotate-[60deg]"
      enter-to-class="opacity-100 scale-100 rotate-0"
      leave-from-class="opacity-100 scale-100 rotate-0"
      leave-to-class="opacity-0 scale-0 rotate-[60deg]"
    >
      <UIcon
        v-if="!model"
        :name="icon || 'i-solar-chat-square-bold'"
        class="text-2xl absolute pointer-events-none"
      />
    </Transition>

    <Transition
      name="close-icon"
      enter-active-class="transition-all duration-400 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
      leave-active-class="transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]"
      enter-from-class="opacity-0 scale-0 rotate-[-60deg]"
      enter-to-class="opacity-100 scale-100 rotate-0"
      leave-from-class="opacity-100 scale-100 rotate-0"
      leave-to-class="opacity-0 scale-0 rotate-[-60deg]"
    >
      <UIcon v-if="model" name="i-lucide-x" class="text-2xl absolute" />
    </Transition>
  </button>
</template>

<script lang="ts" setup>
const model = defineModel();

defineProps<{
  icon?: string;
}>();
</script>

FYI, I make and build supersaas.dev

m/user-attachments/assets/4f9a2571-51bf-4b52-9557-9992b694fba3)

The nuxt starter kit made for developers. Over 290 developers are building with supersaas.

Purchase once and own it for life

✅ Teams/Org variant – for B2B apps
✅ Single-user variant – for B2C apps
✅ Nuxtra – a beautiful marketing website template
✅ Recipes – powerful example apps like Notes, URL Shortener, Todoist clone, File Manager, and AI Chat
✅ Beautiful UI – clean and modern out of the box
✅ Full Auth Stack – Email/password, Google, GitHub, Magic Link, Passkeys
✅ Stripe Integration – easy payments, subscriptions, upgrades
✅ Super Admin Panel – manage users, plans, and feedback
✅ Database Flexibility – Nuxthub, Postgres, or Turso - you choose