{
  "title": "Squash Text",
  "description": "Characters bounce and squash into place with playful, dynamic energy.",
  "name": "motion-squash-text",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/squash-text.tsx",
      "type": "registry:ui",
      "content": "import { type HTMLMotionProps, type Variants, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype SquashTextProps = {\n    repeat?: boolean | number;\n} & HTMLMotionProps<\"div\">;\n\nconst childVariants: Variants = {\n    initial: { opacity: 0, y: -100, scaleX: 1, scaleY: 1, rotate: 0 },\n    animate: ({ i, repeat, charsLen }: { i: number; repeat: boolean | number; charsLen: number }) => {\n        const progress = i / (charsLen - 1 || 1);\n        const staggerDelay = (1 - Math.cos((progress * Math.PI) / 2)) * 0.1;\n        const customRot = 15 - ((i * 13) % 30);\n\n        return {\n            opacity: [0, 0.5, 0.625, 0.75, 1, 1, 1, 1, 1, 1, 1, 1],\n            y: [-100, 0, 0, 0, -40, 0, 0, 0, -15, 0, 0, 0],\n            scaleX: [1, 1, 1.5, 1, 1, 1, 1.25, 1, 1, 1, 1.1, 1],\n            scaleY: [1, 1, 0.8, 1, 1, 1, 0.9, 1, 1, 1, 0.95, 1],\n            rotate: [0, 0, customRot, 0, 0, 0, customRot * 0.5, 0, 0, 0, customRot * 0.25, 0],\n            transition: {\n                duration: 1.5,\n                delay: staggerDelay,\n                times: [0, 0.2, 0.25, 0.3, 0.5, 0.7, 0.725, 0.75, 0.85, 0.95, 0.975, 1],\n                ease: [\n                    \"easeIn\",\n                    \"easeOut\",\n                    \"easeIn\",\n                    \"easeOut\",\n                    \"easeIn\",\n                    \"easeOut\",\n                    \"easeIn\",\n                    \"easeOut\",\n                    \"easeIn\",\n                    \"easeOut\",\n                    \"easeIn\",\n                ],\n                repeat: repeat === true ? Infinity : repeat === false ? 0 : repeat,\n                repeatDelay: 0,\n            },\n        };\n    },\n};\n\nexport const SquashText = ({ repeat = true, children, className, ...props }: SquashTextProps) => {\n    const text = String(children);\n    const chars = text.split(\"\");\n\n    return (\n        <motion.div className={cn(\"overflow-hidden\", className)} initial=\"initial\" animate=\"animate\" {...props}>\n            {chars.map((char, i) => (\n                <motion.span\n                    key={i}\n                    custom={{ i, repeat, charsLen: chars.length }}\n                    variants={childVariants}\n                    style={{\n                        display: \"inline-block\",\n                        whiteSpace: char === \" \" ? \"pre\" : \"normal\",\n                        transformOrigin: \"50% 100%\",\n                    }}>\n                    {char}\n                </motion.span>\n            ))}\n        </motion.div>\n    );\n};\n"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. Characters bounce and squash into place with playful, dynamic energy. Configurable props include: {; repeat?: boolean | number;. Relies on motion. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "motion",
      "animation"
    ]
  }
}