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?
Vrny Studios
