Profile Peek

1"use client";
2 
3import { ComponentProps, ReactNode, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10type HoverProfileCardProps = Omit<ComponentProps<"div">, "content"> & {
11    trigger?: ReactNode;
12    content?: ReactNode;
13};
14 
15export const ProfilePeek = ({ trigger, content, className, ...props }: HoverProfileCardProps) => {
16    const componentRef = useRef<HTMLDivElement>(null);
17    const cardRef = useRef<HTMLDivElement>(null);
18    const triggerRef = useRef<HTMLDivElement>(null);
19    const contentRef = useRef<HTMLDivElement>(null);
20 
21    useGSAP(
22        () => {
23            const component = componentRef.current;
24            const card = cardRef.current;
25            const content = contentRef.current;
26            const trigger = triggerRef.current;
27            if (!component || !card || !content || !trigger) return;
28 
29            const timeline = gsap.timeline({
30                paused: true,
31                defaults: { ease: "power2.inOut", duration: 0.4 },
32            });
33 
34            gsap.set(card, {
35                opacity: 0,
36                scale: 0.9,
37                y: -40,
38                rotationX: -25,
39                rotationY: 25,
40                transformOrigin: "top left",
41            });
42 
43            gsap.set(content, { y: -10, opacity: 0, display: "none" });
44 
45            timeline
46                .to(content, {
47                    display: "block",
48                    duration: 0,
49                })
50                .to(component, {
51                    zIndex: 10,
52                    duration: 0,
53                })
54                .to(card, {
55                    y: 0,
56                    rotationX: 0,
57                    rotationY: 0,
58                    scale: 1,
59                    left: -16,
60                    top: -16,
61                    opacity: 1,
62                    duration: 0.6,
63                    ease: "back.out(3)",
64                })
65                .to(
66                    triggerRef.current,
67                    {
68                        scale: 1.1,
69                        duration: 0.4,
70                    },
71                    "<",
72                )
73                .to(
74                    content,
75                    {
76                        x: 0,
77                        y: 0,
78                        opacity: 1,
79                        duration: 0.3,
80                    },
81                    "-=0.4",
82                );
83 
84// … truncated