Avatar with gradient animated ring

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

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

<template>
  <div class="group/avatar relative flex items-center justify-center">
    <!-- Animated Story Ring -->
    <div class="absolute -inset-1 animate-[spin_3s_linear_infinite] rounded-full bg-linear-to-tr from-yellow-400 via-fuchsia-500 to-violet-600 opacity-75 blur-xs transition-all duration-500 group-hover/avatar:opacity-100 group-hover/avatar:blur-sm" />

    <!-- Main Avatar -->
    <Avatar class="ring-background size-10 ring-2 transition-transform duration-500 group-hover/avatar:scale-95">
      <AvatarImage :src="PIXEL" alt="User story" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  </div>
</template>