{
  "title": "Bouncing Text",
  "description": "A playful animation where characters bounce in sequence across the text.",
  "name": "gsap-bouncing-text",
  "dependencies": [
    "gsap",
    "@gsap/react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/gsap/bouncing-text.tsx",
      "type": "registry:ui",
      "content": "import { type ComponentProps, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { SplitText } from \"gsap/SplitText\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype BouncingTextProps = {\n    repeat?: boolean | number;\n} & ComponentProps<\"p\">;\n\nexport const BouncingText = ({ repeat = true, className, ...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 className={cn(\"overflow-hidden\", className)} {...props} ref={textRef} />;\n};\n"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. A playful animation where characters bounce in sequence across the text. Configurable props include: {; repeat?: boolean | number;. Relies on gsap, @gsap/react. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "gsap",
      "animation"
    ]
  }
}