53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55: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} ); }; 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L53",null,{"namespace":"@animate-ui","registryDependencies":["@animate-ui/primitives-animate-motion-grid","@animate-ui/primitives-texts-rotating"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"registry/demo/primitives/animate/motion-grid/index.tsx","content":"$55","type":"registry:ui","target":"components/animate-ui/demo/primitives/animate/motion-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]