Profile Peek

Hover an avatar to peek a card with name + detail. AnimatePresence animates the card up from behind the avatar.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Profile PeekHover an avatar to peek a card with name + detail. AnimatePresence animates the card up from behind the avatar.

"use client";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

type ProfilePeekProps = {
  avatarContent?: React.ReactNode;
  name?: string;
  detail?: string;
};

export function ProfilePeek({
  avatarContent = "A",
  name = "Anthony S.",
  detail = "Builder",
}: ProfilePeekProps) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      className="mp-profile-peek"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className="mp-profile-peek-avatar">{avatarContent}</div>
      <AnimatePresence>
        {hovered && (
          <motion.div
            className="mp-profile-peek-card"
            initial={{ opacity: 0, y: 8, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 8, scale: 0.96 }}
            transition={{ duration: 0.18, ease: "easeOut" }}
          >
            <span className="mp-profile-peek-name">{name}</span>
            <span className="mp-profile-peek-detail">{detail}</span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
avatarContent	ReactNode	"A"	Avatar contents (initials, image, etc.)
name	string	"Anthony S."	Name shown in peek card
detail	string	"Builder"	Detail line in peek card