Avatar Quick Actions

Installation

Usage

import AvatarQuickActions from "@/components/ruixen/avatar-quick-actions";
import { MessageCircle, Phone, UserPlus } from "lucide-react";
 
export default function App() {
  return (
    <AvatarQuickActions
      avatarSrc="/avatar.jpg"
      avatarFallback="JD"
      items={[
        { icon: <MessageCircle className="size-3.5" />, label: "Message" },
        { icon: <Phone className="size-3.5" />, label: "Call" },
        { icon: <UserPlus className="size-3.5" />, label: "Follow" },
      ]}
    />
  );
}

Props

Item Structure

interface AvatarQuickActionsItem {
  icon: ReactNode; // Icon element to display
  label: string; // Name shown below action on hover
  onClick?: () => void; // Click handler
}

Features

• Orbital Bloom: Actions spring outward from the avatar center with staggered timing (40ms per action)
• Focus Dim: Non-active actions fade to 50% opacity, drawing the eye to the focused action
• Avatar Contraction: Avatar breathes down to 0.92x when releasing actions, signaling state change
• Orbit Ring: Subtle circular guide springs in to connect the action positions
• Label Reveal: Hovering an individual action springs its label into view below
• Proportional Scaling: Orbit radius, action size, container — all derived from size
• Zero Portals: No tooltip, no popover — actions exist in the same spatial plane as the avatar
• Fallback Initials: Shows first letter of fallback text when image fails to load