{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-animate-motion-grid",
  "title": "Animate Motion Grid Demo",
  "description": "Demo showing an animated motion grid.",
  "registryDependencies": [
    "@animate-ui/primitives-animate-motion-grid",
    "@animate-ui/primitives-texts-rotating"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/animate/motion-grid/index.tsx",
      "content": "import { useEffect, useState } from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  MotionGrid,\n  MotionGridCells,\n  type Frames,\n} from '@/components/animate-ui/primitives/animate/motion-grid';\nimport {\n  RotatingText,\n  RotatingTextContainer,\n} from '@/components/animate-ui/primitives/texts/rotating';\n\nconst importingFrames = [\n  [[2, 2]],\n  [\n    [1, 2],\n    [2, 1],\n    [2, 3],\n    [3, 2],\n  ],\n  [\n    [2, 2],\n    [0, 2],\n    [1, 1],\n    [1, 3],\n    [2, 0],\n    [2, 4],\n    [3, 1],\n    [3, 3],\n    [4, 2],\n  ],\n  [\n    [0, 1],\n    [0, 3],\n    [1, 0],\n    [1, 2],\n    [1, 4],\n    [2, 1],\n    [2, 3],\n    [3, 0],\n    [3, 2],\n    [3, 4],\n    [4, 1],\n    [4, 3],\n  ],\n  [\n    [0, 0],\n    [0, 2],\n    [0, 4],\n    [1, 1],\n    [1, 3],\n    [2, 0],\n    [2, 2],\n    [2, 4],\n    [3, 1],\n    [3, 3],\n    [4, 0],\n    [4, 2],\n    [4, 4],\n  ],\n  [\n    [0, 1],\n    [0, 3],\n    [1, 0],\n    [1, 2],\n    [1, 4],\n    [2, 1],\n    [2, 3],\n    [3, 0],\n    [3, 2],\n    [3, 4],\n    [4, 1],\n    [4, 3],\n  ],\n  [\n    [0, 0],\n    [0, 2],\n    [0, 4],\n    [1, 1],\n    [1, 3],\n    [2, 0],\n    [2, 4],\n    [3, 1],\n    [3, 3],\n    [4, 0],\n    [4, 2],\n    [4, 4],\n  ],\n  [\n    [0, 1],\n    [1, 0],\n    [3, 0],\n    [4, 1],\n    [0, 3],\n    [1, 4],\n    [3, 4],\n    [4, 3],\n  ],\n  [\n    [0, 0],\n    [0, 4],\n    [4, 0],\n    [4, 4],\n  ],\n  [],\n] as Frames;\n\nconst arrowDownFrames = [\n  [[2, 0]],\n  [\n    [1, 0],\n    [2, 0],\n    [3, 0],\n    [2, 1],\n  ],\n  [\n    [2, 0],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [2, 2],\n  ],\n  [\n    [2, 0],\n    [2, 1],\n    [1, 2],\n    [2, 2],\n    [3, 2],\n    [2, 3],\n  ],\n  [\n    [2, 1],\n    [2, 2],\n    [1, 3],\n    [2, 3],\n    [3, 3],\n    [2, 4],\n  ],\n  [\n    [2, 2],\n    [2, 3],\n    [1, 4],\n    [2, 4],\n    [3, 4],\n  ],\n  [\n    [2, 3],\n    [2, 4],\n  ],\n  [[2, 4]],\n  [],\n] as Frames;\n\nconst arrowUpFrames = [\n  [[2, 4]],\n  [\n    [1, 4],\n    [2, 4],\n    [3, 4],\n    [2, 3],\n  ],\n  [\n    [2, 4],\n    [1, 3],\n    [2, 3],\n    [3, 3],\n    [2, 2],\n  ],\n  [\n    [2, 4],\n    [2, 3],\n    [1, 2],\n    [2, 2],\n    [3, 2],\n    [2, 1],\n  ],\n  [\n    [2, 3],\n    [2, 2],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [2, 0],\n  ],\n  [\n    [2, 2],\n    [2, 1],\n    [1, 0],\n    [2, 0],\n    [3, 0],\n  ],\n  [\n    [2, 1],\n    [2, 0],\n  ],\n  [[2, 0]],\n  [],\n] as Frames;\n\nconst syncingFrames = [...arrowDownFrames, ...arrowUpFrames] as Frames;\n\nconst searchingFrames = [\n  [\n    [1, 0],\n    [0, 1],\n    [1, 1],\n    [2, 1],\n    [1, 2],\n  ],\n  [\n    [2, 0],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [2, 2],\n  ],\n  [\n    [3, 0],\n    [2, 1],\n    [3, 1],\n    [4, 1],\n    [3, 2],\n  ],\n  [\n    [3, 1],\n    [2, 2],\n    [3, 2],\n    [4, 2],\n    [3, 3],\n  ],\n  [\n    [3, 2],\n    [2, 3],\n    [3, 3],\n    [4, 3],\n    [3, 4],\n  ],\n  [\n    [1, 2],\n    [0, 3],\n    [1, 3],\n    [2, 3],\n    [1, 4],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [1, 0],\n    [1, 2],\n    [2, 0],\n    [2, 1],\n    [2, 2],\n  ],\n  [],\n] as Frames;\n\nconst busyFrames = [\n  [\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [1, 2],\n    [4, 1],\n    [4, 2],\n    [4, 3],\n  ],\n  [\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [2, 3],\n    [4, 2],\n    [4, 3],\n    [4, 4],\n  ],\n  [\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [3, 4],\n    [4, 2],\n    [4, 3],\n    [4, 4],\n  ],\n  [\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [2, 3],\n    [4, 2],\n    [4, 3],\n    [4, 4],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [1, 2],\n    [4, 2],\n    [4, 3],\n    [4, 4],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [2, 1],\n    [4, 1],\n    [4, 2],\n    [4, 3],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [3, 0],\n    [4, 0],\n    [4, 1],\n    [4, 2],\n  ],\n  [\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [2, 1],\n    [4, 0],\n    [4, 1],\n    [4, 2],\n  ],\n] as Frames;\n\nconst savingFrames = [\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [0, 4],\n    [1, 0],\n    [1, 1],\n    [1, 2],\n    [1, 3],\n    [2, 0],\n    [2, 1],\n    [2, 2],\n    [2, 3],\n    [2, 4],\n    [3, 0],\n    [3, 1],\n    [3, 2],\n    [3, 3],\n    [4, 0],\n    [4, 1],\n    [4, 2],\n    [4, 3],\n    [4, 4],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [0, 3],\n    [1, 0],\n    [1, 1],\n    [1, 2],\n    [2, 0],\n    [2, 1],\n    [2, 2],\n    [2, 3],\n    [3, 0],\n    [3, 1],\n    [3, 2],\n    [4, 0],\n    [4, 1],\n    [4, 2],\n    [4, 3],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [0, 2],\n    [1, 0],\n    [1, 1],\n    [2, 0],\n    [2, 1],\n    [2, 2],\n    [3, 0],\n    [3, 1],\n    [4, 0],\n    [4, 1],\n    [4, 2],\n    [4, 4],\n    [3, 4],\n    [2, 4],\n    [1, 4],\n    [0, 4],\n  ],\n  [\n    [0, 0],\n    [0, 1],\n    [1, 0],\n    [2, 0],\n    [2, 1],\n    [3, 0],\n    [4, 0],\n    [4, 1],\n    [4, 3],\n    [3, 3],\n    [2, 3],\n    [1, 3],\n    [0, 3],\n    [4, 4],\n    [3, 4],\n    [2, 4],\n    [1, 4],\n    [0, 4],\n  ],\n  [\n    [0, 0],\n    [2, 0],\n    [4, 0],\n    [4, 2],\n    [3, 2],\n    [2, 2],\n    [1, 2],\n    [0, 2],\n    [4, 3],\n    [3, 3],\n    [2, 3],\n    [1, 3],\n    [0, 3],\n    [4, 4],\n    [3, 4],\n    [2, 4],\n    [1, 4],\n    [0, 4],\n  ],\n  [\n    [0, 0],\n    [1, 0],\n    [2, 0],\n    [3, 0],\n    [4, 0],\n    [4, 1],\n    [3, 1],\n    [2, 1],\n    [1, 1],\n    [0, 1],\n    [4, 2],\n    [3, 2],\n    [2, 2],\n    [1, 2],\n    [0, 2],\n    [4, 3],\n    [3, 3],\n    [2, 3],\n    [1, 3],\n    [0, 3],\n    [4, 4],\n    [3, 4],\n    [2, 4],\n    [1, 4],\n    [0, 4],\n  ],\n  [\n    [0, 0],\n    [1, 0],\n    [2, 0],\n    [3, 0],\n    [4, 0],\n    [4, 1],\n    [3, 1],\n    [2, 1],\n    [1, 1],\n    [0, 1],\n    [4, 2],\n    [3, 2],\n    [2, 2],\n    [1, 2],\n    [0, 2],\n    [4, 3],\n    [3, 3],\n    [2, 3],\n    [1, 3],\n    [0, 3],\n    [4, 4],\n    [3, 4],\n    [2, 4],\n    [1, 4],\n    [0, 4],\n  ],\n  [\n    [0, 0],\n    [1, 0],\n    [2, 0],\n    [3, 0],\n    [4, 0],\n    [4, 1],\n    [3, 1],\n    [2, 1],\n    [1, 1],\n    [0, 1],\n    [4, 2],\n    [3, 2],\n    [2, 2],\n    [1, 2],\n    [0, 2],\n    [4, 3],\n    [3, 3],\n    [2, 3],\n    [1, 3],\n    [0, 3],\n    [4, 4],\n    [3, 4],\n    [2, 4],\n    [1, 4],\n    [0, 4],\n  ],\n] as Frames;\n\nconst initializingFrames = [\n  [],\n  [\n    [1, 0],\n    [3, 0],\n  ],\n  [\n    [1, 0],\n    [3, 0],\n    [0, 1],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [4, 1],\n  ],\n  [\n    [1, 0],\n    [3, 0],\n    [0, 1],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [4, 1],\n    [0, 2],\n    [1, 2],\n    [2, 2],\n    [3, 2],\n    [4, 2],\n  ],\n  [\n    [1, 0],\n    [3, 0],\n    [0, 1],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [4, 1],\n    [0, 2],\n    [1, 2],\n    [2, 2],\n    [3, 2],\n    [4, 2],\n    [1, 3],\n    [2, 3],\n    [3, 3],\n  ],\n  [\n    [1, 0],\n    [3, 0],\n    [0, 1],\n    [1, 1],\n    [2, 1],\n    [3, 1],\n    [4, 1],\n    [0, 2],\n    [1, 2],\n    [2, 2],\n    [3, 2],\n    [4, 2],\n    [1, 3],\n    [2, 3],\n    [3, 3],\n    [2, 4],\n  ],\n  [\n    [1, 2],\n    [2, 1],\n    [2, 2],\n    [2, 3],\n    [3, 2],\n  ],\n  [[2, 2]],\n  [],\n] as Frames;\n\nconst states = {\n  importing: {\n    frames: importingFrames,\n    label: 'Importing',\n  },\n  syncing: {\n    frames: syncingFrames,\n    label: 'Syncing',\n  },\n  searching: {\n    frames: searchingFrames,\n    label: 'Searching',\n  },\n  busy: {\n    frames: busyFrames,\n    label: 'Busy',\n  },\n  saving: {\n    frames: savingFrames,\n    label: 'Saving',\n  },\n  initializing: {\n    frames: initializingFrames,\n    label: 'Initializing',\n  },\n};\n\nconst sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));\n\nexport const MotionGridDemo = () => {\n  const [state, setState] = useState<keyof typeof states>('importing');\n\n  const runStates = async () => {\n    while (true) {\n      for (const state of Object.keys(states) as (keyof typeof states)[]) {\n        setState(state);\n        await sleep(3000);\n      }\n    }\n  };\n\n  useEffect(() => {\n    runStates();\n  }, []);\n\n  return (\n    <motion.button\n      layout\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      className=\"px-3 h-11 gap-x-3 relative bg-primary inline-flex items-center justify-center\"\n    >\n      <motion.div layout=\"preserve-aspect\">\n        <MotionGrid\n          gridSize={[5, 5]}\n          frames={states[state].frames}\n          className=\"w-fit gap-0.5\"\n        >\n          <MotionGridCells className=\"size-[3px] rounded-full aspect-square bg-white/20 dark:bg-black/20 data-[active=true]:bg-white/70 dark:data-[active=true]:bg-black/70\" />\n        </MotionGrid>\n      </motion.div>\n\n      <RotatingTextContainer\n        text={states[state].label}\n        className=\"absolute left-[46px] top-1/2 -translate-y-1/2\"\n      >\n        <RotatingText\n          layout=\"preserve-aspect\"\n          className=\"text-primary-foreground\"\n        />\n      </RotatingTextContainer>\n\n      <span className=\"invisible opacity-0\" aria-hidden>\n        {states[state].label}\n      </span>\n    </motion.button>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/animate/motion-grid.tsx"
    }
  ],
  "type": "registry:ui"
}