{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-grid-demo",
  "type": "registry:ui",
  "title": "Motion Grid Demo",
  "description": "Demo Motion Grid.",
  "registryDependencies": [
    "https://animate-ui.com/r/motion-grid"
  ],
  "files": [
    {
      "path": "registry/demo/components/motion-grid/index.tsx",
      "content": "import { useEffect, useState } from 'react';\nimport { motion } from 'motion/react';\n\nimport { Button } from '@/components/ui/button';\nimport { type Frames, MotionGrid } from '@/components/animate-ui/components/motion-grid';\nimport { RotatingText } from '@/components/animate-ui/text/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    <Button size=\"lg\" className=\"px-3 h-11 gap-x-3 relative\" asChild>\n      <motion.button\n        layout\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <motion.div layout=\"preserve-aspect\">\n          <MotionGrid\n            gridSize={[5, 5]}\n            frames={states[state].frames}\n            cellClassName=\"size-[3px]\"\n            cellActiveClassName=\"bg-white/70 dark:bg-black/70\"\n            cellInactiveClassName=\"bg-white/20 dark:bg-black/20\"\n          />\n        </motion.div>\n\n        <RotatingText\n          text={states[state].label}\n          containerClassName=\"absolute left-[46px] top-1/2 -translate-y-1/2\"\n          layout=\"preserve-aspect\"\n        />\n\n        <span className=\"invisible opacity-0\" aria-hidden>\n          {states[state].label}\n        </span>\n      </motion.button>\n    </Button>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/components/motion-grid.tsx"
    }
  ]
}