{
    "name": "bouncing-text",
    "title": "Bouncing Text",
    "description": "A playful animation where characters bounce in sequence across the text.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/bouncing-text.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/bouncing-text.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { SplitText } from \"gsap/SplitText\";\n\ntype BouncingTextProps = {\n    repeat?: boolean | number;\n} & ComponentProps<\"p\">;\n\nexport const BouncingText = ({ repeat = true, ...props }: BouncingTextProps) => {\n    const textRef = useRef<HTMLParagraphElement | null>(null);\n\n    useGSAP(\n        () => {\n            if (!textRef.current) return;\n            let bounceCount = 0;\n            const bounceChars = new SplitText(textRef.current, { type: \"words,chars\" }).chars;\n            bounceChars.forEach((el) => {\n                const tl = gsap.timeline({ repeat: repeat === true ? -1 : repeat === false ? 0 : repeat });\n                tl.to(el, {\n                    duration: 0,\n                    y: -200,\n                });\n                tl.to(el, {\n                    duration: 2,\n                    y: 0,\n                    rotate: -10,\n                    ease: \"bounce\",\n                });\n                tl.to(el, {\n                    duration: 1,\n                    y: 0,\n                    rotate: 0,\n                    ease: \"bounce\",\n                });\n                tl.to(el, {\n                    duration: 2,\n                    y: -200,\n                    rotate: 0,\n                    delay: 1,\n                    ease: \"elastic\",\n                });\n                tl.delay(bounceCount / 8);\n                bounceCount++;\n            });\n        },\n        { scope: textRef },\n    );\n\n    return <p {...props} ref={textRef} />;\n};\n"
        }
    ]
}