4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T2151,import { useEffect, useState } from 'react'; import { motion } from 'motion/react'; import { MotionGrid, MotionGridCells, type Frames, } from '@/components/animate-ui/primitives/animate/motion-grid'; import { RotatingText, RotatingTextContainer, } from '@/components/animate-ui/primitives/texts/rotating'; const importingFrames = [ [[2, 2]], [ [1, 2], [2, 1], [2, 3], [3, 2], ], [ [2, 2], [0, 2], [1, 1], [1, 3], [2, 0], [2, 4], [3, 1], [3, 3], [4, 2], ], [ [0, 1], [0, 3], [1, 0], [1, 2], [1, 4], [2, 1], [2, 3], [3, 0], [3, 2], [3, 4], [4, 1], [4, 3], ], [ [0, 0], [0, 2], [0, 4], [1, 1], [1, 3], [2, 0], [2, 2], [2, 4], [3, 1], [3, 3], [4, 0], [4, 2], [4, 4], ], [ [0, 1], [0, 3], [1, 0], [1, 2], [1, 4], [2, 1], [2, 3], [3, 0], [3, 2], [3, 4], [4, 1], [4, 3], ], [ [0, 0], [0, 2], [0, 4], [1, 1], [1, 3], [2, 0], [2, 4], [3, 1], [3, 3], [4, 0], [4, 2], [4, 4], ], [ [0, 1], [1, 0], [3, 0], [4, 1], [0, 3], [1, 4], [3, 4], [4, 3], ], [ [0, 0], [0, 4], [4, 0], [4, 4], ], [], ] as Frames; const arrowDownFrames = [ [[2, 0]], [ [1, 0], [2, 0], [3, 0], [2, 1], ], [ [2, 0], [1, 1], [2, 1], [3, 1], [2, 2], ], [ [2, 0], [2, 1], [1, 2], [2, 2], [3, 2], [2, 3], ], [ [2, 1], [2, 2], [1, 3], [2, 3], [3, 3], [2, 4], ], [ [2, 2], [2, 3], [1, 4], [2, 4], [3, 4], ], [ [2, 3], [2, 4], ], [[2, 4]], [], ] as Frames; const arrowUpFrames = [ [[2, 4]], [ [1, 4], [2, 4], [3, 4], [2, 3], ], [ [2, 4], [1, 3], [2, 3], [3, 3], [2, 2], ], [ [2, 4], [2, 3], [1, 2], [2, 2], [3, 2], [2, 1], ], [ [2, 3], [2, 2], [1, 1], [2, 1], [3, 1], [2, 0], ], [ [2, 2], [2, 1], [1, 0], [2, 0], [3, 0], ], [ [2, 1], [2, 0], ], [[2, 0]], [], ] as Frames; const syncingFrames = [...arrowDownFrames, ...arrowUpFrames] as Frames; const searchingFrames = [ [ [1, 0], [0, 1], [1, 1], [2, 1], [1, 2], ], [ [2, 0], [1, 1], [2, 1], [3, 1], [2, 2], ], [ [3, 0], [2, 1], [3, 1], [4, 1], [3, 2], ], [ [3, 1], [2, 2], [3, 2], [4, 2], [3, 3], ], [ [3, 2], [2, 3], [3, 3], [4, 3], [3, 4], ], [ [1, 2], [0, 3], [1, 3], [2, 3], [1, 4], ], [ [0, 0], [0, 1], [0, 2], [1, 0], [1, 2], [2, 0], [2, 1], [2, 2], ], [], ] as Frames; const busyFrames = [ [ [0, 1], [0, 2], [0, 3], [1, 2], [4, 1], [4, 2], [4, 3], ], [ [0, 1], [0, 2], [0, 3], [2, 3], [4, 2], [4, 3], [4, 4], ], [ [0, 1], [0, 2], [0, 3], [3, 4], [4, 2], [4, 3], [4, 4], ], [ [0, 1], [0, 2], [0, 3], [2, 3], [4, 2], [4, 3], [4, 4], ], [ [0, 0], [0, 1], [0, 2], [1, 2], [4, 2], [4, 3], [4, 4], ], [ [0, 0], [0, 1], [0, 2], [2, 1], [4, 1], [4, 2], [4, 3], ], [ [0, 0], [0, 1], [0, 2], [3, 0], [4, 0], [4, 1], [4, 2], ], [ [0, 1], [0, 2], [0, 3], [2, 1], [4, 0], [4, 1], [4, 2], ], ] as Frames; const savingFrames = [ [ [0, 0], [0, 1], [0, 2], [0, 3], [0, 4], [1, 0], [1, 1], [1, 2], [1, 3], [2, 0], [2, 1], [2, 2], [2, 3], [2, 4], [3, 0], [3, 1], [3, 2], [3, 3], [4, 0], [4, 1], [4, 2], [4, 3], [4, 4], ], [ [0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 1], [1, 2], [2, 0], [2, 1], [2, 2], [2, 3], [3, 0], [3, 1], [3, 2], [4, 0], [4, 1], [4, 2], [4, 3], ], [ [0, 0], [0, 1], [0, 2], [1, 0], [1, 1], [2, 0], [2, 1], [2, 2], [3, 0], [3, 1], [4, 0], [4, 1], [4, 2], [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], ], [ [0, 0], [0, 1], [1, 0], [2, 0], [2, 1], [3, 0], [4, 0], [4, 1], [4, 3], [3, 3], [2, 3], [1, 3], [0, 3], [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], ], [ [0, 0], [2, 0], [4, 0], [4, 2], [3, 2], [2, 2], [1, 2], [0, 2], [4, 3], [3, 3], [2, 3], [1, 3], [0, 3], [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], ], [ [0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [4, 1], [3, 1], [2, 1], [1, 1], [0, 1], [4, 2], [3, 2], [2, 2], [1, 2], [0, 2], [4, 3], [3, 3], [2, 3], [1, 3], [0, 3], [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], ], [ [0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [4, 1], [3, 1], [2, 1], [1, 1], [0, 1], [4, 2], [3, 2], [2, 2], [1, 2], [0, 2], [4, 3], [3, 3], [2, 3], [1, 3], [0, 3], [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], ], [ [0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [4, 1], [3, 1], [2, 1], [1, 1], [0, 1], [4, 2], [3, 2], [2, 2], [1, 2], [0, 2], [4, 3], [3, 3], [2, 3], [1, 3], [0, 3], [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], ], ] as Frames; const initializingFrames = [ [], [ [1, 0], [3, 0], ], [ [1, 0], [3, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], ], [ [1, 0], [3, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [0, 2], [1, 2], [2, 2], [3, 2], [4, 2], ], [ [1, 0], [3, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [0, 2], [1, 2], [2, 2], [3, 2], [4, 2], [1, 3], [2, 3], [3, 3], ], [ [1, 0], [3, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [0, 2], [1, 2], [2, 2], [3, 2], [4, 2], [1, 3], [2, 3], [3, 3], [2, 4], ], [ [1, 2], [2, 1], [2, 2], [2, 3], [3, 2], ], [[2, 2]], [], ] as Frames; const states = { importing: { frames: importingFrames, label: 'Importing', }, syncing: { frames: syncingFrames, label: 'Syncing', }, searching: { frames: searchingFrames, label: 'Searching', }, busy: { frames: busyFrames, label: 'Busy', }, saving: { frames: savingFrames, label: 'Saving', }, initializing: { frames: initializingFrames, label: 'Initializing', }, }; const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export const MotionGridDemo = () => { const [state, setState] = useState('importing'); const runStates = async () => { while (true) { for (const state of Object.keys(states) as (keyof typeof states)[]) { setState(state); await sleep(3000); } } }; useEffect(() => { runStates(); }, []); return ( {states[state].label} ); }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["@animate-ui/primitives-animate-motion-grid","@animate-ui/primitives-texts-rotating"]}]]}],["$","$L50",null,{"sourceUrl":"https://animate-ui.com/r/demo-primitives-animate-motion-grid.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/demo-primitives-animate-motion-grid","itemId":"@animate-ui/demo-primitives-animate-motion-grid"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/demo/primitives/animate/motion-grid/index.tsx","content":"$52","type":"registry:ui","target":"components/animate-ui/demo/primitives/animate/motion-grid.tsx"}]}]]}],"$L53"]}]

Animate Motion Grid Demo

Installation

Files

components

Styles