Avatar with ring animation

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <div class="relative w-fit">
    <Avatar class="ring-offset-background animate-pulse ring-2 ring-green-500 ring-offset-2">
      <AvatarImage :src="PIXEL" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <span class="border-background absolute -right-1 -bottom-1 size-3 rounded-full border-2 bg-green-500" />
  </div>
</template>