asepharyana
bf75d9deef
Vendor 50 Aceternity UI components into components/ui from the official registry (ui.aceternity.com/registry/<slug>.json), adapted for this template's stack: Tailwind v4, motion/react 13, cn util, React 19. Add a live showcase gallery (/ui + /docs/... navigation is unchanged): app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin, aurora, background-beams, bento, card-stack, card-spotlight, direction-aware-hover, encrypted-text, evervault-card, flip-words, hero-highlight, hero-parallax, infinite-moving-cards, moving-border, sparkles, tracing-beam, animated-tooltip, typewriter-effect, placeholders-and-vanish-input and friends. Toolchain stays zero-warning: vendored animation code is scoped in eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any, prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck, build, 7 vitest tests and 2 test suites all green.
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from "motion/react";
|
|
|
|
export const AnimatedTooltip = ({
|
|
items,
|
|
}: {
|
|
items: {
|
|
id: number;
|
|
name: string;
|
|
designation: string;
|
|
image: string;
|
|
}[];
|
|
}) => {
|
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
|
const springConfig = { stiffness: 100, damping: 15 };
|
|
const x = useMotionValue(0);
|
|
const animationFrameRef = useRef<number | null>(null);
|
|
|
|
const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), springConfig);
|
|
const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
|
|
|
|
const handleMouseMove = (event: any) => {
|
|
if (animationFrameRef.current) {
|
|
cancelAnimationFrame(animationFrameRef.current);
|
|
}
|
|
|
|
animationFrameRef.current = requestAnimationFrame(() => {
|
|
const halfWidth = event.target.offsetWidth / 2;
|
|
x.set(event.nativeEvent.offsetX - halfWidth);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{items.map((item) => (
|
|
<div
|
|
className="group relative -mr-4"
|
|
key={item.name}
|
|
onMouseEnter={() => setHoveredIndex(item.id)}
|
|
onMouseLeave={() => setHoveredIndex(null)}
|
|
>
|
|
<AnimatePresence>
|
|
{hoveredIndex === item.id && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20, scale: 0.6 }}
|
|
animate={{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 260,
|
|
damping: 10,
|
|
},
|
|
}}
|
|
exit={{ opacity: 0, y: 20, scale: 0.6 }}
|
|
style={{
|
|
translateX: translateX,
|
|
rotate: rotate,
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
className="absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs shadow-xl"
|
|
>
|
|
<div className="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent" />
|
|
<div className="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
|
|
<div className="relative z-30 text-base font-bold text-white">{item.name}</div>
|
|
<div className="text-xs text-white">{item.designation}</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
<img
|
|
onMouseMove={handleMouseMove}
|
|
height={100}
|
|
width={100}
|
|
src={item.image}
|
|
alt={item.name}
|
|
className="relative !m-0 h-14 w-14 rounded-full border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
};
|