{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitive-loop",
  "type": "registry:ui",
  "title": "Loop",
  "description": "Compare loop direction, count, pauses, and rhythm while controlling distraction.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "primitive",
    "loops"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/primitives/loop/",
  "files": [
    {
      "path": "src/registry/primitives/loop.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/primitives/loop.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\nexport type LoopDirection = \"normal\" | \"alternate\" | \"reverse\";\n\nexport type LoopPrimitiveProps = {\n  children: ReactNode;\n  duration?: number;\n  pause?: number;\n  direction?: LoopDirection;\n  iterations?: number;\n  infinite?: boolean;\n  distance?: number;\n  className?: string;\n};\n\nexport function LoopPrimitive({\n  children,\n  duration = 1.2,\n  pause = 0.16,\n  direction = \"normal\",\n  iterations = 3,\n  infinite = false,\n  distance = 18,\n  className,\n}: LoopPrimitiveProps) {\n  const reduceMotion = useReducedMotion();\n  const reverse = direction === \"reverse\";\n  const from = reverse ? distance : 0;\n  const to = reverse ? 0 : distance;\n\n  return (\n    <motion.div\n      className={className}\n      animate={reduceMotion ? { opacity: 1 } : {\n        transform: [`translate3d(0, ${from}px, 0)`, `translate3d(0, ${to}px, 0)`],\n      }}\n      transition={reduceMotion ? { duration: 0.12 } : {\n        duration,\n        ease: [0.77, 0, 0.175, 1],\n        repeat: infinite ? Infinity : Math.max(0, Math.round(iterations) - 1),\n        repeatType: direction === \"alternate\" ? \"reverse\" : \"loop\",\n        repeatDelay: pause,\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ]
}