{
    "name": "profile-peek",
    "title": "Profile Peek",
    "description": "Hover to peek profile with smooth reveal, right from the image.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/profile-peek.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/profile-peek.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, ReactNode, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype HoverProfileCardProps = Omit<ComponentProps<\"div\">, \"content\"> & {\n    trigger?: ReactNode;\n    content?: ReactNode;\n};\n\nexport const ProfilePeek = ({ trigger, content, className, ...props }: HoverProfileCardProps) => {\n    const componentRef = useRef<HTMLDivElement>(null);\n    const cardRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useGSAP(\n        () => {\n            const component = componentRef.current;\n            const card = cardRef.current;\n            const content = contentRef.current;\n            const trigger = triggerRef.current;\n            if (!component || !card || !content || !trigger) return;\n\n            const timeline = gsap.timeline({\n                paused: true,\n                defaults: { ease: \"power2.inOut\", duration: 0.4 },\n            });\n\n            gsap.set(card, {\n                opacity: 0,\n                scale: 0.9,\n                y: -40,\n                rotationX: -25,\n                rotationY: 25,\n                transformOrigin: \"top left\",\n            });\n\n            gsap.set(content, { y: -10, opacity: 0, display: \"none\" });\n\n            timeline\n                .to(content, {\n                    display: \"block\",\n                    duration: 0,\n                })\n                .to(component, {\n                    zIndex: 10,\n                    duration: 0,\n                })\n                .to(card, {\n                    y: 0,\n                    rotationX: 0,\n                    rotationY: 0,\n                    scale: 1,\n                    left: -16,\n                    top: -16,\n                    opacity: 1,\n                    duration: 0.6,\n                    ease: \"back.out(3)\",\n                })\n                .to(\n                    triggerRef.current,\n                    {\n                        scale: 1.1,\n                        duration: 0.4,\n                    },\n                    \"<\",\n                )\n                .to(\n                    content,\n                    {\n                        x: 0,\n                        y: 0,\n                        opacity: 1,\n                        duration: 0.3,\n                    },\n                    \"-=0.4\",\n                );\n\n            const onMouseEnter = () => {\n                timeline.play();\n            };\n\n            const onMouseLeave = () => {\n                timeline.reverse();\n            };\n\n            trigger.addEventListener(\"mouseenter\", onMouseEnter);\n            component.addEventListener(\"mouseleave\", onMouseLeave);\n\n            return () => {\n                trigger.removeEventListener(\"mouseenter\", onMouseEnter);\n                component.removeEventListener(\"mouseleave\", onMouseLeave);\n            };\n        },\n        { scope: componentRef },\n    );\n\n    return (\n        <div {...props} ref={componentRef} className={cn(\"relative z-0 perspective-midrange\", className)}>\n            <div ref={cardRef} className=\"absolute transform-3d\">\n                <div ref={contentRef} style={{ display: \"none\" }}>\n                    {content}\n                </div>\n            </div>\n\n            <div className=\"relative\" ref={triggerRef}>\n                {trigger}\n            </div>\n        </div>\n    );\n};\n"
        }
    ]
}