"use client"; import { motion, useTransform, useMotionValue, useSpring } from "motion/react"; import Image from "next/image"; type Item = { id: number; name: string; designation: string; image: string; }; export const AnimatedTooltipMotion = () => { const x = useMotionValue(0); const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), { stiffness: 100, damping: 15, }); const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), { stiffness: 100, damping: 15, }); const items = [ { id: 1, name: "Aarav Mehta", designation: "AI Researcher", image: "/images/profile/user-1.jpg", }, { id: 2, name: "Sofia Martinez", designation: "Cloud Architect", image: "/images/profile/user-2.jpg", }, { id: 3, name: "Kenji Tanaka", designation: "Cybersecurity Analyst", image: "/images/profile/user-3.jpg", }, { id: 4, name: "Amelia Rossi", designation: "UX Strategist", image: "/images/profile/user-4.jpg", }, { id: 5, name: "Liam O’Connor", designation: "Blockchain Developer", image: "/images/profile/user-5.jpg", }, { id: 6, name: "Zara Ibrahim", designation: "Robotics Engineer", image: "/images/profile/user-6.jpg", }, ]; return (

{items.map((item) => (

{item.name}

{item.designation}

x.set(e.nativeEvent.offsetX - e.currentTarget.offsetWidth / 2) } src={item.image} alt={item.name} width={56} height={56} className="h-14 w-14 rounded-full border-2 border-white object-cover object-top transition duration-500 group-hover:z-30 group-hover:scale-105" />

))}

); };

100+ Shadcn UI Components for Modern Web Apps Built with Tailwind CSS

Component Library

BUTTONS

CARDS

TEXT

TABLES

TOOLTIP

LIST

LINKS

SLIDER

FORM

LOADER

TABS

Animated Tooltip

Animate Tooltip