{
  "title": "Bouncing Text",
  "description": "A playful animation where characters bounce in sequence across the text.",
  "name": "motion-bouncing-text",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/bouncing-text.tsx",
      "type": "registry:ui",
      "content": "import { type HTMLMotionProps, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype BouncingTextProps = {\n    repeat?: boolean | number;\n    children: string;\n} & Omit<HTMLMotionProps<\"p\">, \"children\">;\n\nexport const BouncingText = ({ repeat = true, children, className, ...props }: BouncingTextProps) => {\n    const repeatCount = repeat === true ? Infinity : repeat === false ? 0 : repeat;\n    const text = typeof children === \"string\" ? children : String(children || \"\");\n    const words = text.split(\" \");\n    let charIndex = 0;\n\n    return (\n        <motion.p className={cn(\"overflow-hidden\", className)} {...props}>\n            {words.map((word, wordIdx) => (\n                <span key={wordIdx} style={{ display: \"inline-block\", whiteSpace: \"nowrap\" }}>\n                    {word.split(\"\").map((char, charIdx) => {\n                        const currentIndex = charIndex++;\n                        return (\n                            <motion.span\n                                key={charIdx}\n                                style={{ display: \"inline-block\" }}\n                                initial={{ y: -200, rotate: 0 }}\n                                animate={{\n                                    y: [-200, 0, 0, 0, -200],\n                                    rotate: [0, -10, 0, 0, 0],\n                                }}\n                                transition={{\n                                    duration: 3,\n                                    times: [0, 2 / 6, 3 / 6, 4 / 6, 1],\n                                    ease: [\"backOut\", \"backOut\", \"linear\", \"backIn\"],\n                                    repeat: repeatCount,\n                                    repeatType: \"loop\",\n                                    delay: currentIndex / 8,\n                                }}>\n                                {char}\n                            </motion.span>\n                        );\n                    })}\n                    {wordIdx < words.length - 1 && <span style={{ display: \"inline-block\" }}>&nbsp;</span>}\n                </span>\n            ))}\n        </motion.p>\n    );\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;; children: string;. Relies on motion. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "motion",
      "animation"
    ]
  }
}