Avatar_Hover_Card

Smooth expanding avatar profile card

The Avatar Hover Card is a sophisticated UI component designed to save screen real estate while providing rich user information on interaction. Initially appearing as a standard circular avatar, it smoothly expands into a full profile card when hovered, revealing text content and calls to action. Key Features: Smart Hover Interaction: Built with Framer Motion , the card uses physics-based spring transitions to expand and collapse naturally, ensuring a high-quality feel. Flexible Text Layers: Instead of rigid "Name" and "Job" fields, this component uses a Text Layer Array . You can add as many lines of text as needed, reorder them, and style each line individually (Font, Color, Spacing) directly from the Framer sidebar. Dynamic Button System: Add multiple action buttons (e.g., "Follow", "Message", "Portfolio"). Each button is fully customizable with its own link, background color, text color, and typography settings. Visual Variants: Includes three built-in visual styles to match any brand: Default: Clean, white card with subtle shadows. Glass: A modern frosted glass effect with blur and transparency. Bordered: A flat, outlined style for minimalist designs. Responsive Sizing: Comes with four preset sizes (SM, MD, LG, XL) that scale the avatar and the expanded card dimensions proportionally. How to Use: Drag the component onto your canvas. Image: Upload a profile picture or use the default placeholder. Text: Use the "Text Content" array to add the user's name, handle, and bio. Customize the font weight and color for hierarchy. Buttons: Use the "Buttons" array to add links. You can style the primary action with a solid color and secondary actions with a lighter background. Style: Choose your Size and Variant to fit your layout. Would you like me to create a "Grid" wrapper component so you can easily drop these into a team page layout?

Smooth expanding avatar profile card