18 lines
9.3 KiB
JSON
18 lines
9.3 KiB
JSON
{
|
|
"$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"
|
|
}
|
|
]
|
|
} |