{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-anticipation",
  "type": "registry:ui",
  "title": "Anticipation",
  "description": "Tune anticipation, follow-through, and deformation to understand physical feedback.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "principles"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/anticipation/",
  "files": [
    {
      "path": "src/registry/primitives/anticipation.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/anticipation.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nexport type AnticipationPrimitiveProps = {\n  trigger: string | number;\n  children: ReactNode;\n  distance?: number;\n  anticipation?: number;\n  followThrough?: number;\n  duration?: number;\n  easing?: Transition[\"ease\"];\n  className?: string;\n};\n\nexport function AnticipationPrimitive({\n  trigger,\n  children,\n  distance = 32,\n  anticipation = 0.18,\n  followThrough = 0.12,\n  duration = 0.52,\n  easing = [0.16, 1, 0.3, 1],\n  className,\n}: AnticipationPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const pull = distance * anticipation;\n  const follow = distance * followThrough;\n\n  return (\n    <motion.div\n      className={className}\n      key={trigger}\n      animate={reduceMotion ? { opacity: [0.65, 1] } : {\n        transform: [\n          \"translate3d(0, 0, 0) scale(1)\",\n          `translate3d(${-pull}px, 0, 0) scale(0.98)`,\n          `translate3d(${distance}px, 0, 0) scale(1.025)`,\n          `translate3d(${distance - follow}px, 0, 0) scale(1)`,\n        ],\n      }}\n      transition={{ duration: reduceMotion ? 0.14 : duration, ease: easing, times: [0, 0.18, 0.72, 1] }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ]
}